Chapter 22. Designing Graphics with the Web Palette

The web palette is a set of 216 colors that will not dither on Macs or PCs and is built into all the major browsers (it is discussed in more detail in Chapter 3). When a browser is running on a computer with an 8-bit monitor (capable of displaying only 256 colors at a time), the browser refers to its internal web palette to make up the colors on the page.

If the browser is running on a 24-bit display, the web palette does not come into effect and all colors are displayed accurately. See When Not to Worry About the Web Palette for other instances when the web palette does not apply.

Most often, remapping images to the web palette in the browser results in undesirable dithering. Not only that, sometimes flat colors shift to the nearest web-safe colors without dithering. The algorithm for deciding which colors to shift and which to dither (as well as choosing where to shift) differs depending on the browser brand and version.

All of this shifting and dithering means unpredictable image quality on 8-bit monitors. But there is one thing that is predictable—the web palette. If you use colors from the web palette in the image in the first place, you have the advantage of controlling how the image appears on 8-bit monitors. It requires a little extra effort and an adjustment to a limited color choice, but the payoff is that you, not the browser, control whether and how the image dithers.

There are two opportunities to apply the web ...

Get Web Design in a Nutshell, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.