The Palette: Make It Work for you

Image creating is fun, but creating images that display correctly across platforms is a challenge when designing web pages. This topic will discuss how palettes work to make that possible or impossible! This very basic discussion is by no means definitive. The topic merely gives you food for thought and serves as a catalyst for commentary... If you disagree, if you have a question or if you see something that is incorrect - email me Smorris!

This section will discuss four types of palettes: the Exact palette, the System palette, the Adaptive palette, and the Web palette. Each palette contains a finite number of colors - as many as 16,277,216! Two palettes may have the same colors and numbers of colors; the same number but different colors; or one palette may have more colors than the other.

The Exact palette consists of the exact set of colors used in an image. If a GIF consists of red, white and blue, the Exact palette will consist of three colors. If a GIF is of a hot-air balloon, the Exact palette could contain up to 256 colors. Figure 1 is made up of three colors. The Exact palette for it contains the colors seen in figure 2. The hot air balloon began as a JPEG. It was adapted to the Web palette.

The System palette is a palette or an internal CLUT defined by a computer's operating system. The System palette uses colors for system functions - the desktop, icons, cursors, and for any other images displayed on that system. A basic 8-bit system is capable of displaying 256 colors. These days, most systems have 24 or 32-bit displays and incorporate the full range of colors into the palette!

From a theoretical point of view, the Adaptive palette is a group of colors that most accurately represent the colors found in the original image. On 8-bit systems, it is composed of the 256 colors that are most common to the image rather than to a system's default set of colors. When an image's Exact palette is not identical to the System's palette, the system will impose its built-in palette. So the Adaptive palette will differ from the original Exact palette. In other words, the browser adapts the image to its palette for viewing. This will not change the look of an image as long as it, the browser and the system use the same palette, not an easy feat. If they do not, the image will change when adapted and not look like the one you created

Some image building and multimedia software override the System palette and define colors for the system. Web browsers do not control the system's colors, but take control of an image's palette. They force an image to conform or adapt to the browser's preferred colors.

A number of browsers use a generic palette, of sorts, to render images on the World Wide Web. This palette consists of colors that allow your images to display the same across browsers. Well, sort of…

The National Center for Supercomputing Applications (NCSA) developed the first web browser - Mosaic. The developers did designers a favor (or a disservice depending on your point of view) by defining an 8-bit palette. The palette may be referred to as the Browser-Safe palette, the Web palette or the Netscape palette. The reason for the Netscape moniker is that Netscape was the first popular commercial browser and the first to publish information on the colors of the palette. This palette has become the industry standard for web color. When programmers at Netscape developed their browser, they used non-dithering colors. In theory, these colors display the same no matter the platform and at any resolution or color depth as long as it is at least 8-bit.

The Web palette consists of 216 colors. I know; you thought there were 256 colors in an 8-bit palette! What is this about 216 colors? The Web palette contains 216 colors out of a possible 256. Those additional 40 colors used by Mac or PC platforms were removed from the palette leaving 216 colors.

Figure 5 is a model of the palette. The model shows six squares that are six colors by six colors. Letters and numbers represent colors. The total range of colors in RGB or decimal form is from 0 to 255 for red, green or blue and in hex or hexadecimal form is from 00 to ff. (Note: counting in hex goes like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f). The Web palette's hex values are 00, 33, 66, 99, cc, ff and RGB values are 0, 51, 102, 153, 204, and 255. RGB colors that are contained in the Web palette use 0 or multiples of 51 only. In other words, if all three values are divisible by 51, the color is dependable. Therefore, it follows that if your color contains one of the combinations - 255, 204, 153, 102, 51, 0 or 00, 33, 66, 99, cc, ff, it is in the palette!

Many image-building programs include a version of the Web palette with the program to aid in image creation. Remember, though, if you use the Web palette, some features of your graphics program may not be available. Drop shadows, for example, need access to the full range of colors to do their work. It is best to create images using a higher color depth or resolution and, then, adapt to the Web palette or reduce the depth to satisfaction before saving in final form.

First things first - determine which format is best for your image – JPEG or GIF. Using the wrong format can turn a dream image into a nightmare.

