WesternWashington.Com Gateway to the Pacific Northwest
Send Email To WesternWashington.com
menu 1
menu 2
menu 3
menu 4
Home > Developer Tips


 


This week in Web Developer Tips.
Color Tables by Guest Author, Gernot Metze

Color Tables

This document uses TABLE tags. Tested with Microsoft Explorer version 3.0 and 4.7
and Netscape Navigator version 3.0 Gold.
Last Revision: February 7, 1998

Index

RGB, Palettes, and Dithering

In the Windows standard color dialog, used e.g. in the Display Properties/Appearance setup or the Windows Paint program, a color may be specified as either a Red / Green / Blue (RGB) color value triplet, or as a Hue / Saturation / Luminance triplet.   Graphic arts designers seem to prefer the Hue / Saturation / Luminance approach;  most Windows applications use the RGB method.

The value of each of the R, G, B components of the RGB triplet ranges from 0 (no contribution) to 255 (full intensity), thus a total of 256x256x256 = 16.7+ million different colors can be specified with an RGB triplet.  E.g., 0 / 0 / 0 = black, 255 / 255 / 255 = white, 255 / 0 / 0 = red, 255 / 0 / 255 = magenta, 128 / 0 / 128 = purple (dark magenta), 166 / 202 / 240 = powder blue;  triplets with the same values for the three components represent shades of gray, etc.   24-bit ("true-color") display systems can display all 16.7+ million colors;  16-bit ("hi-color") display systems can display 65536 colors. With 8-bit display systems, which can display only 256 colors, Windows keeps track of which 256-color subset, or palette, out of all possible colors is to be displayed;  colors not in the palette are rendered by dithering, i.e., by mixing dots of two palette colors chosen so that the eye blends them (not always successfully) into the desired color.  Most programs use Windows' default palette;  some graphics programs may, however, change the palette to one better suited for its purposes, possibly producing a noticeable "color flash" during the change.

Browsers use a 256-color palette, to be compatible with the many 8-bit displays still in use, with colors specified by their RGB code.  In browsers the RGB code is given as a triplet of hexadecimal digit pairs rrggbb, where rr, gg, and bb denote the red, green, and blue components of the color, each component ranging from 00 to FF in hexadecimal (corresponding to 0 to 255 in decimal).  Windows has reserved 20 of the 256 colors for title bars, menu bars, etc. so that their colors stay the same for different applications;  these colors are usually not changed by the application.   16 of the colors consist of full-intensity (light) and half-intensity (dark) versions of the primary colors and their combinations, plus white, black, and two shades of gray, reminiscent of the 16 colors hard-wired into CGA displays:

silver
 C0C0C0 
gray
808080
maroon
800000
green
008000
navy
000080
purple
800080
olive
808000
teal
008080
white
FFFFFF
black
000000
red
FF0000
lime
00FF00
blue
0000FF
magenta
FF00FF
yellow
FFFF00
cyan
00FFFF

These colors may be specified by their hexadecimal RGB codes, or by the names shown (note that "green" denotes the half-intensity green;  the full-intensity green is called "lime";  note also that your browser may accept alternate names, such as "aqua" for cyan, or "fuchsia" for magenta).  Also reserved are the following default colors: a medium gray - A0A0A4 (not a "true" gray ...), an eggshell white - FFFBF0, an army olive - C0DCC0, and a powder blue - A6CAF0. 

 
A0A0A4
 
FFFBF0
 
C0DCC0
 
A6CAF0

The last three colors are used for Windows' ButtonFace, ButtonShadow, and ButtonHilight colors and may be changed in the Display Properties/Appearances section of the Control Panel.  (If they are changed, they become part of the palette and will therefore be displayed un-dithered even in a 256-color display.)

If compatibility between the 256-color palettes of major browsers is desired, the palette should consist of colors having RGB codes with the R, G, and B component values restricted to the six hexadecimal values 00, 33, 66, 99, CC, or FF, yielding 6x6x6 = 216 colors, usually called the color cube, in addition to the reserved Windows colors (eight of which also appear as color cube colors).  The remaining colors in the 256-color palette may differ between browsers and should not be used if potential dithering is to be avoided.  The color cube is not ideal;  it is certainly systematic, but it has too many dark colors which the eye has difficulty distinguishing (especially if they differ only in the B value), and too few grays and pastels.

As implied earlier, if all viewers of your HTML pages are known to use 24-bit, "true-color" or 16-bit, "hi-color" display systems, then neither palettes nor dithering is of concern.

How To Specify Colors

Global default color settings for various browser features are typically found in the Appearance/Preference or Options section of a browser, where they can be changed by the user.  This document is concerned with overriding these global default settings locally within a document.

The global default colors set in the browser may be overridden locally for the following features of a document (in each case, color is either one of the named colors shown in the table above, or the hexadecimal RGB code, entered in the form "#rrggbb" where the quotes are required):

  • Background of pages or frames:  Use the attribute BGCOLOR=color of the BODY tag to set the background color of the page or frame.
  • Background of tables and table cells:  Use the attribute BGCOLOR=color of the TABLE, TR, TH, or TD table tags to set the background color of the entire table, table rows, or table cells (unless overridden, cells inherit from rows, rows from the table specifications).
  • Text:  Use the attribute TEXT=color of the BODY tag to specify text color for the entire document;  to override this specification selectively use the attribute COLOR=color of the FONT tag.
  • Links:  Use the following attributes of the BODY tag:
    • LINK=color to set the color of unvisited links,
    • VLINK=color to set the color of visited links, and
    • ALINK=color to set the color of active links (visible only when the link is first selected).
