HSL Colors – CSS3

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:

 

<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>

 

<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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s