Feature - Safety Color Palette

Host your site on our high performance virtual domain and non-domain accounts.

Let Netpanel design your web site the way you want it.

Submit your web site to 15 major search engines quickly and easily at no charge.

Download some of our free 32-bit software programs for Windows.

Find every news story, article, and special feature ever published on Netpanel.

Take a moment to fill out our quick survey, and earn a free utility in the process.

Safety color palette
Published on 5/19/97

The safety color palette is a set of 216 different colors that should be used in images designed for the World Wide Web. By using this set of colors, you minimize the risk of unwanted dithering in your images.

Dithering occurs when a certain color cannot be represented in a solid form. Instead, alternating pixels of similar colors are used to create a dithered form of the original color. This results in rough-looking images, often with jagged edges and fuzzy colors.

Most cases of dithering result because a high-color image is being displayed on a 256 color system, which is what often occurs on the Internet. You may design an image using 16 million colors, and then save it as a 256 color gif image, but the dithering problem will still occur.

The reason for this lies within your web browser and your operating system. You would think that a 256 color image would display properly on a 256 color system, but that is not always the case. Microsoft Windows reserves 40 of those colors for its own use, leaving only 216 empty spaces in the color palette.

By creating graphics that use only these 216 colors, you can be relatively sure that your images won't dither on other machines. That is why this set of colors is called the safety palette; by using it, your images should be safe from the effects of dithering.

By now you are probably wondering exactly which colors belong to the safety palette. The RGB value for any color in the safety palette will be composed of three numbers, all of which must be one of the following: 0, 51, 102, 153, 204, or 255. In the six-digit hex format, each two-digit segment must be one of the following: 00, 33, 66, 99, CC, or FF. For example, the color represented by the RGB value of 0,51,153 is a shade of blue that belongs to the safety palette. The same color represented in hex would be 003399. Notice how each number in the RGB format, and each two-digit segment in the hex format, is one of the specified values. Another shade of blue, 0,50,150 in RGB, or 003296 in hex, does not belong to the safety palette, because not all of the numbers are valid.

The chart below shows a sample of each safety palette color. When you move the cursor over a color, the hex code for that color will be displayed in your browser's status bar. Users of Internet Explorer will also be able to see the hex code in a tooltip, by holding the cursor over a color for a few seconds.

Safety Color Palette

Now that you have seen all of the safety palette colors, you should try to use them in your graphics. By doing so, you will protect your images from dithering on virtually any 256 color system. Even if you design your graphics using millions of colors, keep in mind that many other viewers on the Internet will not see them as you intended. If you want your images to look properly for everyone, use the safety color palette.