Many computer users view the Web in 256 color-mode (also known as 8-bit), because either their computers don’t have video cards that support more colors, or their computers are set to view only 256 colors. Each operating system, for example, Mac OS, Windows, or Windows 95/98 has its own fixed color palette that Web browsers use to reduce color information for 8-bit video cards. When people with 8-bit video cards view your Website, their browser converts the images to the palette used by their system by shifting the colors that you’ve created on your site to colors it uses in its fixed palette. Often this can greatly distort the color scheme you intended for your graphics.

There’s only one way to effectively avoid this problem – use a palette that is Browser Safe. Fortunately, all system palettes have 216 colors in common. All color monitors can display them and all browsers on all platforms will show each of these colors as is.

The Browser Safe Palette

These colors were chosen from a mathematical color cube based on multiplying six values of six colors (red, green, blue, cyan, magenta, and yellow). This is why the browser-safe palette is sometimes called the 6x6x6 palette. It’s also frequently called Netscape palette, Explorer palette, Color cube, Web color, and Web safe. Whenever you see these terms, it usually refers to the colors browsers impose on end-users viewing the Web on an 8-bit system.

If you design your Web graphics and color schemes with the Browser- safe color palette, your site will not be prone to unexpected color shifting or dithering (which usually looks like unwanted dots or speckles on artwork) on 8-bit systems. Look at these examples:

Follow these general guidelines to create Web color everyone will see as you intended:

Use browser-safe colors for text and backgrounds.
If you don’t use browser-safe colors when you select your site’s background and text colors, the end users’ browsers will convert the colors to browser-safe colors for them (if their systems have a 256 color limit). As a minimum, your color schemes will not display as you intended, and they might clash and look very ugly. Worse could be if a browser converts your text to the same color as the background thereby making your page unreadable!

Create graphics with browser-safe colors.
Artwork with a lot of solid color (i.e. line art, illustrations, cartoons, logos, etc.) are best suited to GIF files which display in 8-bit color. If you don’t use browser-safe colors with GIF graphics, the end users’ browsers will convert the colors to browser-safe colors for them (if their systems have a 256 color limit). This will cause the image to dither (ugly dots will appear in the solid colors of the image). The examples below were taken from an article by Lynda Weinman titled, Web Color Wizardry. The bottom logo was created with browser-safe colors but the top logo was not.

This image was created by Lynda Weinman.

Convert non-browser safe images to the Browser Safe Palette.
You may want to use a pre-made graphic (for example, a copyright free graphic that you have copied from the Internet) in your Web pages. If the graphic does not use browser safe colors, you should convert it to the browser safe palette. How do you know if your graphic is browser safe? In PhotoShop, choose:

Image >Mode >Indexed Color >Web Palette.

Observe the effect on your image’s colors -- if some of the original colors were not browser safe, they will have been replaced by different, browser safe colors.

Save photographic images as JPEGs.
JPEG does not use a special palette since it is not an 8-bit format. Therefore, if end users have a computer capable of displaying thousands or millions of colors, they will be able to see all the colors in the JPEG image. If their monitor is only able to display 8-bit color, their browser will apply their system’s palette to the JPEG image. However, unlike GIFs, a photographic-type JPEG image displayed in a forced palette of 256 colors can look quite good. The same image in GIF format looks worse. The best advice is to use JPEG format for images of photographic quality (or scanned images) and GIF format (made with browser safe colors) for graphics such as line art, illustrations, cartoons, animation, etc. which contain  flat, solid colors. The following example comes from the Using Browser Safe Colors Website.

Your site will look much better if you design it to display correctly over the widest range of operating systems and browsers. If you are going to pick your own colors for backgrounds, type, text, links, and illustrations, choose browser-safe colors to ensure that your graphics will display as you have intended. Understanding how browser safe colors and graphics relate is critical to making good Web-design decisions for two reasons: The predominant graphics file format, GIF which is 8-bit, and many viewers’ monitors are 8-bit as well.