HSL Colors
As well as using Hexadecimal and RGB colors, CSS3 could also see the introduction of HSL (Hue, Saturation, Lightness) values.
HSL takes three values:
- Hue is a degree on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades.
- Saturation is a percentage value; 100% is the full colour.
- Lightness is also a percentage; 0% is dark (black), 100% is light (white), and 50% is the average.
This gives a very wide spectrum of available colors and tones.
So far, HSL has been implemented in Opera 9.5, Safari 3, Konqueror and Mozilla browsers.
See this example:
The top row, if you can see it, is composed with HSL values:
<div style="background-color: hsl(0,100%, 50%);"></div> <div style="background-color: hsl(120,100%, 50%);"></div> <div style="background-color: hsl(240,100%, 50%);"></div>
The lower row uses RGB values:
<div style="background-color: rgb(255,0,0);"></div> <div style="background-color: rgb(0,255,0);"></div> <div style="background-color: rgb(0,0,255);"></div>
A fuller explanation of HSLA colors can be found in the W3C CSS3 Color Candidate Recommendation.