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

Copyright ⓒ 2010 Jerry Seeger
All Rights reserved until I get that creative commons thing figured out.

One thought on “Specifying color in CSS3

  1. what?! msie equals epic failure?! WHAT R U TALKIN BOUT SHUT UP

    that said, this is awesome. i read very, very briefly about the coolness of css3, obviously not un-briefly enough.

Leave a Reply

Your email address will not be published. Required fields are marked *