|
John Cletheroe's
PC and Internet Hints |
Text and backgrounds of web pages can be given colours.
One of the simplest ways of specifying the colour of a section of text on a web page is to use the COLOR = "rrggbb" clause in a <FONT> tag, in the format <FONT COLOR = "#rrggbb">. Text to be given a colour should be enclosed by a <FONT COLOR = "#rrggbb"> and a </FONT> tag, for example:
One of the simplest ways of specifying the colour of the background of a web page is to use the BGCOLOR = "#rrggbb" clause in the <BODY> tag near the start of the page, in the form <BODY BGCOLOR = "#rrggbb">, for example:
The <BODY> tag can take other clauses and there are other methods of achieving the same result.
In the above commands "#rrggbb" means a six digit hexadecimal (base sixteen) number. The first two digits (rr) control the red component of the resulting colour, the middle two (gg) the green component and the last two (bb) the blue component.
Each digit of the hexadecimal number can take a value of 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D or E. A is ten, B is eleven, C is twelve, D is thirteen, E is fourteen and F is fifteen. The value of the two digit pair is calculated by taking the first digit, multiplying it by sixteen and then adding the second digit. For example, 36 is 3 * 16 + 6 = 54 and FF is 15 * 16 + 15 = 255. There are therefore 256 possible values for each colour (0 to 255).
Thus "#000000" is black (all three colours completely off), "#FF0000" is pure red (red full on, green and blue both completely off). "#00FF00" is pure green and "#0000FF" is pure blue.
The red, green and blue components combine in an additive way as when mixing light and not in a subtractive way as when mixing paint. For example "#FFFF00" is yellow (red plus green), "#FF6600" is purple (red plus blue), "#00FFFF" is cyan (green plus blue) and "#FFFFFF" is bright white (all three colours full on).
Any combination of values for rr, gg and bb can be specified. Therefore the number of possible colours is 256 * 256 * 256 = 16777216.
However, some computers, especially older models, can only physically display a small number of colours. All other colours have to be displayed by means of dithering. With dithering, colours are simulated by displaying sets of two or more dots with different colours adjacent to each other. For example yellow could be simulated by a pattern of red and green dots (although it is normally the more subtle colours which need to be dithered). Dithering usually leads to a crosshatch pattern appearing on the screen. Using colours which dither for backgrounds or text colours on web pages can make the resulting pages very difficult to read on some computers. Similarly displaying drawings and photographs on such a computer leads to dithering and gives very poor results.
If you are currently suffering from the effects of dithering on your own computer then it is well worth investigating whether it is possible to reconfigure your computer so as to display more colours. On a Windows PC this depends on the typed of video board and the amount of memory available to it and I imagine that there are similar concerns on Apple Macintosh computers.
When creating web pages it is best to assume that at least some of the visitors to your site will have a computer on which dithering can take place. Therefore it is wise to restrict yourself to non-dithering colours for your text and backgrounds.
It has been discovered that observing the following rule will always produce non-dithering colours in the Microsoft Internet Explorer and Netscape Navigator web browsers on all models and with all configurations of both Windows PC's and Apple Macintosh computers, provided that they can display colour at all of course:
00, 33, 66, 99, CC or FF
Finally, when choosing colours for backgrounds and text on web pages remember to choose two colours which differ significantly in brightness levels. This will ensure that your text can be read easily. Blue text on a black background is a particularly poor choice of colours.
This web site has been designed in accordance with the recommendations on this page.
Most recently modified 25-Mar-01