Colour as a Variable

In order to explain the problems associated with colour display, we need to re-cap on how computers handle colours. As you are probably aware, computers store colours in a format known as RGB or Red, Green, Blue. This means that all colours are represented as a combination of the three base colours. Modern video graphics adaptors store colours with 24-bit precision ~ 1 byte or 8 bits for each colour channel (red, green and blue) which defines a palette of 16.7 million different colours.

Each byte can store a value in the range 0-255 (or 00-FF hex). The higher the value the more the channel is "on", and the brighter the colour. For example, Red: 255 Green: 255 Blue: 255 (or FFFFFF hex) produces white ~ the brightest colour. At the other end of the scale Red: 0 Green: 0 Blue: 0 (or 000000 hex) produces black ~ the darkest colour. It follows that the colour 127,127,127 (or 7F7F7F hex) should be half as bright as 255,255,255. Ideally a colour half as bright digitally should look half as bright on your monitor.

Browser safe colours

Many older colour systems can only display up to 256 colours (8-bit) at a time. The effect of this is often visible as a "speckling" of colors as the browser tries to approximate the true color at any point in an image. This problem will gradually disappear as older computers systems are replaced by later models. In the meantime, in order to

accommodate this, most browsers use colours from a fixed "browser safe" palette.
This palette(click here for an example of the browser safe palette) is based on the 8-bit colour palette of 256 colours. However, the palette consists of only 216 colours in order to accommodate the differences between Windows and the Macintosh operating systems, both of which reserve some colours, but unfortunately not the same ones. UNIX uses an entirely different group again.

The browser safe palette consists of 6 evenly spaced gradations in red, green and blue and all their combinations. If a browser is confronted with a colour outside this palette, it will adopt the nearest colour from within the palette. For example, if you set the page background to a colour which isn't in the browser safe palette, you run the risk that the background will have different colors depending on whether the computer is using indexed or true-color. This problem is easily solved, simply stick with colours from the browser safe palette wherever possible.

Monitor or screen settings:

However, not so easily addressed is the way in which your selected colours will be displayed on the monitor or screen. To a large extent this will be determined by the screen settings. The Web page designer has no control over the settings adopted by individual users.

Have a close look at the colour ranges in Figure 4. These represent even steps of 10% in the red, green, blue and grey colour channels from the 24-bit colour palette. The mid range grey (6 from the left in row 4) represents the colour 127,127,127 (or 7F7F7F hex) as discussed above. If your screen or monitor is adjusted correctly, the difference between the steps should be distinct and even.

Figure 4 ~ 10% Colour Steps of Red, Green, Blue and Grey.

If the black boxes at the end of each scale do not all appear as a true black, then the brightness on your monitor is set too high. If the white boxes at the other end of the scale are not all true white, then the brightness is set too low. If neither appears correctly, then your contrast is set too low.

Where brightness and contrast determine the colour display at the upper and lower ends of the scale, the gamma setting will determine the brightness across the middle of the range. The 50% grey (6 from the left in row 4) should be visually half way between the white and black and there should be even steps of tone going to white on one side and to black on the other. If not, then your gamma setting probably needs adjusting.

For computer screens "gamma" refers to the degree of contrast between the mid-level grey values of an image. The default gamma settings for PC and Macintosh monitors are different. The PC has been designed for non colour critical office work, and as such does not display an even spread of tone across the range ~ the dark colours tend to run together. The Macintosh has built in gamma correction, but this tends to err in the other direction. Colours that look good on a PC will appear pale or washed out on a Macintosh and colours that appear correctly on a Macintosh may be too dark on a PC.

The default gamma setting on a Macintosh is 1.8 compared to about 2.5 for a PC. The W3C has recommended a Web standard gamma setting of 2.2, which is the same as the default for free to air television. If you are creating or modifying images for a Web site, then it is important to set the gamma to the recommended standard. In other words, the image should look correct at the intermediate setting of 2.2 if you want the best possible result across the likely range of client settings.

Gamma correction is non-linear in nature, and is applied to the Red, Green and Blue components of a colour separately. This not only affects tone, but also colour. Across the gamut of possible RGB values, the relative intensity of each colour will differ as the gamma changes. As a result, the colour that you see on your monitor may look quite different on another screen with a different gamma setting.

The Web page developer does not have any control over the monitor settings people use and there is no remote method for detecting and correcting them. If you want the best possible tone and colour fidelity across all computer platforms, you have to compromise by working with a 2.2 gamma setting for each of the 3 colour components.

Summary

There are similarities between the design principles of desk top publishing and Web pages. However, there are also some important differences, which are due mainly to the publication medium. The computer screen or browser viewport is a variable medium in terms of size and display characteristics. The designer has little or no control over these variables. As a consequence, an effective Web page design will be a compromise in order to best accommodate the variable nature of the medium.