Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Web-Safe (Browser-Safe) Colors

The colors you see on your monitor are measured in the number of data bits that your video card can render. (This is also known as number of colors.) The least-common denominator user has an 8-bit, or 256-color, capable monitor.

The browser, however, has its own reduced palette of 216 colors, which is known as the web-safe color palette. A thorough understanding of color depth and web-safe color is essential when you create art for web pages. Eventually, web-safe color will follow the dinosaurs' fate as more systems support 32-bit color depth, or millions of colors.

Of the 256 colors in the 8-bit minimum system a monitor displays, 40 colors are not common on both Windows and Macintosh systems. These colors are subtracted from the 256, which leaves 216 colors common to both platforms. This allows you to safely use any color from this 216 color palette, insuring that your color looks true when viewed on different platforms using different browsers without any dithering.

To simulate a color that's not represented in the monitor's color spectrum, a computer uses dithering. It does this by mixing two or more colors together to create the missing color.

It is especially helpful to use the browser-safe color palette when you want to fill art with flat or solid color. Logos, cartoons, and drawings can be susceptible to ugly dithering when the browser-safe palette is not used. This is becoming less of an issue with the proliferation of systems that have 24- and 32-bit capabilities. Although you are welcome to use any colors that your system can handle, browser-safe colors are guaranteed not to dither. If you stick to these 216 colors, they will look the way you want them to (most of the time).

NOTE

Even browser-safe colors can dither on a 16-bit monitor because some of the web-safe colors are not in the 16-bit gamut. Also, don't forget that America Online (AOL) browsers, when viewing pages through a dialup connection, are set to recompress images on-the-fly and, no matter how "safe" you think it is, AOL might distort the image.

In general, the browser-safe color palette of 216 colors is employed when you are creating anything with flat colors. In the case of photographic images, however, the Export palette needs to be a 24-bit palette, not an 8-bit palette. Usually, photographs are exported using the jpeg format and are dithered by the browser if necessary.

In Fireworks, the web-safe palette can be accessed in a couple of ways:

  • By default, the Color box pop-up window that displays when you click any Color Cube in the program is set to the web-safe palette, which contains the web-safe palette and several colors that duplicate web-safe swatches.

  • Holding down the Shift key when you select colors using the Eyedropper tool causes the tool to convert colors to web-safe colors as you sample them.

Web Dither

The Fill panel contains a category called web dither. With this feature, you can convert any non-web-safe color into a color pattern of web-safe colors that closely matches the desired color.

  • + Share This
  • 🔖 Save To Your Account