precisioninfo.com - 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.

• <FONT COLOR="RED">RED</FONT> - Renders text in RED color
• <FONT COLOR="GREEN">GREEN</FONT> - Renders text in GREEN color
• <FONT COLOR="BLUE">BLUE</FONT> - Renders text in BLUE color
• <FONT COLOR="MAROON">MAROON</FONT> - Renders text in MAROON color

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.

• Setting color="000000" turns all the colors off and results in black (nothing = black)
• Setting color="FF0000" turns red fully on and blue and green off
• Setting color="00FF00" turns red off, green fully on and blue off
• Setting color="0000FF" turns red off, green off and blue fully on
• Setting color="FFFFFF" turns all the colors on and results in white (full spectrum = white)

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

• There are 16 * 16 = 256 possible shades of red
• There are 16 * 16 = 256 possible shades of green
• There are 16 * 16 = 256 possible shades of blue

Consequently, in HTML it is possible to generate 256³ = 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.

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.

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:

• color="red" or color="#ff0000"

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

<TABLE BORDER="1" CELLPADDING="5">

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

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

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

</TABLE>

Caution

• To make the 6 row table shown in the image you need to add 3 extra rows and a number of additonal cells
• If your HTML page calls a style sheet then the colours in the table may not work properly