Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Using colour

You can specify colours in two ways: use a colour name or use the red-green-blue colour value. A red-green-blue colour value consists of three two-digit hexadecimal numbers. Each number specifies the intensity of the corresponding colour. For example, #FF0000 is red because the red number is set to its highest value (FF or 255 in the decimal system) and green and blue are set to zero. Similarly, #00FF00 is green and #0000FF is blue. The hash sign (#) is optional.

Here are the 16 VGA colour names and values:

This set is limited but the colours display properly even on a PC which can display only 16 or 256 colours.

There are also 216 browser-safe colours that look the same no matter which browser you see them on. These safe colours are made out of pairs of 00, 33, 66, 99, CC and FF. Netscape browsers have their own colour system and this is what causes the trouble.

If you want to use more variety, you can use the X11 colours. I don’t know what X11 colours are, but for a list, see Colour List.

You can set colours on your page by using the colour attributes of the <body>, <font>, <hr>, <marquee>, and <table> tags.

For example, you can set background colour for your page by using the bgcolor attribute with the <body> tag as in the following example:

<body bgcolor="white">

Always check that the page is easy to read. Some colour combinations are hard to read (yellow on white is a bit naff).

You can also set the colour of text (the default is black), the colour of links, visited links and active links using attributes of the <body> tag.

<body text="blue" link="blue" vlink="purple" alink="red">

And using the <font> tag…

<font color="red">Here is some red text</font>

You can use colour for tables, cells in a table and the border colour of a table.

Always choose colours carefully, and try to test your colour choices on a variety of computers.