Cross-Platform Color Issues

Browser/Platform Differences

Some Other Display Considerations

What to Do?

Back to the Color Menu

Browser/Platform Differences

There are two overlapping sets of color names. The first set, the sixteen color names, was first introduced by Microsoft and is officially sanctioned by the HTML 3.2 standard. The second set, the 140 color names, introduced mainly by Netscape, includes in it the color names from the first set.

Color names can be used in place of RGB or hexadecimal color coding in bgcolor, font, and basefont tags.

Examples:

<BODY BGCOLOR=silver TEXT=purple>
<FONT COLOR=aqua>AQUA font color</FONT>
<TABLE BGCOLOR=aqua WIDTH=100%>
<TR BGCOLOR=gray>
<TD BGCOLOR=yellow><BR></TD>
The COLOR attribute for the <BASEFONT> (a depreciated tag) is poorly supported and should not be used.

Color names are not supported by the old 1.0 Netscape and Internet Explorer and 2.0 Mosaic browsers (and, of course, Lynx).

The sixteen color names are supported rather well by the graphical browsers tested, the only problem being in AOL 4.0: the color name gray is displayed as 999999, while on all other browsers tested it is a darker 808080.

The 140 color names are less supported by the browsers tested. Depending upon the browser, unsupported color names may appear as a color similar to the expected color, another color very different than expected, black, or "transparent". Actually, while there are 140 different names, there are only 138 colors represented: aqua and cyan represent the same color (00FFFF), and fuchsia and magenta represent he same color (00FFFF) .

Some sources state that there four levels of depth to each color as well, with level one being the lightest, and level four being the darkest (i.e., blue1 is lighter than blue4). There are even a few web sites that purport to show this (but like most sites purporting to show color names in action, they actually use RGB coding to show the colors which can be very misleading at times). The color levels are only true for Unix (X Window System). I would strongly advise against using them for cross-platform web design.

Other sources will add extra color names, adding in color names like "navyblue." When most (but not all) browsers come across an unsupported color name, they try to find a hexadecimal color code within the name presented. Hexadecimal uses the numbers 0-9 and the letters A-F. Thus, in navyblue, most browsers will see the A, the B and the E as hexadecimals, and convert the rest of the letters to however many number of zeroes the browser needs to bring the hexadecimal color code to a total of 6 digits. The result? Navyblue gets rendered as A0B0E0, which is a rather light blue color. If you type in "navygreen," you will get a darker blue: 0A00EE. It is by coincidence that "navyblue" produces a bluish color, but not because it is an official color name. Since not all browsers will interpret non-supported color names in this manner, it is unwise to make up color names.

And finally, I need to address the issue of variant spellings of the word gray. I keep seeing references that "gray" and "grey" are both supported. Not completely. I think the confusion may be that most of the gray colors end in "gray" except for one: "lightgrey". Why this one exception is anyone's guess! The bottom line is, in the browsers tested for this site, with the lone except for lightgrey, gray is the correct ending for any gray color, any other spelling is unsupported (and in the case of "lightgrey", the alternate spelling "lightgray" is not a supported color).

Some particulars:

In Netscape 2.0 and 3.0 on a PC with 256 colors, aliceblue looks more like a yellowish-green. Netscape 4.0, Internet Explorer 3.0 and 4.0, AOL 4.0, all support the 140 color names.

The newest version of WebTV supports the 140 color names com pletely, while on older versions of WebTV several related colors are displayed as the same color: blueviolet is the same as blue, goldendrod is the same as gold, greenyellow is the same as green, limegreen is the same as lime, olivedrab is the same as olive, orangered is the same as orange, and yellowgreen is the same as yellow.

Opera 3.60 also does not support all of the 140 names. If a non- supported color name is used in the font tag, the text becomes black, but if used in the bgcolor in table cells, the table color becomes whatever the bgcolor of the page is! In other words, transparent. The non-supported colors are aliceblue (seems to be the least supported color name), burlywood, crimson, darkblue, darkcyan, darkgray, darkgenta, darkred, indigo, lightgreen, lightgray, saddlebrown, salmon, and whitesmoke.

