Home : Lessons : Graphic design 2 : Web colours
Introduction
Colour schemes
Colour readability
Web colours
Consistency
Layout sketching
Images
Summary
References
< Previous: Colour readability

Web colours

Colours on the Web are not specified in terms of hue, saturation, and brightness, but in terms of red, green, and blue. They are also given in a hexadecimal numbering system.

Some Web sites will help you work out colour codes, or you can obtain them yourself. To initially choose colours, it's best to work within a graphics program so that you can use the more logical HSB selection.

RGB

Colours on the Web are usually specified as mixtures of red, green, and blue. This is the way colours are actually created on computer displays, but it isn't a very convenient way to think about colour or to develop colour schemes: hue, saturation, and brightness (with the colour wheel concept) are more natural for that purpose.

RGB values range from 0 to 255, with 255 meaning "full brightness" and 0 meaning "none". For example, if red, green, and blue values are all zero, the resulting colour is black. 255,255, and 255 produces full brightness of all three colours, which then mix to give white. 255,0,0 would be bright red; 128,0,0 would be red at approximately half the brightness.

Choosing colours

You can choose colours using HSB selection (or picking by eye) in a graphics program. Most graphics programs will then be able to show you the RGB values (often using an eyedropper tool).

Hexadecimal colour codes

On the Web, colours are specified as hexadecimal numbers (base 16, in the same way that decimal numbers are base 10).

Specifying a text colour within a stylesheet looks something like this:

color: #rrggbb;

where rr, gg, and bb are two-digit hex numbers controlling the amount of red, green, and blue.

You can work out a hex number from a decimal number using the following method:

There are utilities available on web pages that can do this conversion automatically.

Web-safe colours

Some older computers can only display 256 colours on screen at a time. Of these, 216 are used for web display (in Netscape Navigator). Any colours that are not in this 216 will be replaced by the nearest equivalent.

"Safe" colours that remain the same even on 256-colour displays are those with hex colour values of 33,66,99,cc, or ff for all three digits.

It is no longer really necessary to stick to these colours (relatively few people are stuck with that kind of display now), but you should try to test your pages using Netscape in 256-colour graphics mode just to make sure that none of the colour shifts are critical.