For example, in this document the background is set to white, text to black, unvisited links to blue, and visited links to purple with
<BODY BGCOLOR=white TEXT=black LINK=blue VLINK=purple>.

Off-white backgrounds may be preferred to a pure white background;  some possibilities are:

 
FFF9F9
 
FFF6ED
 
FFF9DE
 
F9F9FF
 
F6F6F6
 
F6F6F0
 
F9F0E7
 
F9F9F9
 
FFFBF0
As indicated in the Introduction, these colors do not correspond to colors in the color cube and may therefore cause dithering in a 256-color display (except FFFBF0 when it is a reserved Windows color).

The color of selected parts of text may also be changed. E.g., Red-Green-Blue is produced with

<FONT COLOR=red>Red</FONT>-< FONT COLOR="#00CC00">Green</FONT>-< FONT COLOR=blue>Blue</FONT>.
In this example, an RGB code was used for the color of the word Green to display a color that is "between" the named colors green and lime.)

Text as well as background color may be changed for individual cells in a table.  E.g., the blue cell in the table of named colors above is produced with

<TD BGCOLOR=blue><FONT COLOR=white>blue<BR>0000FF</FONT></TD>
where the text color is changed to white since black text against a blue background is almost unreadable.  Don't set text color and leave the background color at the default setting, or vice versa;  you might get white text on a white background.  Check your choices;  some pages out there on the web have combinations of text and background colors that are truly challenging visually.

RGB Color Table

The 216 colors with the rr, gg, and gg components ranging from no contribution to full intensity in 6 steps, can be mapped onto the 6x6x6 "color cube" shown in outline below.  For reference, it is assumed that the black vertex is in the front, the white vertex in the rear.
                  yellow             green                 
                  FFFF00 =  =  =  = 00FF00                 
               =         -       =         =               
           =                 =                 =           
       =                 =       -                 =       
  red              black            white              cyan 
F00000 =  =  =  =  000000           FFFFFF -  -  -  - 00FFFF
       =                 =       -                 =       
           =                 =                 =           
               =         -       =         =               
                 magenta             blue                
                  FF00FF =  =  =  = 0000FF                 
No matter which two-dimensional representations of the points in this cube is chosen, some colors that are adjacent in the cube will not be adjacent in the representation.  A previous incarnation of this document showed the colors in 6 planes of 6x6 colors, each plane corresponding to a fixed value of one of the components;   gradations in the shades of that component occurred in different planes and were hard to see.

The representation below shows the information in 6 tables: Table I shows the three forward-facing faces of the cube bordered by the "rainbow" colors red - yellow - green - cyan - blue - magenta - red, with the black vertex (000000) at the center of the table.  Table II shows the three rearward-facing faces of the cube, with the same border, but the white vertex (FFFFFF) at the center. Table III and Table IV are bordered by a slightly dimmer rainbow consisting of the edges of the inner 4x4x4 subcube, with a dark gray vertex (CCCCCC) at the center of Table III and a light gray vertex (333333) at the center of Table IV.  Lastly, Table V is bordered by a much dimmer rainbow consisting of the edges of the innermost 2x2x2 subcube, with medium gray vertices (999999 and 666666, resp.) at the center.

The following property of these tables is worth noting:  A line radiating from the black center cell in Table I to a vertex and continuing from the same vertex in Table II to the white center cell displays the different shades of a color, from darkest (i.e., black) to lightest (i.e., white).  Similarly, a line radiating from the dark gray center cell in Table III to a vertex and continuing from the same vertex in Table IV to the light gray center cell displays different shades of a less intense color, and similarly (trivially) for Table V.  Needless to say, gradations from, say, yellow to grayish-yellow (FFFF00 - CCCC33 - 999966), corresponding to a path from an outside vertex towards the center of the cube, cannot be shown in a single table in this approach.

The pattern of component value changes is fairly easy to discern from the tables, so the derivation of RGB color codes for colors that lie "between" the colors on the 6x6x6 color cube should not be too difficult.  Such interpolated colors may, of course, cause dithering in 256-color display systems.

TABLE I

FFFF00

CCFF00

99FF00

66FF00

33FF00

00FF00

FFCC00

CCCC00

99CC00

66CC00

33CC00

00CC00

00FF33

FF9900

CC9900

999900

669900

339900

009900

00CC33

00FF66

FF6600

CC6600

996600

666600

336600

006600

009933

00CC66

00FF99

FF3300

CC3300

993300

663300

333300

003300

006633

009966

00CC99

00FFCC

FF0000

CC0000

990000

660000

330000

000000

003333

006666

009999

00CCCC

00FFFF

FF0033

CC0033

990033

660033

330033

000033

003366

006699

0099CC

00CCFF

FF0066

CC0066

990066

660066

330066

000066

003399

0066CC

0099FF

FF0099

CC0099

990099

660099

330099

000099

0033CC

0066FF

FF00CC

CC00CC

9900CC

6600CC

3300CC

0000CC

0033FF

FF00FF

CC00FF

9900FF

6600FF

3300FF

0000FF
[Back to table description]

Click here to continue




Click Here
to Refer WesternWashington.Com To Your Friends
Back to Top
Search WesternWashington.Com:

Direct Questions and Comments to: Webmaster
1998 - 2002 WesternWashington.com. All rights reserved. Terms of Use Administrator