After you remove the colors that are not supported by all browsers tested (under optimum color depth and video RAM conditions), fifteen out of the sixteen color names and 118 out of the 140 color names remain. Out of those, only ten are in the browser-safe palette.

Some Other Display Considerations

Contrast

For largest cross-platform readability, one should try to not use low contrast between text and background. What may be just readable on your computer monitor, may not be on a darker monitor (see discussion on gamma values below). Contrast between colors is also important for color blind visitors. A large minority of web surfers suffer some kind of color blindness. The most common is the confusing of red and orange with yellow and green, respectively. Going to the other end, one should also try to not use very high contrasts, such as black text on a pure (fully saturated) white background, as well. Such high contrasts can be harsh on the eyes for lengthy reading (except maybe for flat panel LCD users) and as we learned earlier on some WebTV viewers (depending upon the condition or quality of the TV set being used) using pure colors can distort the TV picture, cause audio noise, or cause text to "bleed".

Gamma Values

The Mac has a higher gamma value, thus colors and graphics look brighter on a Mac than on a PC. What looks fine on a Mac, may be too dark on a PC. What looks good on both the PC and the Mac, in terms of gamma values, will be probably be fine for the WebTV. However, individual monitors vary in quality, and users can alter monitor settings.

What to Do?

Try to keep your web page colors to within 256 colors, and specifically the so-called "browser safe" 216 color palette but stay away from the fully saturated primary colors, especially red and white, as background colors or for a long areas of text, and avoid both very low and maximum contrasts between background and text colors. If you design on a MAC, and your images look a bit dark, they may be too dark on a PC. If you design on a PC, and your images look a bit bright, they may be too bright on a MAC.

It's difficult to stay within a set number of colors, it's like being told you can only write a complete word picture within fourteen lines, in iambic pentameter, and restricted to a definite rhyme scheme. Makes choosing words painful. But many a beautiful Sonnet was written under such conditions. It could be worse:

Strict syllable count,
the rigid, harsh form becomes
a lovely haiku.

(I told you it could be worse!) And while free-verse can also be beautiful, constraints can challenge and encourage the creative juices to new heights. The economy of the rigid structure teaches us the importance of each word choice. And make us better free-verse writers later. You can always go to desk top publishing, with its four color print process, or paint with as many colors as you wish on your large canvas, but when it comes to creating for the web world, until color synchronization becomes uniform and universal, coding a web page for the widest possible audience means restraining yourself. You can still occasionally break the rules, but do so carefully! If your audience is a very select one, for instance, and you don't care about losing visits, then by all means code to your select audience. Otherwise, the advice above applies, as does the final advice of avoiding the use of color names. Use the RGB or hexadecimal coding instead; if you do use them, avoid using the ones that are not widely supported and try to use the browser-safe color names. And then realize that...

...Ultimately, The User Is in Control

You thought you were, or your Web editor was. But those are mere illusions in the virtual reality of the Internet. The Internet is not a piece of paper, where once you write something down, the format, the layout, is fixed. Remember, the user or visitor to your web page has ultimate control over some of the layout and formatting of your web page. They can change the default background, text and link colors on their browsers, overriding what you've chosen for your web page. They can turn off images and have their choice of default bgcolor override your choice of a background gif. On many browsers, users can also change browser preferences to use nearest-color matching (substitution) or to dither; if they have their user preferences set to nearest-color, the browser will render a non-browser safe color to its nearest browser-safe match, which may result in a noticeable difference in appearance from what you intended and could even cause your page to become unreadable. Finally, individual monitors can have different contrast, brightness (gamma) and color "temperature" settings, screen resolution, color depth, and video RAM that all can alter how your page will look. In the wide world of web page creation, WYSIWYG takes on a literal meaning: What You See Is What You Get, but it may very likely not be what anyone else gets! WYSIWYG is a Web Myth! This will be an oft repeated theme throughout this site. Thus, your colors may dither, or map to another color, be viewed on a dark or light monitor, and the only thing you can do is to follow the above advice to minimize the distorting affects.

-- Much of the above article was published in 2000 as "The Trouble With Color" in Library Computing Journal, Vol 18 no 3., pages 208-212. Journal published by Sage Publications. Will also be included as a chapter for my up coming book "Merchant's Encyclopedia of Useful HTML" for Scarecrow press later this year.