CSS3 HSL HSLA Colour Opacity

A guide to using css3 ‘HSL’ & ‘HSLA’, giving us not only the ability to set HSL color/colour but also apply a level of opacity.

The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L).

Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in between
Saturation is a percentage: 0% being grayscale and 100% in full color
Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest

CSS 3 HSL


The above HSL example uses the following CSS 3

  1. CSS 3 HSL
  2. div.L1 { background:hsl(320, 100%, 25%); height:20px; }
  3. div.L2 { background:hsl(320, 100%, 50%); height:20px; }
  4. div.L3 { background:hsl(320, 100%, 75%); height:20px; }
  5. <br />
  6. div.L4 { background:hsl(202, 100%, 50%); height:20px; }
  7. div.L5 { background:hsl(202, 50%, 50%); height:20px; }
  8. div.L6 { background:hsl(202, 25%, 50%); height:20px; }
 

CSS 3 HSLA

Alpha allows us the ability to set a level of opacity. An element with opacity/alpha value of 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the color or object is against its background.

The above HSLA example is set in another layer containing a background texture and each layer uses the following CSS 3

  1. CSS 3 HSLA
  2. div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
  3. div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
  4. div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
  5. div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
  6. div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }
 

The Zen Elements CSS3 Series

Thank you for reading!
@zen