HTML and CSS Reference
In-Depth Information
HSL notation
A color value can be set with the
hsl()
function (which stands for hue, saturation, and
lightness). Hue is a degree on a color circle from 0 to 360, where 0 and 360 are red, 120
is green, and 240 is blue. Saturation is a percentage value, with 0% giving a shade of gray
and 100% giving the full color. Lightness is also specified as a percentage, from 0% (black)
to 100% (bright).
p { color: hsl(0, 100%, 100%); }
Although HSL colors are more intuitive than RGB colors, and the color values are
easier to tweak, HSL should not be used until IE8 usage declines to a point when it is
no longer necessary for web sites to support it. HSL is a CSS 3 value and is supported in
Chrome, Firefox, IE9+, Safari, and Opera 10+.
HSLA notation
Similar to RGB, the HSL notation can be extended with an alpha value for specifying the
transparency.
/* Red with 50% transparency */
p { color: hsla(0, 100%, 100%, 0.5); }
HSLA is supported in Chrome, Firefox 3+, IE9+, Safari, and Opera 10+, which is the
same as the RGBA function.
