Application Note

Colors on the World Wide Web

You've gotten your first web site organized and laid out. Now it is time to assign colors. You go through some of the popular books on web programming and see such menus as:

and so on. (The above values are from HTML & CGI Unleashed, by John December and Mark Ginsburg, page 804).

But, upon plugging these values into the color tags, and bringing the file up on your browser, you find that things don't quite work that way.

The following is based on an application note from Netscape; this recipe works far better than some values that are getting thrown around.

Ref: Netscape Technical Support Pages: http://help.netscape.com/

Background - in the font and bgcolor color tags, the HTML color specification allows separate control of each of the electron beam intensities for each of the red, green and blue electron guns. The control values can range from 00 (the beam off) to 255/0FFh which is maximum intensity. So conceptually, you have access to 256 * 256 * 256 = 16,777,216 colors.

In practice, at least for Netscape and apparently other browsers, the full intensity range for each electron beam is covered by only a range of 6 values. I.e., the red gun is permitted only 6 intensity levels, the green gun only 6 intensity levels, and the blue gun only 6 intensity levels. In other words, the browsers support only a 6*6*6 color palette, for a total palette of 216 different colors.

This range of 216 values permitted in the font and bgcolor tags maps into an intensity specification only every 51 decimal (33 hex) values. Thus the following are conceptually the only color values one need to specify:

Index RRGGBB COLOR
1 000000  
2 000033  
3 000066  
4 000099  
5 0000cc  
6 0000ff  
7 003300  
8 003333  
9 003366  
10 003399  
11 0033cc  
12 0033ff  
13 006600  
14 006633  
... ......
210 ffccff  
211 ffff00  
212 ffff33  
213 ffff66  
214 ffff99  
215 ffffcc  
216 ffffff  

Any other values are apparently dithered into something that may or may not even come close to what you want.

Now for some examples. Examine the following pages for what shows up on your browser (and let's face it - it also depends on the alignment of your computer monitor!) for some variations on this theme:

Permission is hereby given to copy and modify these color demonstration files for personal study. An acknowlegement to Skunk Creek Computing would, of course, be most appreciated.

E. Stiltner

This application note has been brought to you by Skunk Creek Computing Services.

Legal handwashing -
The above information is based on the author's experience and observations. This information is supplied with no warranty nor any guarantee. It is the user's sole responsibility to validate it for his or her intended application.
Return to SCCS home page.
URL of this page: http://www.sccs.com/sccsfarb.htm
Revised '12-Oct-2005,8:38:00'
Copyright © 1997, 2005 SCCS.