Using colour to convey information.
Using colour for sensory appeal.
Back to the main Colour page.
The front gate.
With the different types of machines out there on the web (UNIX, Mac, PC, etc), each of which has its own way of displaying colours, and with the different types of monitors, from monochrome to hi-colour, it is unlikely that you can get subtle shades to be the same on someone else's computer as they are on yours.
A convention which has arisen in the web world is the concept of web-safe colours. While these do not guarantee that the colours will look the same on two different machines, they do provide a standard set of 216 colours which have a good chance of providing similar effects on different machines. That is, you can be reasonably sure that what looks good on your monitor will look reasonably good on other monitors.
The basic idea behind the web-safe colours is to allow each of the three components (Red, Green, and Blue) to take on one of 6 values, spread evenly across the available values. Since the values can be anything from 0 to 255, the 6 values chosen are 0, 51, 102, 153, 204, and 255. In hex, these are 00, 33, 66, 99, CC, and FF, which are also easier to remember.
Some browsers use as few as 16 colours, so even these 216 colours may not produce the effect you want. The 16 colour set uses 2 values (on and off) for each colour, and has an additional high-intensity bit. To ensure that colours work in this set, you must ensure that any colours which are not 'off' (00) are of equal intensity.
The OS/2 Web Explorer seems to interpret values less than one third as
'off', and values less than two thirds as 'low intensity'. If I pick 00 as
my value for off, CC as my value for high intensity, and 66 as my value for
low intensity, the 16 colours become:
000000 - Black
660000 - Dark red
006600 - Dark green
000066 - Dark blue
660066 - Dark magenta (purple)
666600 - Dark yellow (brown)
006666 - Dark cyan (bluegreen)
666666 - Dark grey
CC0000 - Bright red
00CC00 - Bright green
0000CC - Bright blue
CCCC00 - Bright yellow
CC00CC - Bright magenta
00CCCC - Bright cyan
CCCCCC - Light grey
FFFFFF - White (special case)
Those are the safest colours to use, but not necessarily the best values to use for those colours. With a browser that displays more colours, varying the values may produce better results. For example, CCCC00 produces a bright yellow with a 16-colour browser, but a duller yellow with, say, Netscape. Using FFFF00 produces a bright yellow with either browser.
You can design with these 16 colours, and then tweak them to work for a browser with more colours. As a web-safe way of tweaking, you can replace any 00 with 33, any 66 with 99, and any CC with FF. That will still leave you in web-safe colours, and shouldn't change the way your colours display on a 16-colour browser.
To get a bright yellow background, with blue text, and bright red links,
which turn green once visited, you might use the line:
<BODY BGCOLOR="#FFFF00" TEXT="#3333CC" LINK="#FF0000" VLINK="#999966">
The page you are reading right now uses:
<BODY BACKGROUND="" TEXT="#33CC66" BGCOLOR="#003300" LINK="#33FF99"
VLINK="#666633" ALINK="#99FFCC">
With those values, I see a green background with my Netscape browser, but a black background if I use the Web Explorer.
Using colour to convey information.
Using colour for sensory appeal.
Back to the main Colour page.
The front gate.