Using the CSS 3 HSL declaration for colors/colours. Whatever next!?? HSLA… A tutorial on using the HSL & HSLA declarations along with the quick + / - guide to which browsers currently support the herein effect
The HSL declaration sets color/colour using Hue (H), Saturation (S) and you maybe guessed it, 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
Random Thought: Why is ‘Lightness’. Maybe I’m just used to ‘Brightness’ from Photoshop… anyway, on with the tutorials!
CSS 3 HSL
The above HSL example uses the following CSS:
- CSS 3 HSL
- div.L1 { background:hsl(320, 100%, 50%); height:20px; }
- div.L2 { background:hsl(320, 50%, 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, 100%, 75%); height:20px; }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8..)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers not seeing the effects of HSL…
CSS 3 HSLA
Alpha - just as with the RGBA declaration - 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 is against its background.
The above HSLA example uses the following CSS:
- 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; }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8..)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers not seeing the effects of HSLA…
discuss this topic to forum
