Optimizing Web Graphics: Which Color Palette?

Which Color Palette?

Optimizing Web Graphics

There is a 216-color palette that will not dither on Mac and Windows PCs.

There is much discussion and confusion on the Web about color palettes. There is, in fact, no one universal 8-bit palette that will not dither on all platforms. There is, however, a 216-color palette that will not dither on most.

The problem is that different platforms use different color palettes. Netscape and other applications use a 256-color palette on Macs and X-windows, a reduced palette on Windows, and UNIX varies the palette according to how many colors are available. Note: Netscape 4.0 Mac uses the 216-color "non-dithering" palette, not the Mac's system palette.

Figure 2 - The Netscape
216-color palette

The Windows Palette

Windows 3.x was designed around the ubiquitous 256-color VGA graphics board. Windows computers reserve 20 of these colors for system use; the first and last ten colors. Netscape reserves an additional 13 colors for its logo, which leaves 223 colors available to the user. Netscape's programmers reduced this figure to 216 colors (Figure 2), which is the closest cube root below 223 [Ve95, NC95].

The Netscape Color Cube (PC/Mac)

Figure 3 - The Netscape
6x6x6 Color Cube (PC/Mac)

The 6x6x6 color matrix (or "cube") shown in Figure 3 is used by PC and Macintosh versions of Netscape Navigator 1.1 on 8-bit (256-color) displays. Graphics using this 216-color palette will not dither on either platform. Netscape 2.x adds one refinement: a GIF appearing as the only image on a page will be shown in its exact requested colors. If there's more than one image on a page, Netscape dithers to the 216-color cube.

The cube consists of 216 colors, 6 colors for the red component, 6 for the green, and 6 for the blue. Each basic hue in this RGB color space ranges from 0 to 255 in decimal or from 00 to ff in hexadecimal. The colors in the figure use RGB values of 00, 33, 66, 99, cc, and ff (hex) or 0, 51, 102, 153, 204, and 255 (decimal). The increment is no coincidence, 51 is 1/5 of 255 which gives 6 evenly spaced points along each axis.

Thanks to Rick Levine of Sun Microsystems [Le96] for the use of his color cubes.

The UNIX Palette

Netscape for UNIX, however, automatically adjusts the size of its color cube depending on how many colors are available at launch. It may use a 6x6x6, 5x5x5, or even a 4x4x4 color cube, depending on how many colors are free.

Figure 4 - The Netscape
5x5x5 Color Cube (UNIX)

The 5x5x5 color matrix (or "cube") shown in Figure 4 is most often used by UNIX versions of Netscape Navigator on 8-bit displays. Graphics using this 125-color palette will not dither on UNIX machines.

The cube consists of 125 colors, 5 colors for the red component, 5 for the green, and 5 for the blue. Each basic hue in this RGB color space ranges from 0 to 255 in decimal or from 00 to ff in hexadecimal. The colors in the figure use RGB values of 00, 40, 80, bf, and ff (hex) or 0, 64, 128, 191, and 255 (decimal).

On 8-bit PC and Macintosh platforms, all but eight colors in this table will be dithered (the cube's eight corners composed of 00s and ffs). So even when you use the 216-color cube, most Unix users will still see most of your colors dither [Le96].

The general approach on the Web has been to ignore UNIX users and design for the majority. Authors frequently cite the 216-color palette as a universal non-dithering palette when it is in fact non-dithering for only Macs and Windows.

The 216-color non-dithering palette

You can download the Mac or PC non-dithering CLUT right here. To use it, unbinhex and unstuff (Mac) it or unzip it (PC) and save to a convenient place. You'll see a file called 216clut. This file can double as both a CLUT (color lookup table) or a swatch in Photoshop. To avoid dithering on 8-bit machines you can either start out using only colors from this special palette (picking colors from this color swatch) or map your images to it (using the same file as a CLUT).

Load non-dithering palette as a Swatch

**Figure 5 - 216-color swatch**

To make it easy to pick non-dithering colors for your art you can make this non-dithering color table the default color swatch. First load the 216-color CLUT as a swatch (Windows/Swatches/Load swatch) and then select save. This swatch becomes the default and appears each time you start up Photoshop (Figure 5). Use this non-dithering swatch when creating graphics from scratch.

Mapping an image to the 216-color CLUT

To map the non-dithering CLUT to an existing image, first fill all of the flat-color areas with colors from the 216-color palette (see above). Any other colors in the non-flat areas of your image will dither on some systems, which is usually fine. Now convert the image from RGB to indexed colors and load the special 216-color CLUT (Mode/Indexed Colors/Custom Palette/Dither = None). Select load in the CLUT dialog box and select the special 216clut you just downloaded (Figure 6). Photoshop will reduce the image to 216 colors and map the image to this palette. Of course, during this color mapping some posterization may occur.

216-color CLUT

Figure 6 - Custom 216-color CLUT

You can also create your own 216 color table from figure 3 (Netscape 216-color cube). First save the image to a file on your computer. Open it in Photoshop, select Mode/Color Table, then select Save (Figure 6). These days, look for a modern image editing program (Imageready, Fireworks, etc) that includes a Web palette for you, to make this step unnecessary.

See also Webmonkey's tutorial on the Web-safe palette, they say there are really only 22 colors that are truly Web-safe.