• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Web Design Techniques > Working with Web-Safe Colors

Working with Web-Safe Colors

Color is an essential element of most designs. While using color in print media is relatively easy and uncomplicated, this unfortunately doesn’t hold true for Web design. There are numerous pitfalls in using color online: For instance, you have to be prepared to compensate for different color depths on different monitors as well as color shifts between different browsers and different platforms. Problems like these make it a little bit of a challenge to get your Web site to look equally good on every platform. Knowing why color doesn’t always equal color, and how you can fix the most common problems is essential to achieving consistently great-looking designs.

Color Depth

As I’ve mentioned elsewhere, the most common color problems occur because different monitors offer different color depths. But what does “color depth” actually mean? To answer this question, it helps to look at how a computer stores images in memory.

How Computers Store Information

All computers save information as bits. A bit is the smallest unit of data that a computer recognizes; it means either on or off (or the mathematical equivalent: 1 or 0). All the information on your computer, from software to photographic images, is saved on the hard drive or stored in memory (RAM) in the form of bits. Because you can’t do much with just one instance of on or off, a number of bits are combined to form a byte. Eight bits equal one byte, which is able to represent—in different combinations of 1 and 0—up to 16 numbers. This hexadecimal system is represented by the numbers 0 through 9 and the letters A through F.

Color Depth of an Image

To save an image, you have to store the vertical and horizontal position of the pixels as well as their color value. Most image formats use a color depth of 24 bits (or hexadecimal FFFFFF), which allows you to represent 16,777,216 color values (256 levels for each color channel).

Not every monitor or graphics card can display so many colors, so color values may be rounded up or down (when necessary) to the closest equivalent. This causes the color displayed on the monitor to shift. Many graphics software packages try to compensate for this error by using a technique called “dithering” (see the chapter on GIF). But dithering can’t change the fact that an image that looked great on your monitor may look terrible on someone else’s. The monitor dithering has no permanent effect on the image; the information in the file is still stored with 24 bits of color information, and as soon as you view the image with a graphics card that is capable of displaying all those colors, you’ll see the photo in its original quality.

ValueBinary CodeHexadecimal Code

Web-Safe Color Palette

The Web-safe Color palette is a collection of colors that look the same on any monitor that’s capable of displaying 256 colors—basically on every computer monitor. There was a time when 16-color monitors were considered the latest in technology, but don’t worry, most of those machines are safely tucked away in museums. Even so, while the latest surveys show that most home-computer users now have monitors and video boards capable of displaying at least 16-bit color (which equals 65,536 colors), quite a few monitors in the corporate world are still limited to 256 colors. If you expect most of your Web site visitors to be home users, you can build images using thousands of colors, but if you expect some users to access your site from work, you should use as many colors as possible from the Web-safe Color palette.

The Web-safe Color palette actually consists of only 216 colors; the remaining 40 are reserved for the operating system (Windows). Those 216 colors are evenly divided and assigned to different shades and intensities of red, green, and blue. In addition, the palette uses a linear system in which every color value is increased or decreased by 20 percent; this was done largely for convenience, since the resulting hexadecimal values (00, 33, 66, 99, CC, and FF) are easy for programmers to remember. So if you want to create an element in GoLive using a Web-safe color, just use these hexadecimal values (in any combination) and you are sure to get a Web-safe color that won’t dither on 256-color monitors.

The linear division of the color space means that the Web-safe Color palette doesn’t give you much choice if you want to create, for example, shades of brown or skin tones. The palette would have been much more useful if it had been modeled after the color perception of the human eye; there’s no reason not to include different color values, but unfortunately this wasn’t considered important enough at the time the palette was devised.

Monitor Color Depth

Technically, a computer monitor can display far more than 16 million colors; it’s simply a question of how much VRAM (Video RAM) is installed in the graphics card—it also depends on the video card’s ability to handle more than 24-bit display. Since the human eye can’t distinguish this kind of subtlety anyway, 32-bit video cards use the additional 8 bits to address a transparency channel, also known as Alpha channel.

1 Bit2
2 Bit4
4 Bit16
8 Bit256
16 Bit65,536
24 Bit16,777,216
32 Bit4,294,967,296

The Web-Safe Color Palette Seen As A Cube

You often see the Web-safe Color palette presented as a cube in which red, green, and blue are placed at three opposite corners. Cyan, magenta, and yellow are dropped in between those colors, and white and black take up the remaining two corners. Most books show the cube in six slices, which, in my opinion, isn’t very helpful, because it’s very difficult to see the relation of the colors. If you pick a color and want to find a related color, you have to locate it in another slice. Even though this isn’t very difficult, it isn’t natural either, and it takes up a lot of time.

I wanted to find a way of showing the relationship that each color has to its neighbor, as well as making it easy to find colors with the same quality (light, dark, pastel, and so on). While searching for this new color organization (which I did back in 1997; I published the first edition of this book in 1998), I realized that the best solution was basically to dismantle the color cube rather than slice it. This approach has many advantages: First, it shows the whole spectrum with all the colors and their relationships. Second, it is sorted by brightness and luminance, which makes it a breeze to pick, for instance, two pastel colors with the same quality. I call this the Unwrapped Color Cube chart.

