Colour Formats and CSS3

Having worked with HEX colours and RGB in web design for some time now, I am intrigued by how successful the new HSLA format will be. As of yet, it is supported in most modern browsers, but have a guess which one does not support it?

Colour in CSS can be used to define the foreground, background or border of an element, using something like this:

.myElement {
color: #360;
background-color: rgb(153,200,153);
border-color: green;
}

This is using the colour name value too. RGB can also include alpha too, so by adding a fourth value (between 0 and 1) you can make elements transparent. That is in all browsers except Internet Explorer of course. To do this, simply change the code:

background-color: rgba (153, 200, 153, 0.5)

This will give you a 50% transparent light green.

The new HSL format (and HSLA) let’s us specify colours based on Hue, Saturation, Lightness and Alpha, but seeing this directly in Photoshop might not be as easy for visual designers.

The Hue is specified in degrees, how far round the 360 degrees of the colour wheel the colour is.

Saturation is how dense the colour is (think shades and tints) with 0% being neutral or grey and 100% being as intense as the colour could get.

Lightness is a percentage between 0% black and 100% white. Think of shades and tints.

Take a look at the image below. The Saturation value slider at the bottom uses a red to grey in this case. The Lightness is on the right.

HSLA Color Wheel

To specify the colours, work out their position on the wheel (red = 0 degrees, green = 90 degrees etc) then use the same format as for rgb:

background-color: hsl(0, 75%, 60%)

Add the alpha if you want to, but remember, like the rgba, IE does not support this.

Related posts:

Get A Company Logo, Business Stationery And Website In A Week Colour Division logo The LunchBox Has Landed Logo New Branding and Design for Colour Division