Colour in HTML

Contents

• Introduction
• Hex values colour-table
• Netscape colour names colour-table

Back to contents || Back to top

Introduction

For technical reasons, the primary colours for computer screens are not red, yellow and blue but red, green and blue. colours are defined by the mixture of these three, that is, their Red-Green-Blue (RGB) values.

To complicate things just a little more, the values are written in base sixteen, or hexadecimal. Why? Well, it is a computer programmer habit because base sixteen is much more convenient than decimal for representing the binary numbers used by computers. Each hexadecimal digit represents a neat four bits (2⁴ = 16), which is half a byte. The digits in base sixteen are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,.A, B, C, D, E and F. ("A" is ten, "B" is eleven, etc.) In this system, any number from 0 to 255 is written by two hexadecimal digits. "00" = 0, of course, while "FF" = 255.
"F3" = (F x 16) + 3 = (15 x 16) + 3 = 243.

Note: the characters A - F are not case sensitive for this purpose: i.e. you can write either "FF" or "ff" (or "Ff") without altering the meaning.

Colours can be written, for purposes of HTML and style sheets, by six hexadecimal digits. The first two represent red, the second two green, and the last two blue. The six digits are preceded by a "#" to indicate a hexadecimal colour value.

(Don't forget the # !)

Thus, consider #FF0000. The red value is FF, 255, the maximum. The green and blue values are both zero. Thus, this produces bright red.

In the above example, a TABLE has been used, with only one call. The background colour of the cell has been defined by the BGCOLOR attribute. The code is
<TD BGCOLOR="#FF0000">text in cell</TD>

#FFFFFF is white (all colours equally at maximum), and #000000 is black (all colours zero). If we made the "FF" in the last example a little lower, say CC, we would get a darker red:

If we combine red and blue, with no green, we will get purple:

Obviously, there are a very large number of possible colours which can be defined in this system: 2²⁴ = 16,777,216. However, not all computers are capable of actually producing all these. This is less of a problem than it was in the early days of the web. To avoid problems, you can use so-called "browser-safe" colours. The colours in which the values for each colour are limited to 00, 33, 66, 99, CC, or FF are generally safe. Also, there are a number of other standard colours defined.

As an alternative to using hexadecimal values, you can use a list of pre-defined names such as "yellow". Thus:
<TD BGCOLOR="yellow">text in cell</TD>
Notice that there is no "#" as this is not a hex value.

To get an idea of how the combination of red, green and blue works, consider the table below. This shows the possible combinations of the basic values (00, 33, 66, 99, CC, & FF) for red and for green. Going across the table, the green values go up from zero to maximum; going down the table, the red values go from zero to maximum. (The blue values are all zero.)

Below you will find two tables of colours. In each cell the colour value or name is written both in black and in white to ensure legibility. The tables show:

1. Basic hex values: The colours using only the values 00, 33, 66, 99, CC, and FF for each of red, green and blue
2. Netscape colour names: The 140 colour names originally defined by Netscape when they introduced them as an "extended" (non-standard) feature.

The names appear to originate in paint-manufacturing usage. Recent versions of both Netscape and Internet Explorer recognize all these names, but earlier Internet Explorer versions only recognized sixteen of them. (Act9a still had this limitation, but Act10 recognizes them all.) We recommend using hex values, because they give you complete control and the assurance that the colour will be recognized.

Using colours:

Colours can be used either for background or for text colour. For background colour, you can set the background of some elements (notably BODY, i.e. the entire document) and TD (table cell) using the BGCOLOR attribute. E.g.
<BODY BGCOLOR="#FFFF00">
For text, the color can be set using the FONT element with a COLOR attribute, e.g.
<FONT COLOR="#FF0000"> Text to appear in colour #FF0000 </FONT>
The general consensus now is that these methods should be phased out in favour of style sheets. The BGCOLOR and COLOR attributes are technically "deprecated" and may become obsolete in future versions of HTML, although browsers should still be able to deal with them. In fact, the entire FONT element is deprecated. Unfortunately, a lot of browsers still cannot render style sheet formatting correctly. Even Netscape 4 has problems. Consequently we recommend that, for the present, you should continue to use BGCOLOR and FONT COLOR for all essential colour formatting.

Back to contents || Back to top

Hex values colour table

Back to contents || Back to top

Netcape colour names

In the following table, the cells on the left side have their background colour (BGCOLOR) defined by the colour name, e.g. <TD BGCOLOR="aliceblue">, whereas the cells on the right side have the same colours defined by RGB hex values (e.g. <TD BGCOLOR="#F0F8FF">. If you do not see the same colours in left and right, then your browser does not recognize the colour name.

(That is: in the right-hand column the browser is being given the colour in RGB, such as #F0F8FF, and should display it if it can display colours at all. But in the left column the browser is being given a name, such as "aliceblue". If it knows that "aliceblue" means #F0F8FF then it will dipslay that colour. But if it does not recognize "aliceblue", then it will ignore the colour instruction and display the cell in the same colour as the background used for the rest of the page. Thus if the colours are different, then your browser does not recognize the colour name; whereas if it does show the same colour in both, then it does recognize the name.)

Back to contents || Back to top

Copyright © 2000 University of Botswana History Department
Last updated 26 February 2008