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.
The 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.
| Red: | |||
| Green: | |||
| Blue: | |||
| #000000 | |||
The web app on the left allows you to mix colours dynamically by specifying different amounts of red, green and blue components.
Once you have a colour that you like, you could feed it into one of the colour scheme design tools linked to below, and use it as the basis for your site's 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.
The 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.
Finally, 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:
- Paletton - this has a great colour scheme designer including colour blindness analysis.
- Colors on the Web - has a number of tools, including a contrast analyser.
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:
