TechNote (Archived)

What can make HTML colors appear differently than GIF colors?

Issue

Attempts to match the background color of an HTML page to a particular color in a GIF can prove difficult because GIF and HTML colors may not match in all browsers.

One example of this issue occurs when using websafe colors in monitors that display at "thousands of colors". Websafe colors must shift slightly when viewed on such a monitor, and a browser's HTML renderer and its GIF renderer may shift these colors in slightly different ways. Colors which have the same hex value may look different on some systems.

Reason

Why would there be a shift? A monitor set to "thousands of colors" uses 16 bits, or two bytes, to describe the color of each pixel. This is 5 bits each for the red, green, and blue information -- there are 32 distinct values for each RGB channel. The websafe colors have 6 distinct values for each RGB channel (00, 33, 66, 99, CC, FF). These 6 websafe values won't distribute evenly among the 32 available values on that monitor, and so each renderer must shift some colors a little bit in some cases.

Solution

The following two techniques are often used to make a GIF appear to blend into the background and to render almost the same across browsers:

Try removing the background of the GIF by making it a transparent GIF. This gives an irregular outline to the graphic, and color shifts won't be as noticeable as with a boxy image.

Note: In Fireworks you can use the "matte color" in the Export Preview to control to which color the edge pixels antialias. Even if there's only a general match to the background, this subtlety can help smooth the edges.
Another approach is to use a tiling background GIF in the page, rather than an HTML background. This assures that the same renderer will handle both background and foreground, and so can help in avoid color shifts.

Note: Some browsers balk at very small tiling GIFs... a GIF of solid color at 16 pixels square will compress down to small size and be acceptable by a variety of browsers.

JPEG compression can often shift colors by itself, so this may be an entirely different phenomenon than the GIF handlings described above. Also please note that some applications will shift colors when exporting to other applications. A good test is to check whether Fireworks reports the image as websafe, and whether a GIF from Fireworks looks the same as what appears when viewing graphics from other applications.

Summary

The same hex color may display differently as HTML or as an image, on some displays. There are techniques that will give the appearance of matching colors, without actually asking all browsers to match colors.