Web Safe GIF Colors, Dithering,
and Anti-Aliasing

© 2001 by Walt Howe
(last revised 6 February 2010)

When you select colors for your web pages, text, and graphics, will they look the same to everyone else who views them? There are a lot of differences in the ways that different browsers and computers display colors, particularly older systems, and what looks good on your system may look terrible on another one. The way to be sure that everyone sees the same colors is to use web safe colors only for backgrounds, text, and GIF graphics. This used to be quite important. With modern computers, it is much less important than it used to be.

Web Safe GIF Colors. Colors in GIF files are normally represented by combining values for red, green, and blue, each of which ranges from 0 to 255 or in hexadecimal notation, from 00 to FF. With maximum values for all three (which can be coded in HTML as #FFFFFF), the resulting color is white. With minimum values (#000000), the color is black. #FF0000 is red, #00FF00 is green, and #0000FF is blue. #FFFF00 is yellow. #FF00FF is purple. Many other colors can be made using intermediate colors.

If web pages could use all possible combinations of these, there would be 16 million possible colors. Old, web browsers and computers will not handle this full range, and there are differences between different browsers and different computers. There is a limited set of 216 colors that all browsers and most computers can handle cleanly. These are the colors made up of the hexadecimal values 00, 33, 66, 99, CC, and FF or the equivalent decimal values 0, 51, 102, 153, 204, and 255. These six values produce 216 possible combinations of red, green, and blue, and they will look the same on nearly all computers.

Ten years ago, we advised everyone to stick to these colors, because only the very best equipment could handle other colors well. That advise no longer is true. Just about any computer purchased in the past five years will handle a full range of colors very well.

Dithering. Colors outside this set of 216 are simulated on web pages by dithering, that is, combining pixels (dots) of different colors to give the effect of a new color, as illustrated below.


Dithered
color

Magnified
8 times

Dithering is somewhate undesirable in web page GIF files. The way that GIF files are coded, dithering creates much larger GIF files than simiilar non-dithered ones. Dithered files are therefore slower to load. If text using a small font is displayed over a dithered background, it can be a lot harder to read, too. For clean, fast loading web pages, all GIF files should be made up only of the 216 basic colors. There are still enough people connecting with slow telephone dialups to make this a consideration, but it is much less important than it used to be.

Note that GIF and JPEG files use completely different coding schemes, and are used for different types of graphics. You don't need to be concerned about how many colors are used with JPEG files. See Creating Small, Fast-Loading Graphics for Web Pages for a further explanation.

Aliasing and Anti-Aliasing. Pictures on screen are made up of square pixels. When a diagonal or curved line is represented, what may look like a smooth line is actually made up of jagged lines, as shown in the magnified picture below:

aliased image

This stair-step appearance is called aliasing. Aliasing is an attempt to represent a curved or diagonal line with edges that can only be horizontal or vertical.

In high resolution images, the aliasing is hard enough to see so that the eye is fooled by the jagged edges. With lower resolution, the jagged edges can be softened by a technique called anti-aliasing. Anti-aliasing inserts pixels of an intermediate color between the main image and its background. Anti-aliasing is illustrated in the magnified picture below:

anit-aliased image

The intermediate color pixels fool the eye even further and give the appearance of smoother edges. Back away from the screen a bit and compare the aliased and anti-aliased images. Which appears smoother?

Many graphics programs like PhotoShop automatically anti-alias GIF graphical images by default. There are some potential problems with this, however. First, by putting in intermediate colors, it does increase the size of a GIF file. This may or may not be acceptable. But a worse problem occurs when an anti-aliased transparent GIF picture is created against one background, but then displayed against another color background. See the results below:

The above image is exactly the same as the anti-aliased picture above it. Only the background color has been changed. You will sometimes see this halo effect around a picture on a web page. It happens when a transparent GIF is created against the wrong background color. Watch out for it on your own web pages.