CSS HSL HSLA Color Values Format

« Previous Tutorial Next Tutorial »

The HSL color format takes three parameters, Hue, Saturation, and Lightness. The Hue parameter specifies an angle of the color around the circular wheel, for instance 00 (means red color), 600 (means yellow color), 1200 (means green color), and 1800 (means cyan color). Hue values are either integer or floats in the range 0-360 or integer or float percentage values in the range 0-100%.

Saturation represents the mixing of white color with a base color. For instance, 0% means grayscale and 100% means full color. Lightness specifies the percentage of the brightness of the base color, where 0% means dark, 50% means average, and 100% means light.


The following code fragment shows the use of HSL format :

h1{ background-color: hsl(320, 100%, 25%);}
h2{ background-color: hsl(320, 100%, 50%);}
h3{ background-color: hsl(320, 100%, 75%);}

You can also use the alpha channel with the HSL format, which together is called HSLA format.

The following code fragment shows the use of HSLA format :

h1{ background-color: hsla(165, 35%, 50%, 0.0);}
h2{ background-color: hsla(165, 35%, 50%, 0.2);}
h3{ background-color: hsla(165, 35%, 50%, 0.4);}
h4{ background-color: hsla(165, 35%, 50%, 0.6);}
h5{ background-color: hsla(165, 35%, 50%, 0.8);}
h6{ background-color: hsla(165, 35%, 50%, 1.0);}

In the preceding code fragment, the opacity or alpha value 1.0 shows the H6 element of HTML completely, while the opacity value 0.0 hides the element completely.

« Previous Tutorial Next Tutorial »


Quick Links
Signup - Login - Give Online Test