CSS3: Hue, Saturation and Lightness Colours

Not sure about the usefulness of this one but it’s worth knowing about. CSS3 will see the introduction of colour-values based on hue, saturation and lightness values – one of many ways of describing colours other than RGB. It requires a colour-value, from 0 to 360 which represents a position on a colour wheel (think 360 degrees of colour). A percentage saturation value will then show how saturated that colour is, and a percentage lightness value will vary it from black to white. So the following will produce a fully saturated, dark red:

<div style="background: hsl(0, 100%, 50%);"></div>

I don’t as yet see a real need for this apart from saving a little bit of time if you had been converting HSL colours to RGB. What would be more useful in my opinion would be direct support for CMYK colours, so that print-branding can be carried on to the Web with minimal conversion.

Support for HSL colours has been added to Firefox 3, Safari 3 and Opera 9.5.

This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>