Kilian Valkhof

Understanding CSS Colour modes

CSS 2 and 3 offer a number of different ways to pick colours. While everyone knows the hexadecimal notation, fewer people know the RGB notation and colour keywords, and the new colour modes that CSS3 introduces are still a riddle to most. In this article I’ll walk through all the different options we (will) have to define our colours.

CSS2

CSS2 gives you three basic ways of choosing colours: hexadecimal, keywords and rgb.

Hexadecimal notation

You probably already know how the hexadecimal notation looks, for each colour (Red, green and blue) you have two letters or digits, and in front of that a #. The higher the digits are, the brighter the colour. Pure black becomes #000000 while pure white becomes #FFFFFF.

But what do those digits actually mean? Hexadecimal notation uses a system of 16 digits. Because we only have 10 digits, the remaining 6 (they start at 0) are described using the letters A to F. Together, this allows for 256 numbers per primary colour. Those 256 numbers correspond with the current RGB colours in most screens, and allow for about 16 million different colours.

Next to the #rrggbb notation, there also is the #rgb notation that lets you pick red, green and blue with 16 increments, totalling 4096 colours. This means that #ff0000 and #f00 give the same colour.

RGB Notation

Another notation that has been in CSS for a while is “direct” RGB. It looks like this: rgb(255, 0, 0) for 100% red, 0% green and 0% blue. As you might already have guessed, this notation also uses 256 steps for each of the primary colours.

The only difference (apart from the syntax) is that RGB uses our own system of counting, while hexadecimal notation uses an alternative method. In theory, it’s easier to use the RGB notation because we understand it better. But when working with hexadecimal notation, it is my experience that you learn to think in 16 digits pretty quickly.

Next to the 256 steps, you can also opt for a float point percentage. This means that you can specify percentages down to one decimal. rgb(100.0%, 0.0%,0.0%) would be bright red. The decimals are optional though, so rgb(100%, 0%, 0%) also works.

HTML4 Keyword Colors

HTML 4 defined a list of 16 keywords to represent certain colours. This list was then added to CSS2. The colours, and their hexadecimal counterpart, are visible in the table below:

These colours have a fixed hexadecimal counterpart so they will display the same on different monitors.
CSS2 also defines system colours that are dependent on how your own operating system looks. This website gives a nice list of them. Because they are linked to the colours the operating system uses, they will look different on different computers.

All notations are supported in all modern browsers and Internet Explorer 6.

CSS3

Here comes the fun part! A look at what we’ll be able to use when CSS3 becomes the standard. We’ll start with some variations on modes defined in CSS2:

RGBa notation

One of the most requested items for CSS was transparency when picking colours. While opacity comes close, it’s not precisely what we want, because it controls the transparency of the entire block, not just an individual colour. So what did those smart people at the W3C do? They added an extra option to the existing RGB notation, to control the opacity of the colour: rgba(255, 0, 0, 0.5) becomes bright red with 50% opacity. The way to specify the amount of opacity is the same as the current opacity attribute, by specifying a number between 0 and 1. Hexadecimal notation unfortunately doesn’t have an alpha-channel addition.

RGBa is supported by firefox 3 and safari 3.

SVG colour keywords

CSS2 added a list of colour keywords from HTML4 and CSS3 does the same with SVG. The SVG colour names actually include all the HTML4 colour names, and add a further 131 colour keywords, totalling to 148 colour keywords. That’s a bit too much to list here, so I’ll just link you to them. Another new colour keyword is “currentColor”, which is the same as the current specified colour of the element or the inherited value of color.

SVG colour keywords are supported by all modern browsers except for internet explorer, which doesn’t understand “grey”.

HSL

HSL stands for Hue, Saturation and Lightness, and looks like this: hsl(0, 100%, 50%) which will produce red. HSL uses a different colour model than RGB, in that it takes our colour spectrum as a circle with 360 degrees, starting with red. 0 is red, 120 is green, 240 is blue and 360 is red again. Saturation is the amount of greyness in the colour. 100% is no greyness, 0% is completely grey. Lightness is, basically the brightness. 0% is black, 100% is white and 50% is ‘normal’.

HSL is supported by opera 9.5, safari 3 and recent gecko (konqueror, firefox)recent KHTML and gecko* based browsers.
*Thanks to Arjan Eising for correcting this mistake

HSLa

Just like RGB, HSL has an opacity-added equivalent as well. it works exactly the same as the RGBa notation, adding a number between 0 and 1 at the end of the notation specifying the opacity.

HSLa is supported by firefox 3 and safari 3.

Support

What amazed me is that so much of the colour models are already supported by most modern browsers. Of course Internet Explorer is lagging behind, and the CSS3 bleeding-edge stuff only works in the bleeding-edge browsers, but that was to be expected.

For the future, HSL seems like a great way to choose, tweak and define colours, and a model I will undoubtedly start using. Opacity in both the RGB and HSL models is a welcome addition as well, though I wish it was also there in the hexadecimal notation.

My sources: the css3 colour specifications themselves, and the excellent css3.info.

So how about you, are you using anything else than hexadecimal notation, are you ready to experiment with HSL? Share your experiences in the comments :)