GoLiveHeaven :: HTML Basics : Colours

Colours on the web are known to be one of the problems facing web-designers. People use different computers, different operating systems, and have their monitors set to different numbers of colours, so how can you be sure that each surfer will always see the colours you specify?

The answer is that there are a set of so-called "web-safe" colours; colours which will display correctly no matter which browser or type of computer a websurfer is using. For the sake of keeping things simple, there are 216 web-safe colours, no more.

There are two ways to specify colours, as you may have noticed. These are Hexadecimal and By Name. I'll explain each method separately.

Hexadecimal

This is a counting system, much like our own natural 'base-10' or 'decimal' counting system. In our usual method of counting, there are only ten different digits (0,1,2,3,4,5,6,7,8,9) to use, hence the name 'base-10'. In hexadecimal, there are 16 different digits: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

The only thing you need to know is that colours in hexadecimal are represented by three two-digit hexadecimal numbers, representing the red, green and blue 'components' of the colour, like so:

Suppose you want to set the default text colour of your document (see The whole HTML document - the BODY section for more on this) to a shade of purple. If you want to use the hexadecimal method, you need to know the hexadecimal ('hex') numbers for the red, green and blue components of that colour. These three two-digit numbers are combined to give the full value, like so:

You can see from the added colouring here that the first two digits are the red component, the next two are the green component and the last two are the blue component. The result of this actual code would be text in this colour. Note that you must put the # character before the digits, to show that this is hexadecimal and not By Name.

Okay, this all sounds incredibly complicated. You want to know how to do it in a much easier way, and you'll be pleased to know that there is indeed a far simpler way to specify colours. The other method, By Name, is much easier and is covered below.

By Name

This is much easier; you simply type the name of the colour you want, like this (using the above example again) :

This will once again produce text in this colour, but without the hassle of hexadecimal. There's only one problem with this method, and it's the same problem as the hexadecimal method: how do you know which colour corresponds to which name? Common colours like purple and red and blue and so on are easy, but what exactly are you supposed to call the shade of yellow that's close to orange but not quite as dark?

The answer is that you use a reference chart. There are only 216 web-safe colours, and so there are 216 proper names for these colours which you can use instead of hexadecimal values. I've made a reference chart, showing a sample of each colour with its proper name and also its hexadecimal value, for you to use. You can see the chart and/or download it by clicking the 'Go to the Chart' link below.

Go to the Chart

NOTES ABOUT CHART: Please bear in mind the following points about the web-safe colour chart:

For the sake of filesize, the chart was made at 256 colours. Therefore, some of the colour samples may not show properly on some computers. However, the majority of the colours will display perfectly, and you can work out what a missing colour looks like by looking at the colours before and after it.

This chart is not owned by the Mattman in any way. The chart was generated by taking a series of screenshots from the excellent web-safe colour-picker within GoLive CyberStudio 3 on the Macintosh. Any ownership which exists is credited to Adobe Systems, Inc. I thoroughly recommend GoLive to you as the very best web-authoring package available. Visit Adobe's website for more information.

TO DOWNLOAD THE CHART: Follow these instructions to download a copy of the chart:

FIRST you must go to the chart.

Then:

Macintosh: Either just drag the chart from your browser window onto your desktop, or hold down your mouse button with the cursor over the chart; a menu will appear with an option to 'Save this image As...'. Choose this option, select a filename and location for your copy of the chart, and click 'Save'.

Windows: Right-click (click with the right mouse-button) on the chart, and you will be given the option to save the image on your local hard-disk.

Once you've downloaded the chart, click your browser's 'Back button' to return to this page.