Web Author's Guide
Color Theory

Colors are fun to look at, but they can be hard to understand. The way they are coded for Internet pages can appear enigmatic to the non-Web professional. And color advice from professionals can be confusing or even conflicting. We try to sort this out for you on this page and the next, under these heads:

Color Theory and coding conventions
The HTML system In Practice
Advice on using and controlling color (separate page)
General Page Design Suggestions (separate page)

One Web professional in discussing some of these issues with us remarked, to put the color question in perspective, "Content is king." Our reply was, "Yeah, but color controls the succession." Color is a big help in carrying your message. It can also be a big hindrance. In what follows, we try to help you find your way through that danger, to reach that good result.

Theory and Notation

Theory. The colors with which we are concerned are combinations of red, green, and blue. These are the optical or "subtractive" primaries, which apply to light mixing. They define the three dye layers in color film, where light is coming through the object. They are not the pigment primaries you learned in school (red, yellow, blue). Those apply to paint mixing, where color is reflected from the object. On the Internet, as in a church window, light is coming at you through the color. The subtractive primaries apply.

Any color can be determined by specifying proportions of those primary components. Next we ask: How many levels of each color do we distinguish? The HTML language has a built-in answer. It is set up to provide for 16² = 256 levels for each primary color. Those 256 levels, for each of the 3 constituents, allows a total of 256³ = 16,777,216 possible combinations. More than sixteen million colors! Wow!

But that is theory. See further below under Practice.

Notations. The specifiers for each color are given in the order red, green, blue, or RGB. The levels range from 0 (none of that color) to 255 (full strength of that color). In such places as the Custom Color menu of the Microsoft Paint utility, the three components can be directly specified in that way. Thus, in that RGB code, pure red, which has the highest possible level of the red component (level 255) and none of the other two (level 0), is specified by (255, 0, 0).

HTML does the same thing, but it does it in the hexadecimal or "base 16" notation. In that notation, the familiar number set 0-9 is extended by adding the letters A-F for 10-15, so that letter C (for instance) stands for the numeral 12. In that more compact notation, two digits suffice to represent the 16² = 256 levels The highest level (level 255) of a color is thus given in hex notation by "FF," and the full hex code for "pure red" will be FF0000 (255 red, 0 green, 0 blue).

The following are therefore completely equivalent:

In translating between these systems, remember that numbers in the RGB code are the familiar base 10 numbers, in which "33" is the number thirty-three, whereas HTML formulas are in hexadecimal or base 16 notation, in which the same "33" means the decimal number fifty-one (3 times 16 plus 3 times 1). Hence

Take another example: Hex 0000FF = Red 00 Green 00 Blue FF ["16-16"] = RGB code (0, 0, 255). This gives pure Blue.

Practice

Options. Now we begin to describe the limitations. Most Internet browsers will not display the all the colors that are theoretically possible with 256 grades of each of the 3 primaries. Thus in practice one has fewer than sixteen million colors to pick from. The current convention is to use only 6 of the 16 possible levels for each color. In hexadecimal notation, the available levels are the 00 ("none") and FF ("full") endpoints plus the evenly spaced intermediate levels 33 (decimal 51), 66 (decimal 102), 99 (decimal 153), and CC (decimal 204). With only 6 options for each of 3 primary colors, the total available palette works out to 6³ = 216 different colors.

It has further been discovered that Internet Explorer will not correctly display the following four colors:

  • 00FF33 (0, 255, 51)
  • 33FF00 (51, 255, 0)
  • 0033FF (0, 51, 255)
  • 3300FF (51, 0, 255)

which it renders, respectively, as

  • 00FF00 (0, 255, 0) Standard Pure Green or
  • 0000FF (0, 0, 255) Standard Pure Blue

If you are using Internet Explorer to view this page, you probably can't detect any difference between the three blue tones, or the three green tones. We, typing this page in a Windows based system, certainly can't. Eliminating these four inactive colors leaves 212 colors actually available to the careful Internet designer. If you are curious, the remaining permutations of the 0, 51, 255 (or, in hex code, 00, 33, FF) elements are these red-based colors:

  • FF0033 (255, 0, 51)
  • FF3300 (255, 51, 0)

These seem not to be a problem. The second one, FF3300, should appear a little orangier on your screen than the other one.

Tables. The above is what the manuals tell you. What the manuals don't go on to do is to display the actual 212 safe colors. For specimens of all those options (in fact, all 216 color formulas and their visual equivalents), see our Colors page. That page divides all Web-safe colors into six groups, with one table for each group. Each of the six groups can be thought of as a slice of a color solid. But note that these slices do not parallel pages in the Munsell Color Atlas or other standard references. Instead, they intersect several of those pages. The giveaway is that the gray scale axis runs diagonally through the six slices, from white (FFFFFF, upper left corner of the FF group) to black (000000, lower right corner of the 00 group). You will thus need to consult several of the "slices" to view, for instance, all the available greens.

Why did we not simplify things by putting all the greens on one table? Three reasons. (1) We wanted to present the consequences of the notation system as is, so you can see how it works. (2) Because of the difficulty of defining "green." (3) Because there are more greens than reds, which would lead to irregular tables. The eye sees more shades of red than of green, and from the "eye" point of view, color theory tends to generate too many greens and too few reds. This result is built into the tables. We have not felt called on to rebuild the tables, or reform the system which produces them, or to change the geometry inside your eye.

Orientation. In looking at these groups on our Colors page (click here to sample the Red = 66 group), notice that the 3 color samples at the right end of each row of 6, and the 3 samples at the bottom of each column of 6, look very like each other, whereas the rest of the colors in that row or column seem better "spaced." Some viewers will see little difference among any of the colors in the block of nine making up the lower righthand corner of each group. This is because our eye responds to light on a logarithmic scale, whereas the tables are constructed on a linear scale. The HTML palette would represent the possibilities better if it used unevenly spaced points between 00 (black) and FF (white), with finer divisions toward the top or white end. Our recommendation for a more nearly logarithmic division of the space would have been 00, 66, 99, BB, DD, FF. This gives a more usefully distributed group. To examine the difference, see our sample Alternate page (but remember that since the BB and DD levels aren't Internet safe, that page may not display properly for you). That is a mere suggestion after the fact. As the facts are, don't use the BB and DD colors. But as a protective rule of thumb when working with the given levels, don't treat any two colors in the lower right block of nine as very well contrasted with each other.

Warning. We confess that we can't explain why the color-selector boxes in such programs as Microsoft Paint and Claris Home Page insert into your document hex codes like 008000, which are not among the recommended Web-safe options. Not some, but most, of the colors in these boxes fall outside the standard safe limits. Given the above advice, which comes to us from reputable sources, we can only recommend that the preset colors on these handy tools not be used. Consult our Color Picker reference page to see the options available on these utilities, just to satisfy your curiosity, but as far as we can see, those colors should be avoided by careful designers.

Back to Web Guide Page

16 Dec 2001 / Contact The Project / Exit to Reference Page