Graphics composed of line art, limited colors, charts and graphs, or computer generated images are suitable for GIF format and, consequently, for optimization with the Web palette. Logos with flat color and images that have a lot of a single color are also good GIF candidates. However, when a browser dithers flat colors, the image often looks worse than when it dithers photographs. Graphics that work better in JPEG format include photographs or images with gradations of color (soft edges).

All the above to say, GIFs work best with limited palettes of 256 colors (or less) and can handle transparency. JPEGs work best with the 16-million color format but cannot handle transparency.

There are several ways to employ the palette when building images for display on your web page.

The first step when fitting your image to a specified palette or when working with a JPEG is to begin with a high-quality original and to render your new image from that. Trying to "upgrade" an already-reduced image to a new palette or to JPEG format is an extreme exercise in futility.

Next, make sure to use a color from the Web palette. The color Red: 51, Green: 102, Blue: 0 is in the Web palette as is hex #0099CC. What about RGB 255,153, 51? Is it contained in the Web palette? How about #CC3366? You should always use the 216-color Web palette, no matter what program you have. As was mentioned before, this palette's specific set of colors has been designed to allow graphics to be represented well on both PC and Mac platforms without dithering. Dithering is the process of rendering pixels in patterns to simulate other colors. The "new" color, created from two or more colors, may fool the eye but is not always eye pleasing. Dithering an image may make it larger than the image with which you started since the GIF compression process works best with large areas of solid color which dithering changes. Dithering may cause longer load times, a no-no on the WWW.

As stated earlier, an 8-bit system can only display 256 predefined colors on the screen at any one time. A color not in that 256-color palette forces the system to adapt the color either by dithering two or more colors to create an approximation of the color specified or by shifting to another color in the predefined palette. Make your design using the Web palette and, after that, reduce GIFs to the lowest resolution that is pleasing.

If you are creating an image that uses only a few colors, choose a 4-bit (16 colors) palette. However, a GIF image with less than 256 colors may not necessarily look right on a 256-color display! Why? Remember, GIFs use an indexed color palette. In other words, the GIF comes with an attached color palette that lists the colors used in the image. These colors may not be the same colors found in the Web palette. For that reason, use the Web palette with your image and you will be happier with the result.

Two GIFs with different 256-color palettes can be too many colors for an 8-bit system to handle. When these images are displayed on the same web page, the browser has to decide which palette to use. It typically uses the palette of the first image loaded and, then, adapts all other graphics to that palette. This can be pretty, or it can be pretty ugly. What if the first image loaded is an underwater scene with a palette full of blues and greens? The image further down the page is a picture of the person whose camera snapped the underwater scene. The second image, adapted to the blue-green palette, causes your photographer to look like he has been underwater too long and without breathing apparatus! Figure 6 is a clip art interpretation of this prospect. The answer is that you could use an image editor to average the palettes, to reduce the number of colors of each image or manually manipulate the colors of the new image to represent the palette of the first image. You may want to simple allow the browser to manipulate the colors for you by dithering them. If the image looks better with dithering than without, you might want to reconsider the JPEG format. To see what works best for your graphic, view the finished product to see if it requires further experimentation. On the other hand, you may be ready to upload and announce your site!

6

Image1	Image 2
This is a simulation only, but I did adapt the palette of Image 1 to Image 2.

Some systems use a different palette (64 or 125 colors). In this case, your GIF built using the Web palette, may dither or change colors. Most users with those systems understand this and bear with it. Some people are of the opinion that since all browsers, at their discretion, may dither an image anyway, why bother at all!

If you design your GIFs using only colors from the Web palette, you will have an image that corresponds to your original design and displays dependably across platforms. If you design your GIF images to use fewer than 216 colors, your file will be even smaller.

The tips found in this topic will help you to create images that look great on almost any system. So, create, experiment, design and have fun! Feel free to post comments, questions or images to illustrate your point.

3			4

JPEG 14144 colors 45.9K	GIF Ordered dithered Standard / Web-safe 16.6K	GIF applied palette shown at right 16.6K

1

3-color image	palette