Kaye and Geoff's web page documentation 

Introduction

Colour is one of the basic design resources for web pages. By default links in the text are deliniated by their colour in most browsers, but there are many other parts of the page which can be coloured. For example you can set the background to a single colour (or use a picture), or alter the colour of the text, horizontal rules or individual table cells.

There are lots of ways to describe colours, but HTML does it by establishing three primary colours: red, green and blue, which can be combined additively to create millions of different colours. Based on the names of the primary colours this is referred to as the RGB system. Additive colours behave like transmitted light - when all three colours are mixed in equal amounts the result is white, absence of any colour is black. Ink-based systems, such as those used in printers, work in the reverse way - to get white they assume white paper and deposit no ink, while they can produce black by depositing equal amounts of all the primary colours (although for technical reasons most in fact have a separate black ink supply, and they usually use a complimentary set of primaries - magenta, cyan and yellow rather than red, green and blue).

So to define a colour in HTML, we need to specify separately the amounts of red, green and blue which make it up. The range of values allocated for each primary colour is from 0 (none) to 255 (the maximum amount). Why 255? Because it is the largest integer which can be stored in a byte, the basic unit of computer memory. One easy (well, easy if you have 16 fingers) way to specify numbers in this range is to use a pair of hexadecimal (ie. base 16) digits. Hexadecimal digits range from 0-9 then A-F (16 digits in all). So to count in decimal we go...

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 . . . . 255

while the equivalent series in hexadecimal is...

0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 21 . . . . FF

Therefore, with a pair of hexadecimal digits for each primary colour, and three primary colours, and remembering that the system is additive, the full range of available colours which we can specify in HTML is from 000000 (black) to FFFFFF (white). FF0000 is pure red, 00FF00 is pure green and 0000FF is pure blue. A middle grey is 777777. If you are getting the idea then you should be able to work out that FF00FF is pure magenta (purple), 00FFFF is pure cyan, and maybe less obvious, FFFF00 is yellow.

Is this all too difficult? Whether it is or not, you might find our RGB-HEX colour converter to be a useful tool.

Altering default background and text and link colours

Using the information above, the colour of the background and the links can be set using attributes of the <body> tag:

<body bgcolor="#fff8e0" text="#000066" link="#0000ff" vlink="#112233" alink="#aabbcc">

The attributes are:

bgcolor Background colour - sets a single colour for the background of the page. For example, this page is white. (Non-north americans should note the spelling of "bgcolor")
text Sets the colour for all plain text on the page
link Sets the colour for all (unused) links - this defaults to bright blue in most browsers
vlink Sets the colour for links which have already been visited - this defaults to a pinkish-purple in most browsers
alink Sets the colour for active links - just as you press on the link it will change to this colour

Unless you have a special reason, you should think twice before altering the default values for links. Most browsers use similar colours, so they are widely recognised and accepted. In addition, browsers provide the option of setting these parameters, so it is generally better to leave any changes to individual viewers. Also, be careful about using text colours which are difficult to read because of a lack of contrast between the text and the background. Finally, be kind to colour-blind people by avoiding red/green combinations.

Defining a background picture

The background can be set to be a picure using the 'background' attribute of the <body> tag:

<body bgcolor="#ffffcc" background="backgrpic.gif">

If the picture is smaller than the window displayed by the browser then the picture is tiled, that is repeated in both directions as many times as required to fill the window. Note that in the example above there is also a 'bgcolor' attribute - this is included to set a plain colour if the picture cannot be found or the user has turned off pictures in their browser.

CSS provides ways to exert much more control over how background pictures are placed and how they behave, and this part of the CSS specification seems to be well supported by most browsers.

Altering the colour of individual text

Within the text of your document you can select parts of the text to be in colours other than the default set by the browser or by the <body> tag. This is done using the <font> statement. (Non-north americans should note the spelling of "color")

<font color="#fff8e0">...text...</font>

Modern HTML suggests that the font tag should not be used; this functionality has supposedly been overtaken by the use of style sheets. We have tested the results of HTML written with style sheets on different browsers, and our conclusion is that they are not handled uniformly enough to use them with confidence. Maybe in a few years time when older browsers have disappeared and newer ones agree to stick meticulously to the standards.....?

Colour in table cells

The <td> tag inside a table definition can also have a bgcolor attribute, so that each cell of a table can be given an individual background colour, for example:

<table> <tr> <td bgcolor="#ff0000"> &nbsp; </td> <td bgcolor="#00ff00"> &nbsp; </td> <td bgcolor="#0000ff"> &nbsp; </td> </tr> </table>

Some browsers will also allow a background attribute to be used in a <td> tag to display a background picture in the cell, but not all browsers support this feature. So if you just need to display a picture in a cell, use a regular image tag.

Top
Previous
Next
Index
Home