- 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.
TAG CLOUD
acid3
advanced layout
advanced layout module
Animations
background
border
Browsers
color
css
CSS3.info
CSS WG
csswg
developer tools
disabled
enabled
Feedback
firefox
firefox 3.1
flexible box layout
fonts
generated content
grid positioning
HSLA
HTML5
ie6
jina bolton
jquery
media player
Multicolumn Layout
News
Opera
Opera Dragonfly
presentations
RGBA
safari
Selectors
slides
SVG
text rendering
W3C
wasp
Web Fonts
webkit
windows