Tip of the month from PRC
March 1999

Web Safe Colours

Updated with Mac information 5 March 1999
Published 3 March 1999 

We accept Mastercard/Eurocard/Maestro/JBC and Visa!

Tip of the month is edited by Peter Ring, PRC (Peter Ring Consultants, Denmark)
- consultants on how to write user friendly manuals 

If you have corrections, better texts or suggestions for improvements, please let me know
This tip is based on the discussion on the TECHWR-L mailing list. But the information given didn't satisfy me, and I dived further into it, mainly by means of an AltaVista search. Information about Mackintosh properties was supplied by Kees de Bondt, AlQuin Total Quality, Amstelveen, the Netherlands.


The HTML colour definition

In HTML (Internet etc. pages) each colour is defined by a code. The code consists of 3 bytes (0-255) one per colour. The first byte is for red, the second byte is for green and the third byte is for blue. The bytes are written as hex code (0..255 = 00..FF) preceded by a #. Examples: pure red is written #FF0000, orange is written #FF6600 and blue is written #0000FF. 3 bytes (24 bit) per colour gives a total of 255 x 255 x 255 = 16,777,216 different colours.

Why the web safe colour palette?

Many people still use 256 colour (16 bit) or even 16 colour (4 bit) palette on their monitor. And some programmes use its own colour palette. This means, that if you use a beautiful background from the 16 million colour palette, a lot of people may see a very different background colour. If you use coloured text, it may even be (almost) unreadable on some monitors.

To solve this problem for 256+ colour monitors, Netscape and Microsoft have agreed upon a "web safe colour palette", which will display nicely even on monitors running a 256 colour palette.

If you want all your users on the web to see your website in (approximately) the same colours, it is consequently highly advisable to use "the web safe colour palette" !

What is the web safe colour palette?

This colour palette is based on the RGB system (Red Green Blue) where each colour is displayed in steps of 20%: 0%, 20%, 40%, 60%, 80% and 100%. That makes 6 steps per colour = 6 x 6 x 6 = 216 colours. The 6 steps are in hex code 00, 33, 66, 99, CC, and FF. The remaining 44 colours are reserved for the "system" colours, which depends of your computer system and its settings.

The 216 colours web safe palette looks like this:

(If you only see 16 colours, it's because your monitor palette is set to 16 colours.)

System colour palettes

In Windows, Microsoft use a 48 system colour palette with 5 steps on the 0-255 scale: 000, 064, 128, 192 and 255 (approx. 0%, 25%, 50%, 75% and 100%). This gives 5 x 5 x 5 = 125 colours of which 48 has been selected. Eight of these colours are also defined in the "web safe colour palette": h000000 (black), h0000FF (blue), h00FF00 (Green), hFF0000 (Red), h00FFFF (yellow), hFF00FF (magenta), hFFFF00 (cyan), and  hFFFFFF (white), so there is still space for the safe colour palette.

A Mac don't have any specific "system colour palette".

What is the webdesigner's problem?

When designing webpages, the problem is, that this palette is often not identical with the palette you are presented to for selecting colours. For example, when selecting colours in Netscape Gold 3 for Windows 95, you were presented to the system colours ( see below ), -- most likely because there is a convenient standard palette GUI in Windows 95+, which the programmer can use instead of designing his/her own one. So, you are "seduced" to use non web safe colours. The Windows system colour palette is shown below (with Danish text because my Windows is in Danish). In non-Windows systems, you may have problems seeing the correct colours in 256 colour screen mode.

The standard Windows 95 palette.

Mac's work with screen colour resolutions ranging from 256 to 16 mill. colours. For HTML colour work, you are offered an "HTML" palette = the safe web colour palette (Dutch version of the Mac GUI):

The Mac HTML safe web colour palette

How can I adjust my webpages to the web safe colour palette?

You have two different problems with very different solutions: Many modern HTML editors (incl. Netscape Composer) now offer the web safe colour palette -- at least as an option.

Useful links about the web safe colour palette and computer colours in general

If you disagree with these ideas - or have other relevant points, experiences, or idea +/-, please e-mail me !

Ideas for new "Tip of the month" subjects are VERY welcome, too!

Go to last month's tip .
Go to a list of old tips .
Return to the User Friendly Manuals' homepage .

Free update service
Click here if you want to receive an e-mail whenever this website is updated with major new information, e.g. with a new "tip of the month" or a new interesting link. The e-mail will briefly describe the content of the update.