The Web color table, shown as a cube. The eight corners of the cube are occupied as follows:Three corners show the basic colors Red, Green and Blue. Their complementary colors Cyan, Magenta and Yellow are placed on opposite corners.-Black and White occupy the remaining two corners. My preferred Web color chart, beginning on page 156, “unwraps” the traditional Web color cube. On the first spread I show the shell, or outer mantle, of the cube, and the next two spreads show the inner, deeper levels of the cube. To find related colors, simply identify the colors in corresponding positions in each chart. Each color field is identified by the hexadecimal and RGB values, as well as by a Web color number (0 to 215). Since these charts were printed in CMYK, they will unfortunately differ from what you see onscreen.

The Web-Safe Color Cube Shown In Slices

Choose the colors for your design from this table and enter the color values into the program. In Photoshop, you can select the Only Web Colors option in the Color Picker. You can also use the following table:

Hexadecimalin %in RGB
00 =0%0
33 =20%51
66 =40%102
99 =60%153
CC =80%204
FF =100%255

The hexadecimal color value “CC FF 33” translates to red = 80%, green = 100% and blue = 20%. In an RGB color picker, values are divided into 256 steps, so accordingly, you would need to enter red = 204, green = 255 and blue = 51.

The color fields in this table with white outlines represent shades of gray.

THE UNWRAPPED COLOR CUBE© Here is the traditional Web color cube “unwrapped.” This is the first mantle of the cube, and inner mantles are on the following pages. Color Chart © copyright Michael Baumgardt Reprint only with permission.

Working With web Colors

When designing a Web site, it’s important to work with as many Web-safe colors as possible; this will help you avoid any problems later. This is rather simple when you’re designing and colorizing elements, because all you need to do is use the Only Web Colors option in Photoshop’s Color Picker. And if you forget to do this, you can always later convert to a Web-safe color when you optimize and export GIF images in the Save For Web dialog box. If, for some reason, you need to use a non-Web-safe color and you want to make sure that it looks good on 256-color monitors, here are a few ways to do so:

Changing to a Web-safe color before exporting

If you have a solid-colored area that you want to change into a Web-safe color, use the Paint Bucket tool. Set Tolerance to 0 and pick a foreground color in the toolbox, and then click on the area you would like to fill. That’s it! Well, it would be if you wanted to fill a rectangle or other shape that had only vertical and horizontal edges. More likely, however, you’ll want to fill an area with anti-aliased edges, which means that there will be intermediate colors at the edges to blend the element with the background. You can adjust those pixels, too, by checking the Anti-aliased box in the Paint Bucket options bar. In addition, consider whether the shape that you are filling is on its own layer (with transparency at the edges) or if it is part of a layer with adjacent pixels. If it shares the layer with other pixels, set the Tolerance to 0 and check the Anti-aliased option. The Contiguous option is important if you only want to fill part of a layer.Then there is the Lock transparent pixels option in the Layers palette, which you also need to take into consideration when you want to fill a layer that has adjacent transparency.

 Fill part of an elementFill entire layerFill all the layers
Layer 2

Lock & Contiguous


All layers (no Lock!)

Layer 1

Lock & Contiguous


All layers (no Lock!)




All layers

To make it a bit easier to understand, I created a little overview that shows you different scenarios. Here are the options that need to be selected (Important: Tolerance should be set to 0 and Anti-aliased should be selected throughout this process, so they’re not listed, but are assumed). If you wanted to fill only part of an element that happens to be on its own layer, you can see from the overview (first column) that the Lock option in the Layers palette needs to be activated, as well as the Contiguous option in the options bar. And, of course, you have to select the right layer in the Layers palette before using the Paint Bucket tool.

If you look in the “Fill all layers” column, you will notice that the All layers option doesn’t produce the expected result. The reason for this is simply that when you click with the Paint Bucket on the area that you would like to color, Photoshop fills the entire selected area, but any layers above the currently selected layer will still cover the underlying layer. Honestly, this makes no sense to me; it would be better if the appropriate color would automatically fill all the layers, but what can you do?

It is not always possible to use the Paint Bucket to change a color; sometimes there are too many areas to be changed—for example, if text is rendered, every letter has to be changed individually. In that case, choose Image > Adjustments > Replace Color. This command, however, will only work with the selected layer.

Changing to a Web-safe color when exporting

It’s not always necessary to make a color a Web-safe color before you optimize it as GIF in the Save For Web dialog box. Since GIF works with a color look-up table, all the colors in the image are listed and you can easily convert them to Web-safe hues by selecting them and then clicking on the Snap button (with the cube icon) at the bottom of the Color Table palette. Keep in mind, however, that this method is specifically to convert colors to the Web-safe palette. If you would like to change a color to a shade that’s outside of this palette, it’s better to use the Paint Bucket tool or the Fill command.

This is the document that was used for the overview (on the left). Layer 1 and Layer 2 have a slightly different drop shadow, to set them apart.

Clicking on the Snap button at the bottom of the Color Table palette converts a selected color to the nearest Web-safe equivalent.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint