Specifying color in CSS3

Last updated May 30, 2010

One of the nice things about CSS3 is that it provides more flexibility in how one specifies colors. The most talked-about addition to css is the alpha channel – a way to make colors translucent, so you can still see what’s underneath them. That’s definitely cool, but from a Web design standpoint the ablity to specify colors with HSL (Hue, Saturation, Lightness) can greatly simplify developing a consistent color scheme. “The same basic color, only darker” becomes a heck of a lot simpler with HSL.

My intent was to provide a table of which browsers supported the opacity and hsl color specifications (the way I did for border-radius), but in the end that wasn’t necessary. Here’s the lowdown:

Safari, Firefox, Chrome, and Opera: support rgba and hsla
Internet Explorer 7: epic fail
Internet Explorer 8: epic fail

I suppose I had my hopes for IE8. Oh, well. (Note to the Web-using public: the sooner you stop using Internet Explorer, the sooner the Web will start working better. I’m just saying, is all.)

The table will work as a quick-reference guide for the syntax for specifying colors with hsl and alpha values. In the examples I apply the colors to the background of a <div> element, but you can use these colors anywhere, including text. If there are any special cases or places where particular browsers get things wrong, I’d love to hear about it.

property definition	CSS3 Specification	your browser
background-color:rgb(255, 0, 0); background-color:rgb(0, 255, 0);
background-color:rgba(255, 0, 0, 1); background-color:rgba(0, 255, 0, 1);
background-color:rgba(255, 0, 0, 0.5); background-color:rgba(0, 255, 0, 0.5);
background-color:rgba(255, 0, 0, 0.5); background-color:transparent;
background-color:hsl(0, 100%, 50%); background-color:hsl(120, 100%, 50%);
background-color:hsla(0, 100%, 50%, 1); background-color:hsla(120, 100%, 50%, 1);
background-color:hsla(0, 100%, 50%, 0.5); background-color:hsla(120, 100%, 50%, 0.5);
Incrementing hue, moving around the color wheel Hue expressed as an angle with red=0=360 Roll over colors to see values hsla(0, 100%, 50%, 1) hsla(18, 100%, 50%, 1) hsla(36, 100%, 50%, 1) hsla(54, 100%, 50%, 1) hsla(72, 100%, 50%, 1) hsla(90, 100%, 50%, 1) hsla(108, 100%, 50%, 1) hsla(126, 100%, 50%, 1) hsla(144, 100%, 50%, 1) hsla(162, 100%, 50%, 1) hsla(180, 100%, 50%, 1) hsla(198, 100%, 50%, 1) hsla(216, 100%, 50%, 1) hsla(234, 100%, 50%, 1) hsla(252, 100%, 50%, 1) hsla(270, 100%, 50%, 1) hsla(288, 100%, 50%, 1) hsla(306, 100%, 50%, 1) hsla(324, 100%, 50%, 1) hsla(342, 100%, 50%, 1) hsla(360, 100%, 50%, 1)
Incrementing saturation Roll over colors to see values. hsla(216, 0%, 50%, 1) hsla(216, 10%, 50%, 1) hsla(216, 20%, 50%, 1) hsla(216, 30%, 50%, 1) hsla(216, 40%, 50%, 1) hsla(216, 50%, 50%, 1) hsla(216, 60%, 50%, 1) hsla(216, 70%, 50%, 1) hsla(216, 80%, 50%, 1) hsla(216, 90%, 50%, 1) hsla(216, 100%, 50%, 1)
Incrementing lightness Roll over colors to see values. hsla(216, 100%, 0%, 1) hsla(216, 100%, 10%, 1) hsla(216, 100%, 20%, 1) hsla(216, 100%, 30%, 1) hsla(216, 100%, 40%, 1) hsla(216, 100%, 50%, 1) hsla(216, 100%, 60%, 1) hsla(216, 100%, 70%, 1) hsla(216, 100%, 80%, 1) hsla(216, 100%, 90%, 1) hsla(216, 100%, 100%, 1)
Incrementing opacity Roll over colors to see values. Grey bar is to show opacity. hsla(216, 100%, 50%, 0) hsla(216, 100%, 50%, 0.1) hsla(216, 100%, 50%, 0.2) hsla(216, 100%, 50%, 0.3) hsla(216, 100%, 50%, 0.4) hsla(216, 100%, 50%, 0.5) hsla(216, 100%, 50%, 0.6) hsla(216, 100%, 50%, 0.7) hsla(216, 100%, 50%, 0.8) hsla(216, 100%, 50%, 0.9) hsla(216, 100%, 50%, 1)
.sweet_text { font-family: cursive; font-size: 170px; color: hsla(216, 100%, 50%, 0.3); } Sweet!

Notes I used SVG graphics to create most of the images for the specification column. That way I was able to type in the exact drawing commands based on my interpretation of the spec. The graphics are my own work and any errors are all my fault.

Hire Jerry Seeger