Coding for designers part 5

Welcome to the wonderful world of colour in CSS. A topic so juicy it deserves a post all of its own.

Keywords

To get us started it’s good to know that all browsers have a whole bunch of colour keywords built in. ‘Tomato’ is one such keyword that you might have noticed in the last blog post. Using one of these keywords is probably the quickest and easiest way to get some colour into your design. Here are some examples:

See the Pen Colour keywords by chris-creditdesign (@chris-creditdesign) on CodePen.

And for reference, here’s the full list of colours available. You’ll see that some of these have quite obscure names and some of the names names are downright hilarious. Yes ‘peachpuff’ I’m looking at you.

Although these colours are super easy to work with, in reality the colours in your designs or even in your brand guidelines will rarely match up exactly to one of these built in colours. Sooner or later you’re going to need some more precise control. Luckily CSS has got your back.

Your colour space or mine?

Most screens work by producing tiny dots of Red, Green and Blue light. When all three of these primary colours are shinning at their full intensity the screen appears to be white. When none of them are shinning the screen appears to be black.

Luckily CSS gives us direct access to each of these primary colours so that we can determine exactly how much of each should be mixed together to give us the colour we want on screen. To do that we use a special type of number called a hexadecimal number that looks something like this

#FFFFFF

But don’t worry it’s not as scary as it seems, in fact it’s almost logical when you know what’s going on.

Hexadecimal deep dive

For reasons that only electrical engineers understand, computers like to count in 16s rather than 10s. They also like to start at 0 rather than 1. Go figure.

To avoid going in to double figures after the 9, computers add the letters A through to F. Think of it a bit like a deck of cards where after the ten we have the jack, queen, king and ace cards.

Counting up from 1 to 16 using hexadecimal numbers looks like this: 0 1 2 3 4 5 6 7 8 9 A B C D E F.

Slow down egghead!

That’s great but how does it relate to colour? Well let’s break down that number to see what the parts mean.

The first # or hash character is just there to tell the computer to expect a hexadecimal number. Moving forward each pair of numbers control one of the primary colours. The first two handle red, the next two green and the final two blue.

Two Hexadecimal digits together can represent 256 different levels of colour. That’s 16 x 16 possible combinations ranging from 00 to FF. 0/256 or 00 being the lowest possible level and 256/256 or FF being the highest possible. So the number we see above, #FFFFFF represents all three primary colours at their maximum value, which in effect would give us white.

256 x 256 x 256 gives us 16,777,216 possible colour combinations. Experiment with the sliders below to get a feel for how the different colours work together.

See the Pen Hex colours by chris-creditdesign (@chris-creditdesign) on CodePen.

RGB

Hex numbers are cool and everything but luckily there’s an alternative way to declare RGB colours that’s a little bit easier to read. We can replace the # with rgb(); and simply put three normal numbers between 0 and 255 inside separated by commas. See if you can use the RGB sliders below to recreate the same colour as the Hex sliders above.

See the Pen RGB colours by chris-creditdesign (@chris-creditdesign) on CodePen.

RGBa

The really exciting bit is that this syntax can be extended to rgba();. The extra ‘a’ stands for ‘alpha’ and this allows us to add a fourth number that controls the transparency of our colours. This number can range from 1 for fully opaque to 0 for fully transparent. Go on have a go!

See the Pen RGBA colours by chris-creditdesign (@chris-creditdesign) on CodePen.

HSL

Ok time for a reality check. Hexadecimal or not, RGB colours are not very intuitive to work with. There I said it.

But luck is on our side once again because there is a third and quite different way to declare colours. Instead specifying the amount of red, green and blue to mix together we can instead declare our colour’s hue, saturation and lightness.

The hue is measured in degrees. Where red is at 0°, a greeny-yellow at 90°, cyan at 180°, blue/magenta at 270° and back to red at 360°. A very simple colour wheel would look something like this.

Saturation is measured in percentage with 0% being totally desaturated and 100% totally saturated.

Lightness is also measured in percentages with 0% being totally dark or black and 100% totally light or white.

The advantage is that it’s a bit easier to know what colour a HSL code represents or even to write our own codes from scratch. If we want a range of colours, perhaps with the same hue but with differing levels of darkness it’s quite possible to get the results we want by tweaking the lightness value without needing to fire up Photoshop.

See the Pen HSL colours by chris-creditdesign (@chris-creditdesign) on CodePen.

HSLa

We can also add an alpha value to get transparency. Can you guess what’s hiding behind that box?

See the Pen HSLA colours by chris-creditdesign (@chris-creditdesign) on CodePen.

What’s the catch?

RGBa and HSLa colours offer many advantages over plain old hex colours but if you get out there and start viewing the CSS of your favourite websites you’ll rarely see them in use. Why is that?

Well sadly they don’t work in every browser. Although CSS3 colours are widely supported in all modern browsers, copies of Internet Explorer older than version 9 will ignore HSLa and RGBa colours. Depending on the statistics you look at, that’s around 20% of internet users. Bummer.

One solution is to declare two colours where possible, a tried and tested hex number as well as a more modern RGBa or HSLa colour. The browsers that don’t understand the new colours will simply pass over them and the hex colours will be used instead.

body { 
	/* Bad ass fallback colour for IE <9 */
	background-color: #BADA55;
	/* Sweet HSLa colour for everyone else */
	background-color: hsla(74, 64%, 59%, 1); 
}

Sorry to end on a down note. But don’t worry. Next time we’ll push on with CSS layout and things will get a lot more exciting.