CSS3 HSL & HSLA
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.
CSS3 HSL
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
Cross Brower Compatability
HSL & HSLA is currently well supported in FireFox, Google Chrome and Safari, also not requiring any prefix.
All articles in the CSS3 will be updated to show future support & development.
CSS3 HSL
The above HSL example uses the following CSS 3
- CSS 3 HSL
- div.L1 { background:hsl(320, 100%, 25%); height:20px; }
- div.L2 { background:hsl(320, 100%, 50%); height:20px; }
- div.L3 { background:hsl(320, 100%, 75%); height:20px; }
- <br />
- div.L4 { background:hsl(202, 100%, 50%); height:20px; }
- div.L5 { background:hsl(202, 50%, 50%); height:20px; }
- div.L6 { background:hsl(202, 25%, 50%); height:20px; }
An example for those on alternative browsers not seeing the effects of HSL…
CSS3 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
- CSS 3 HSLA
- div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
- div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
- div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
- div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
- div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }
An example for those on alternative browsers not seeing the effects of HSLA…
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
- CSS3: Transition
Thank you for reading!
@zenelements // Alex
You forgot to mention that HSLA supports alpha in the last value. Haven’t tested yet whether or not it affects child elements, but it could be a good future post :)
@Esben | Thank you for pointing out the error. I did manage quietly skip over the point of Alpha transparency in HSLA. I think due to having covered it in RGBA already. However, I have now corrected this :)
Your example image links for non-conforming browsers are switched, with the hsl example pointing to the hsla image and the hsla example pointing to the hsl image.
The wonderful thing about the hues is that 0-100 goes from red, through orange and yellow, to green.
This maps really well to “okayness” and can be used pretty much directly in status indicators.
I posted a comment and got zero feedback? That’s not good.
@Zecc – Thank you for pointing this out; it’s not something I think I’ve seen mentioned before either (!) but it is useful the beginning hue range (0 – 100) covers a red to green specturm and agree it could be implimented rather well for a status indicator.
loving your articles. Please keep it updated as new css3 becomes supported in browsers. Been searching the net for examples like yours. There are hundreds but yours are by far the best.