Colours on the Web

Like fonts, the use of colour is another area where a designer cannot be 100% sure that their pages will display exactly as intended. Although, largely obsoleted by advances in desktop graphics technology, the idea of a web safe colour was invented to help with this problem.

Additive coloursThe General Colour Model

Like televisions, colours are specified in computers using RGB values which describe the relative amounts of red, green and blue to be rendered on the display. Any colour can be made from a blend of these three components.

Each of the three components can take a value from 0 (meaning no amount of that colour) to 255 (meaning the maximum amount of that colour. These numbers are usually written using 6 digit hexadecimal number codes where 0 is written as #00 and 255 is written as #FF. The table below shows five simple colour definitions:

Colour
Numeric Code
Name
 
#000000
Black
 
#FFFFFF
White
 
#FF0000
Red
 
#00FF00
Lime
 
#0000FF
Blue

Thus, Black has 0 values for each of red, green and blue, which makes sense as black (in terms of light) is the absence of all colours. In contrast, White has the maximum value of 255 for each of red, green and blue because white light is composed of all colours. If you look at the table below, you will see that there are two named shades of gray between Black and White, which each have distinct, but uniform values for red, green and blue. Finally, each of the colours Red, (the confusingly named) Lime, and Blue, are composed simply of the maximum value for each of the red, green and blue components respectively, and zero for the other components.

This colour model allows for a total of 255 x 255 x 255 = 16 777 216 possible colours. Given that each of the red, green and blue components is specified by 8 bits, this rage of colours is also sometimes called 24-bit colour.

HTML Colour Names

Of this huge possible range, the HTML 4.01 specification identifies 16 colours and gives them specific names. In addition, CSS 2.1 adds a named colour Orange, to arrive at the following table.

Colour
Numeric Code
Name
 
#000000
Black
 
#808080
Gray
 
#C0C0C0
Silver
 
#FFFFFF
White
 
#FF0000
Red
 
#800000
Maroon
 
#FFA500
Orange
 
#FFFF00
Yellow
 
#808000
Olive
 
#00FF00
Lime
 
#008000
Green
 
#00FFFF
Aqua
 
#008080
Teal
 
#0000FF
Blue
 
#000080
Navy
 
#FF00FF
Fuchia
 
#800080
Purple

Look at the numeric codes for these colours. Except for Orange, there is a clear pattern to the choices made for these named colours. For example, Red and Maroon form a pair, with Red having the maximum intensity for the red portion and Maroon having a less intense setting for the red portion.

Web Safe Colours

In the dim and distant past many computer displays could only display 256 different colours. Additional colours had to be approximated by the process of dithering. To try and ensure that web designers only used colours that could be rendered without having to apply dithering, a set of 216 web safe colours was devised. Although it did not guarantee perfect rendering, these colours matched the colours available in the palettes of the browsers common at the time.

Colour PaletteThe Dreamweaver colour selection palette (shown on the left), which pops up in a number of contexts when you ask for a colour selection, displays the full range of 216 web safe colours in its swatch. Therefore, if you select from the main range of colours presented, you will always have a web safe colour. Note also, the 15 colours listed on the left hand side of the pop up, which include black, white, four shades of gray and the six principle colours.

With modern computers typically having 24-bit colour displays the need to restrict designs to web safe colours has now largely disappeared. Therefore, the pop up also allows you to select from the full 24-bit RGB colour range by clicking on the colour wheel icon in the top right corner of the dialog. This will get you to the standard colour picker as shown below.

Full COlour DialogFinally, note that it is also possible to type a 6 digit hexadecimal code directly into many of the colour selection boxes, also giving access to the full 24-bit pallete. Finally, if you want to change the content of the small pallete, then click on the menu button in the top right corner of the popup.

Colour and Accessibility

It is important when designing with colour to remember that there are various forms of colour blindness and that that some people with visual impairment see with reduced contrast. Therefore, avoid dark backgrounds if your link colour has been left at the default blue, and make sure that there is sufficient contrast in your design. Some sites offer a high-contrast version of their content, and this can be done easily using style sheets.

Further Information

Wikipedia has a good page describing how web safe colours were originally defined:

There are a couple of great colour picking tools here:

And if you want a detailed analysis of colour perception, including the physics and physiology of colour perception, along with a controversial evaluation of traditional colour wheels, then look here: