Colour Formats and CSS3

3 Comments

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

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.

CSS, Website Advice , , , ,


3 Comments

  1. Ivy

    Hi! Thank you for such a helpful article. Now I know why CSS colors are so complex. It uses the color wheel. Lols. Aside from fonts, does these colors are applicable to use in backgrounds? By the way, since I dont memorize all the hexa equivalents of these colors, I uses generators like: http://www.generatecss.comhttp://www.generatecss.com/css/background/ and http://www.w3schools.com/css/ so it would allow me to pick colors as there is a prompt or window that would enable me to choose colors. Thanks again!

    • Stuart

      Thanks Ivy – and your site is a very useful resource too!

It's good to talk!

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

Please answer before submitting form * Time limit is exhausted. Please reload CAPTCHA.