HTML Elements

◄Page 1►

HSLA Color Features

HSLA Program Colors Violet 100% Saturation

Introduction

If you love color, you'll enjoy applying hue, saturation, brightness and alpha; (HSLA), with HTML and some CSS.

See a set of graphic gradations, with the full range of hues, yet different settings for HSLA. The gradations range from red to green, blue and then red again. At the top of each graphic, view red boxes with different settings for hue, saturation, lightness or alpha. Each box corresponds to the top color in the graded graphical image.

Also see a set of four unique colors, toward the bottom of the graphics. View the markup and CSS itself, for each example, toward the bottom of this page.

HSLA Palettes

Each graphic displays the complete hue range with various settings, as if we were looking at a color wheel. Red at the top wraps around to red at the bottom. Each graphic begins at red, moves to green at one quarter, then blue at three quarters. Red has been added to the end, as well, to represent the range between blue and red. Hue represents additive color on the color wheel from 0 to 360 degrees. 0⁰ and 360⁰ are both red, 120⁰ is pure green, 240⁰ is pure blue, 300⁰ is blue-red or violet. Notice 100% saturation, 50% brightness and 1.0 alpha, display maximum color. Brightness at 0% displays black. The alpha setting allows background color to display through an hsla setting. This page background is white. Therefore the lower the alpha setting the lighter a color appears. See how the following red boxes correspond to code, below.

Graphical Colors

Coded Colors

Markup for Linear Gradation

<div 
style="
width:100%;
height:64px; 
background-image: linear-gradient(
to right, 
red, yellow, 
green, 
dodgerblue, 
blue, 
red);"
);
</div>

Markup Blue Variations: HSLA Code

This markup, with CSS, demonstrates the various parameters passed to hsla(), for the color blue only, which modify the saturation, brightness and alpha values. The first value in the hsla parameter list equals 240 for a blue hue.

Change Colors

If you want to modify red, input 0 as the first parameter. If you want to modify green, input approximately 120. Select colors with numbers in the far right vertical column of the Graphical Colors example above. Notice, in the fully saturated far left vertical strip, that red equals zero, green is approximately 120 and blue is approximately 240.

Blues

<div 
 class="hsl" 
 style="background-color:hsla(
 240,
 100%,
 50%,
 1.0);
 color:white;"
>
 0 Red<br> 
 100% saturation<br>
 50% brightness<br> 
 1.0 alpha
</div>

<div 
 class="hsl" 
 style="background-color:hsla(
 240,
 100%,
 50%,
 0.50);"
>
 0 Red<br>
 100% saturation<br> 
 50% brightness <br>
 0.50 alpha
</div>

<div class="hsl" 
 style="background-color:hsla(
 240,
 100%,
 25%,
 1.0); 
 color:white;"
>
 0 Red<br>
 100% saturation<br>
 25% brightness<br> 
 1.0 alpha
</div>

<div 
 class="hsl" 
 style="background-color:hsla(
 240,
 25%,
 50%,
 1.0);
 color:white;"
>
 0 Red<br>
 25% saturation<br>
 50% brightness<br>
 1.0 alpha
</div>

Markup Color Variations: HSLA Vertical Strips

This markup, with CSS, demonstrates the various parameters passed to hsla() to display four colors.

<div 
 class="hsl" 
 id="vio" 
 style="background-color:hsla(290,100%,50%,1.0);"
>
 290 Violet<br>
 100% saturation<br>
 50% brightness<br>
 1.0 alpha<br>
</div>

<div 
 class="hsl" 
 style="background-color:hsla(120,100%,50%,0.50);"
>
 120 Green<br>
 100% saturation<br>
 50% brightness<br>
 0.50 alpha<br>
</div>

<div 
 class="hsl" 
 style="background-color:hsla(240,100%,25%,1.0); 
 color:white;"
>
 240 Dark Blue<br>
 100% saturation<br>
 25% brightness<br>
 1.00 alpha<br>
</div>

<div 
 class="hsl" 
 style="background-color:hsla(60,100%,50%,1.0);"
>
 60 Yellow<br>
 100% saturation<br> 
 50% brightness<br>
 <br>1.00 alpha<br>
</div>

Internal Styles for HSLA Example

<style>
  
img.hsl{
 width:25%; 
 float:left;
}

div.hsl{
 width:20%; 
 padding:2%; 
 float:left; 
 margin-right:1%;
}

@media (max-width: 640px){
 div.hsl{
  font-size:70%;
 }
}
</style>    

Summary

If you love color, you'll enjoy applying hue, saturation, brightness and alpha; HSLA, with HTML and some CSS.

You saw a set of graphic gradations, with the full range of hues, yet different settings for HSLA. The gradations range from red to green, blue and then red again. At the top of each graphic, you viewed red boxes with different settings for hue, saturation, lightness or alpha. Each box corresponds to the top color in the graded graphical image.

You also saw a set of four unique colors, toward the bottom of the graphics. You viewed the markup and CSS itself, for each example, toward the bottom of this page.

Graphics

Graphics were prepared from both screen shots of HSLA color examples and Photoshop, applying a full linear gradation, with red at the start and end, and carefully selected colors for interpolation. Alpha opacity and saturation settings were applied, with Photoshop in the images, to correspond with CSS settings.

Unusual HTML5 Skills

See the markup, CSS and results of various HTML5 elements, with styles and some unusual or seldom used techniques.

Tags