Using Colour

Previous page...

HTML was introduced as a mark up language in which the author controlled the layout but the end user controlled the style of the document through the preferences set in the browser (e.g. typeface, color etc). However, since graphical browsers appeared in 1994 web authors and particularly designers have been asking for more and more control over the way their pages appear. The use of colour for backgrounds and text is the simplest way to do this, and the first step towards stamping a memorable style on your pages.

Browser Safe Colours

There are two main ways that colour is described. When printing, colour is separated into cyan, magenta, yellow and kohl. This is often known as CMYK. Computer monitors, however, use a combination of red, green and blue light to produce the colours we see on screen. This is often known as RGB colour.

There are only 216 colours that all browsers and all computers will display in the same way. (Well, all those with colour monitors anyway! ) These 216 colours are called "Browser Safe Colours". There are two ways to describe these colours, either by their name or by using a hexadecimal number (sometimes just called the hex number).

Browser Safe Colours

Colour Names

There are 140 specific colour names; alongside the predictable "black," "white," "red," "yellow," "blue," and "green" there are names such as "goldenrod" and "blanchedalmond" and "mistyrose". These are sometimes easier to remember but they are unreliable as different browsers treat these names in different ways. In fact, they are so flexible that you can even make up your own names (even your own name will select a colour, but different browsers will treat it in a different way).

Hexadecimal Values


The most reliable way to refer to colour is using its Hexadecimal number. These are always written in the following format "#RRGGBB" . RR is the amount of red in the colour, GG is the amount of Green and BB is the amount of blue.

The hex value for 100% is F, the hex value for 0% is 0, thus "#000000" is the hex value for black which is 0% of all colours. "#FFFFFF" is white, that is 100% of all colours. All the other colours lie between these two, for example, "#0000FF" is blue.

But don't worry, no one expects you to work all 216 colours out for yourself. Help is out there! Here is a list of some browser safe colours with their name and hex number. For more colours check out the Resources at the end of this module.

HINT:To make your website easy to read it is best to choose a dark colour for text on a pale background and a pale colour for text on a dark background. The easier your page is on the eye, the longer a reader will spend looking at it.

Back to Top of Page

© 2003 Ashley Preston 

Computeach International Ltd