Ian-Albert.com Contact Me
( Home )-( Graphics and Color)-( Web-safe Colors )
Strip illustration

Older computers often used 256-color displays. Any color could be displayed, but only 256 unique colors could be shown at the same time. This set of colors is known as a color palette. It works somewhat like paint-by-numbers where you can only have a limited number of paint colors. When a web browser tries to show an image on these systems it allocates colors in the system palette to accomodate the image. If there are several images on the same page, each with its own unique set of colors, the system may not be able to allocate enough colors to display them all correctly. In this case, the system may use different colors to show an image than what was intended. This can make the image hard to see.

To alleviate this problem, web designers developed a web-safe palette. This set of 216 colors contains every combination of red, green, and blue at 6 different levels of intensity (6×6×6=216). If every image in a web page uses only these colors there will be no color conflicts and everything will look the way it was meant to.

Websafe palette
The web-safe colors.

Many designers (myself included) believe the web-safe palette to be obselete. Most computers today use 16-bit or 32-bit color displays, which are capable of representing any color without a palette. Showing several different images together causes no problems anymore. Meanwhile, people taught to use the web-safe palette are unnecessarily restricting their design options. Likewise, it reduces image quality, as shown below.

Original gradient
Original red-to-purple gradient.
Websafe gradient
Gradient converted to indexed color using the web-safe color palette. Of the 216 available colors, 20 were used. If you look closely, you'll see speckles (known as dithering). File size is 7,448 bytes.
Perceptual palette gradient
Same gradient converted using perceptual color selection. This image also uses 20 unique colors, but they are chosen from the full gamut of RGB colors. Note how much closer it looks to the original with nearly invisible dithering. The file size is only 4,073 bytes. When indexed colors are closer to the originals dithering is reduced, which helps files compress better.

That said, the web-safe palette is still relevant for those designing web pages for older computers. Schools, for instance, sometimes can't afford new computers and must use older systems. For the majority of sites, however, people have fairly recent machines and so any number of colors can be used in images.

Recent comments
Be the first to leave a comment!
Contact Me