- Dr Bryan Hall - 2003

HTML 3: HTML Color Model

Named Colors

In HTML some colors (many hundreds) have been given specific names. These colors can be rendered by explicitly stating their names.

At a more fundamental level color is processed in terms of red, green and blue components.

Hexadecimal Colors

In HTML color values are stated in pairs of Hexadecimal (base 16) digits. A value of 00 turns a color component off completely while a value of FF turns it on fully.

HTML table demonstrating 5 basic colors


Maximum Number of Distinct Colors

Specifying a two digit Hexadecimal value for each component renders a mixed color; by varying the intensity of each component colour.

Since color values are specified using hexadecimal values (base 16) there are 16 possible values (instead of the usual 10) for each digit place:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, A, B, C, D, E, F

Consequently, in HTML it is possible to generate 2563 = 16,777,216 distinct shades of colour.

Full Spectrum - White Light

Some readers will know that white light can be split up into the full color spectrum by passing it through a triangular prism. All readers will have seen a rainbow in which a full spectrum white light is broken into its components colors.

Full Spectrum White Light Being Broken into Components
Prism showing full spectrum white light broken into its components colors

Task Color Table

Make a copy of a blank HTML page and rename it colors.htm. Put in a level 1 heading and title:

TITLE and H1 HTML and Colors

Make an HTML table specifying the color values for each of the basic named set of 16 colors.

HTML table demonstrating 16 colors

Note carefully in the above lime is actually pure green. The color stated as green is not sending full green to the screen.

In addition to the named colors in this table there are many hundreds of other named colors, each of which corresponds to a specific hex value. One such named color is color="steelblue" the Hex value for steel blue is 4682B4. For a named color we may specify the value as either a hex value or use the colors name. For example for red we could say:

Some of the code used to generate the above table was:


<TD HEIGHT="30" WIDTH="30">Black</TD>
<TD HEIGHT="30" WIDTH="30">Navy</TD>

<TD HEIGHT="30" WIDTH="30">#000000</TD>
<TD HEIGHT="30" WIDTH="30">#000080</TD>

<TD HEIGHT="30" WIDTH="30" BGCOLOR="#000000"></TD>
<TD HEIGHT="30" WIDTH="30" BGCOLOR="#000080"></TD>