Using a Web-Safe Palette and Hexadecimal Colors

If you’ve tinkered with HTML, then you’ve probably at least heard of hexadecimal colors. Photoshop’s Web-safe palette is a set of 216 colors that should, theoretically, be displayed by any browser, regardless of whether the user’s video card displays 256 hues, 16.7 million, or something in between. Using only these Web-safe colors is a way to ensure that your image will be represented without dithering in any browser. Of course, who views Web pages on a display using only 256 colors these days? Haven’t all computers been furnished with video cards offering a minimum of full 24-bit, 16.7-million-color images for ages and ages and ages? Well, not exactly. Here are some instances when you might be working with 256-color images:
- You’re using GIFs. Oops! GIFs always have 256 or fewer colors, even when you’re displaying them on a full-color monitor.
- A visitor is using a computer on which resolution is more important than the number of colors. Users who don’t edit graphics may need 1600-x-1200-pixel resolution on their large-screen displays and not care that their older video cards offer only 256 colors at that resolution.
- Your visitor is using a PDA, Web-capable cell phone, or some other device that has an LCD display that doesn’t support more than 256 different shades. If your Web page needs to reach these people, you may need to consider a Web-safe palette for at least some of your images.

In all of these cases, you may need to use the Web-safe palette features to optimize your colors. If you’re going to make a wholesale conversion of the colors in an image to a Web-safe palette, you’re better off using the Save for Web feature, which is automated and provides visual feedback of your results.

Selecting individual Web-safe colors
Photoshop lets you select individual colors based on their Web-safeness. You can do that two ways:
- Access the Adobe Color Picker by double-clicking the Foreground or Background color box in the Tools palette. Select the Only Web Colors check box, as shown in Figure 1-5.
Now, the Color Picker displays only Web-safe colors, and you can choose any of them. If you don’t select the Only Web Colors check box, the Adobe Color Picker still lets you know when you’ve selected a nonsafe color. A small cube appears above the selected color patch in the dialog box (to the left of the Custom button).
- In the Color palette, choose Make Ramp Web Safe from the palette options menu. You can also select Web Color Sliders from the same menu. When you select either option, the colors shown in the color bar and/or selected by the color sliders are Web safe. In the case of the sliders, the sliders automatically snap to a value that is Web safe and do not allow the selecting of intermediate values.

So what are hexadecimal colors?
Hexadecimal colors are simply a way of representing hues in the notation used by computer programmers. Hexadecimal values are calculated by using the digits 0 to 9 and the letters A through F. Fortunately, you don’t need to bother with the math. You just need to know that a hex value from 00 (no color) to FF (maximum color) represents the 256 shades of red, green, and blue. For example, a value of F0306F might represent a deep rose color. This cryptic value can be broken into three parts: Red — F0 (240 in decimal); Green — 30 (230 in decimal); and Blue — 6F (111 in decimal). The hex numbers are handy because you can enter them into HTML text to reproduce the color.

You can read the hexadecimal values of a selected color in the Info palette and use the same values to specify that color in any dialog box (such as the Adobe Color Picker) that accepts them. You are also likely to use these values when you use HTML or another markup language to specify the text and background colors on your Web page or Web site.