CSS3

• Home / CSS3 Previews / HSL Colors

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.