|This week in Web Developer Tips.
Color Tables by Guest Author, Gernot Metze
This document uses TABLE tags. Tested with Microsoft Explorer
version 3.0 and 4.7
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:
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.
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.
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):
Off-white backgrounds may be preferred to a pure white background; some possibilities are:
The color of selected parts of text may also be changed. E.g., Red-Green-Blue is produced with
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
yellow green FFFF00 = = = = 00FF00 = - = = = = = = = - = red black white cyan F00000 = = = = 000000 FFFFFF - - - - 00FFFF = = - = = = = = - = = magenta blue FF00FF = = = = 0000FF
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.