I promised you back in Lesson 5 that we would discuss colour on web pages and how to define it in HTML. Well, the time has come. As this topic is not so much about HTML coding as it is about colour on the Web, I decided to deal with it in an Appendix rather than one of the lessons.

Let's begin with the basics of colour. Schoolchildren learn in painting lessons that the three primary colours from which all other colours can be made by mixing are red, yellow and blue. Actually, this is due to imperfections in pigments. The real primary colours of light, from which all others can be made by mixing, are red, green and blue.

It's common in the world of electronics, computers and monitors to talk about "RGB" to denote Red-Green-Blue, invariably in that order. And that's how we specify colours for the Web -- in terms of the amount or proportion of red, green and blue light in the mix that makes up the colour. Black is a complete absence of light, i.e. no red, no green, and no blue. At the other end of the scale, white is maximum red, maximum green, and maximum blue.

Theoretically, we can make any colour we like by mixing the three primaries in any proportions. But we have a practical restraint. Although many modern colour monitors can display thousands or even millions of colours, earlier monitors which are still in common use today are capable of displaying only 256 colours (in fact, the oldest monitors could display only sixteen!).

If you ask a 256-colour monitor to display a colour that is outside of its "palette" (or range) of 256 colours, it can't do so smoothly and evenly. It resorts to a technique known as dithering to simulate the desired colour. It does this by lighting up adjacent pixels on the monitor screen with two or more colours from its 256-colour palette, which (theoretically) when viewed at a distance will blend to make the intended colour. Sadly, the result is often grainy or muddy, in stark contrast to the smooth, solid and clean appearance of colours within the monitor's palette.

Bearing in mind that we want as many people as possible to see and enjoy the fruits of our HTML labours, it makes sense to keep within the capabilities of 256-colour monitors when selecting colours to be used on our pages as backgrounds, text colours, and in graphics.

But there's another complication...

Of the 256 colours available on these monitors, they are not all the same on Windows and Mac systems! Windows and Mac share only 216 in common, so our available colour palette is further limited.

These 216 colours comprise what is commonly called the "browser-safe colour palette", the "Web-safe palette", or sometimes the "Netscape palette". Sometimes it's referred to as the "colour cube", because we can imagine a 6 x 6 x 6 cube (six shades of red, by six shades of green, by six shades of blue) that gives rise to the 216 colours. All possible combinations are given by these six reds, six greens and six blues:

6 x 6 x 6 = 216

Each of the three colours can be used in one of six shades or strengths, ranging from zero to maximum. These are 0%, 20%, 40%, 60%, 80% and 100%. These are translated into numbers ranging from 0 to 255 (decimal). But to use these values in HTML, we have to convert them to hexadecimal. Whereas the decimal system works to a base of 10 (i.e. counts in tens), the hexadecimal system works to a base of 16 (i.e. counts in sixteens). In this number system, the decimal numbers 0 to 15 are represented by the hexadecimal numbers 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

If that sounds confusing, don't worry about it. You don't have to understand hexadecimal numbers, or be able to do these conversions. Only a small range of numbers is used (six in total), and all you need is this table:

Why do we bother keeping track of the percentage, decimal and hex values, when we only need to know the hex values for use in HTML? That's because you might be creating graphics in a graphics program, which might require you to use percentages or decimal values when specifying colours. So you need to remember, or be able to look up, the browser-safe values.

As long as you select values for the red, green and blue components in your colour mix from those above, you will have a browser-safe colour. Colours are specified in a "triplet" format, in the RGB (red-green-blue) order. If specifying a colour in decimal values, it would typically be stated as, for example, R255 G102 B0 (that's 100% red, 40% green, and 0% blue). This example results in an orange colour; in fact it's the shade of orange used for the headings and for the colour panel on the right of this page. Specifying the same colour in hexadecimal, it is FF6600 (always keeping to the red-green-blue order). But remember as we saw in Lesson 5 that when using the hex triplet in HTML to specify background colours or text colours, we prefix the triplet with a "#" character.

For example, the <BODY> tag for a document might look like this:

The background colour would be pale blue, the text colour black, the link colour a red shade, and the visited link colour dark blue.

Roll up, roll up! For your edification and delight, you can now view the colour chart! This shows the full 216 colour palette; when you hold your mouse over any colour, most browsers will show the "tip tool" on screen, displaying both the decimal and hexadecimal RGB values for the colour. If your browser is JavaScript enabled, you will also see these values in the browser's status bar. I hope this will help you in selecting colours and getting the correct triplet values. If you want to open the colour palette directly in your browser in future (without having to open this tutorial), the name of the file to load is "palette.html".

So to recap: any colour composed of RGB components selected from the hex values of 00, 33, 66, 99, CC or FF will be a browser-safe colour. Anything else will not, and may not display well on browsers that can display only 256 colours.

#FF3399 is a browser-safe colour; #25CC66, for example, is not.

In spite of all your efforts to use browser-safe colours, the fact remains that visitors to your site are unlikely to see precisely the same colours on their monitors as you saw on yours when creating the pages. This is due to differences between monitor manufacturers, and also to the setup of users' monitors. Very few people have properly calibrated monitors! Just try looking at your web pages on a few different monitors to see what I mean.

But the colours should be fairly close -- and by using colours from the browser-safe palette, we at least make sure that they will be displayed without dithering.

Of course, if you are working in circumstances (like an intranet) where you know that all of your viewers will be using a monitor capable of displaying thousands or millions of colours, then you can pretty well use whatever colours you like!