Choosing the Right Colours for Your Website

This tutorial serves as an introduction to colours on the Web. It explains the concept of Web-safe colours, and also delves into the process of choosing colours that look good on your site.

Colour on the web can be a pain, but in this tutorial, we'll take you through the web colour maze so you can avoid the usual traumas. We'll be splitting it into two main chunks - the practical, and the subjective use of colour...

Practical issues

Although much less of a problem these days, many Web browsers can only display a very limited range of colour. There are only 216 Web-safe colours. Unless the browser is running on a system with more that 256 colours, all the other colours are made by dithering (mixing) these safe colours together to get an approximation of what you want. In the wrong context, this can look terrible.

2010 Update. Note that these days most systems run in millions of colours, which means you can largely ignore web safe colour issues, but you might still find it an problem occasionally.

Colours are defined in HTML as hexadecimal values, e.g. "333399". These correspond in pairs to the 3 RGB values needed to make a colour. So the example above has and RGB value of 51, 51, 153, and is this shade of blue.

Note here i'm spelling "colour" the English way (hey we're British, we can't help it!), but colours are defined in HTML using the American spelling of "color".

Safe colours are made up of red, green and blue values taken from a limited range of numbers, shown in the table below:

Hex Decimal
00
33
66
99
CC
FF
00
51
102
153
204
255

"Safe" RGB values

You can see the makeup of the safe colours at W3Schools. The safe colours were obviously chosen originally by a blind programmer at Netscape, since most of them are just awful!

Unsafe colours are best avoided for big expanses of flat colour (like backgrounds), since you have no idea how they're going to reproduce on another set - they can do almost anything! If you do use them, use them for smaller areas of colour, like the bgcolor in a table. You can find out the hex value of an RGB colour by using either a calculator, if it has mode conversion on it, or from one of the many sites running a conversion program - here's the one I use.

Taste issues

Choosing the right colours for your site is really imporatant, since it's really the first impression that visitors to you will get.

It can be really easy to get carried away and use loads of colours everywhere, because you want a site to be colourful, but there are ways to get a colourful result without it all clashing.

Basically, the trick is this - drop the number of colours you use. This, in the end will have a much greater impact than using all the colours there are on one page. The very popular Taste PageKit is quite colourful, but is restricted to shades of blue and, inside, pink. Again, sounds bad, but you just have to see it!

What I'm saying is, try to maintain a colour style throughout your site (avoiding those rainbow horizontal rules is a good plan too), and keep the colour count down a little. When you choose colours (and we've used this analogy elsewhere in these tips) try to envisage what you'd think if your living room was done out like the colours you've chosen. If you wouldn't want to spend much time in it - think again!

Lastly, try to use non-colour colours as well, i.e. black and white. These draw attention towards the colours you ARE using, which means you can use colour more sparingly to give greater impact. They are great as background colours too.

One book I use all the time is Color Index (buy from Amazon.com | Amazon.co.uk) — it contains over 1,100 different colour combinations, and uses moods such as "retro" to describe them. This makes choosing the right colours for your site that much easier!

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page