Victor Engel's
No Dither Netscape Color Palette

Before:

What "Before:" looks like on 256 color systems:

After:

Netscape uses a general purpose palette to render images it encounters on the Worldwide Web. This palette is a frequent source of trouble for page authors around the world. This document is an effort to provide an explanation and a tool for authors to use to improve their pages. The Netscape palette for forground colors usually consists of all the combinations of 00, 33, 66, 99, CC, FF for each of the red, green, and blue elements of the color descriptor. This results in 216 (6x6x6) distinct colors. These colors are pictured in the following illustration. If you are using a browser that supports client side image maps, you can click on the image to get a clickable map.

netcolpc.gif: Non-dithering Netscape colors for 256 color computers:

If you need help visualizing the image, I have an explanation (now with an ANIMATED PALETTE) that may help you with it.

Non-Windows based computers can usually use additional colors. I created netcol2.gif, an image combining the 216 colors in the 6x6x6 color cube and these additional colors so you can see what the additional colors are. Since this document is designed to provide a tool for creating pictures with universal clarity using Netscape, I recommend using the netcolpc.gif instead, however. The restricted palette will make it more universal. If you are using Netscape to view this page, you can download a copy of the image by right-clicking on it.

You may have noticed that the 6x6x6 color palette has very few greys. In fact, if you don't unclude black and white, there are only 4 greys. This is a severe limitation of this palette. In many cases, you can achieve a reasonable result by using an ordered dither. The following is an image containing not only the greys of the 6x6x6 palette, but the intermediate greys.

Here is what the image looks like to 256 color system users:
If you are on a 256 color system, you will see some dithering in the intermediate colors. The dithering rendered by Netscape is a pseudo-random dither. In some cases, an ordered dither will look much better. Here is the same image rendered with an ordered dither instead. If you cannot see the dithering, you may want to view a magnified version of these images.
I chose a dither which is essentially a checkerboard pattern. This seems to produce the best results if an even color is desired. Netscape does not dither this second image because it has already been dithered to the Netscape colors. This is an example of choosing the dither for optimal effect.

One caveat, however: using an ordered dither in a GIF image will increase the file size. The difference is minor in this example because the images are small. However, this can become a significant consideration on larger images.

DOS based computers with a 16 color driver can display only a very limited number of the colors in this image. I have included a 16 color image for reference. Use this image (instructions) in conjunction with netcolpc.gif to make sure your picture is viewable on most 16 color computers.

I also have a very tiny image of the Netscape colors. If you are using a slow modem download this image. Browsers supporting resize tags will see this image magnified 10 times.

Practical Applications

Many images are not suitable for optimization in the ways I describe here. These are the same images that work better as Jpeg images than Gif images. My usual rule of thumb is: If the image is from a scanned photograph or otherwise contains gradations of color, it is more suitable to Jpeg. Using the techniques described on these pages will degrade the image without any significant gain. On the other hand, images composed of few colors and large areas of uniform color are frequently suitable for these techniques. Such images typically include graphs, charts, cartoons, and many computer generated images, such as captured screens of applications.

The palette image on this page has a 256 color palette in which 41 of the colors are defined as white. The rest of the colors make up the Netscape color palette. This means, there is no color in the palette that cannot be displayed exactly by Netscape. To take advantage of this fact, use the palette in this image to apply to your own images: load this image into your favorite image processing tool, save the palette, load your image, then apply the palette you just saved. This process optimizes your image for Netscape. No more dithering of colors will be done by Netscape.

You may notice that the Netscape palette does not contain many of the standard Windows colors. I recommend taking any screen captures of Windows/DOS screens and applying the Netscape palette using the process described above to approximate the Windows colors with exact Netscape colors for images to be presented using Netscape. If your image contains only the standard 16 DOS colors, use the reduced palette contained in the second image on this page, doscol2.gif. This reduced palette will result in a significantly smaller file size. I have some examples of images that have been optimized in various ways.

Note: This discourse describes the most commonly encountered scenarios used by Netscape as far as I know. There are other scenarios, however, including situations in which a 5x5x5 or even 4x4x4 color cube is used. Please browse through my links for more information on this.

I also should mention that the 6x6x6 color cube presented here is not unique to Netscape. It is actually fairly commonly used as a general purpose palette. Netscape seems to be less flexible, however, in that additional colors (beyond the 216) are not used on Windows systems. An exception is if a page contains only one image and you are using Netscape 2.0. In this case, the palette of the image is used.



I hope this page has been a help to you. If you find it helpful, please tell others about it. If you have any questions, comments, or suggestions, email the author, Victor Engel at lights@onr.com.

Go back to Victor's Home Page.
View links to related pages.
Sign my guestbook.

http://the-light.com/netcol.html


This Page Copyright © 1996 Victor S. Engel
This page and any of its contents may be reproduced only under specific conditions. Addendum to my general copyright: the image contained in the file netcol.gif may be freely copied in any form desired by anybody as long as the colors are not altered, the URL remains on the image, and the copyright notice remains. In other words, you may port the image to other formats, but do not change the colors or alter the content.