PENN PRINTOUT
The University of Pennsylvania's Online Computing Magazine

May 1996  Volume 12:6

[Printout | Contents | Search ]


I am currious yellow

By John Macdermott

When designing graphics for the Web, it's important to consider how the colors you select will look on different computers. Although many computers can display thousands or millions of colors, your work will most often be viewed on computers limited to 256 colors (8 bit mode). On these machines, color dithering must be considered.

Dithering is the way computers approximate colors that cannot be displayed directly. This process intermingles dots of similar colors to simulate other shades. For example, light blue and dark blue will be dithered to simulate a medium blue. The result of dithering is a dot pattern that often makes a solid color appear to have spots or patterns in it.

Web browsers will dither 8-bit color slightly differently on Macs and PCs running Microsoft Windows. A few simple rules will help you identify colors that will not dither on either platform.


What looks good on a Mac?

Any Macintosh displaying in 256-color mode will use a predictable set of colors when running Netscape or any other Web browser. This set of colors is known as the system palette and these colors will not dither; colors not in the system palette will dither.

The RGB (red, green, blue) values that make up the system palette follow two simple rules. The first rule is that 216 of the 256 colors in the system palette use RGB values that are multiples of the number 51. Since RGB values range from 0 to 255, this rule includes:

0, 51, 102, 153, 204, 255

If you use one of these values for R, G, and B - in any combination - you'll end up with a color in the system palette. Here are four examples of colors that are in the system palette:

Description        RGB Value          Hex Value
White              255,255,255        FFFFFF
Violet             153,51,102         993366     
Pale Yellow        255,204,51         FFCC33     
Toothpaste Green   0,204,102          00CC66
The second rule is that the remaining 40 colors use values that are multiples of 17. These colors are shades of pure red, green, blue, and gray. Their RGB values are given below. (Note: Multiples of 51 are excluded from the table since those colors were included in the previous group of 216 color values.)

Reds        Greens     Blues       Grays
17,0,0      0,17,0     0,0,17      17,17,17
34,0,0      0,34,0     0,0,34      34,34,34
68,0,0      0,68,0     0,0,68      68,68,68
85,0,0      0,85,0     0,0,85      85,85,85
119,0,0     0,119,0    0,0,119     119,119,119
136,0,0     0,136,0    0,0,136     136,136,136
170,0,0     0,170,0    0,0,170     170,170,170
187,0,0     0,187,0    0,0,187     187,187,187
221,0,0     0,221,0    0,0,221     221,221,221
238,0,0     0,238,0    0,0,238     238,238,238

What looks good on Windows?

Unlike Macs, Windows has no 256-color system palette. Colors are governed by the software that's in use. Thus, Netscape, Mosaic, or any other Web browser can handle 8-bit color in Windows differently.

In the case of Netscape, 216 colors are available to display images. These colors follow the "multiples of 51" rule; they are identical to 216 colors of the Mac system palette. Netscape refers to this set as the "color cube" and users have the option of controlling how colors from outside the cube are adapted. In Netscape 1.22, from the Options menu, select Preferences, then select Images & Security to display the two choices: Dither to Color Cube or Substitute Nearest Color in the Cube. Netscape 2.0 uses slightly different descriptions for these two options and adds a third - Automatic (the default option in Netscape 2.0)

  • Dither. Dot patterns are used to approximate colors not in the cube. As always, dithering results can range from acceptable to really ugly.

  • Substitute. Netscape actually changes the colors in the images to force conformity with the color cube.

    The good news is that images load faster (since dithering does not need to be calculated) and no ugly dot patterns are introduced. The bad news is that color tones will shift.

  • Automatic.An algorithm decides if colors are close enough to the color cube to be substituted for, or are too far and must be dithered.

Since there's no way to control how viewers have their preferences set, check images in each of these modes to determine if the results will be unacceptable.

Other browsers, such as Mosaic, manage 256-color images differently. For instance, on an old version of Mosaic for PC that I use, color substitution seems to be the only method available. The only reliable way to know what's going to happen on different browsers under Windows is to test images and see what you get.


What looks good everywhere?

The rule of thumb for images that will be viewed in 256-color mode is to create them using the 216 colors of Netscape's color cube for Windows. Because these colors are also in the Mac system palette, you won't have problems with dithering or color shifts on the most popular platforms for the Web. Remember that these colors will use R, G, and B values that are multiples of the number 51.

These 216 colors provide reasonable flexibility if you can pick ones that you like. However, in many cases you do not have that freedom. For example, colors on Penn's official University Web site need to look like the traditional red and blue. A red with RGB values of 153,0,0 looks good and does not dither (153 is a multiple of 51). However, no shade of blue in the 216-color cube matches Penn's blue very well. A blue with RGB values of 0,0,128 dithers, but is not objectionable on Macs or Windows. This value was selected by trial and error viewing on both platforms.

It's particularly hard to find shades of gray that work well cross-platform. When limited to multiples of 51, you have only 6 shades to work with including black and white. Experiment with in-between shades to find one that won't look too bad on one platform or the other.

Computers that can display in 16-bit (65,536 colors) or 24-bit (16.7 million colors) color will not have problems with dithering. The rules above apply only to computers limited to 256 colors. However, there is another important difference between the way graphics display on Macs and Windows machines - gamma.


What is gamma?

Gamma refers to the non-linear relationship between the voltage applied to a CRT and the resulting brightness of the image. Different manufacturers have adopted different gamma values, which means that image brightness will vary between Macs, PCs, and other computers. In general, images will appear darker on PCs than on Macs; contrast in dark areas that is discernible on a Mac may be obscured on PCs. View images on both platforms whenever possible, and try to find brightness and contrast settings that compromise between the optimal settings for Macs and Windows.

A picture by Brady Ajay


JOHN MACDERMOTT is New Media Specialist for ISC's Academic Computing Services.


Another picture by Brady Ajay

The information in this article has been adapted from "I am Curious Yellow" ( http://www.upenn.edu/computing/group/dmp/technical/colors/curious.html), a Web tutorial on color management issues. This site covers RGB and other color systems, dithering, gamma, image compression, and more. Sample images are provided to illustrate selected topics. Links to additional information provide the opportunity for more detailed study.

Origingal artwork by BRADY AJAY (ajayb@wharton.upenn.edu). Used by permission.