Are you tired of empty promises?

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 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.

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:

"Safe" RGB values

For a better view on Hex Values, see this tutorial and demostration on colors at Premiere Web Design.

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.