raphics are a common way of bringing color into a Web site. Your create your images using your favorite editor, test your color palette on different browsers/platforms, and drop the images into your page. Optimizing Graphicsteaches you how to create high-impact, low-bandwidth images for Web use.

Code, be it through stylesheets or directly within HTML, lets you set display colors directly. Typically you’ll use a code-based solution for backgrounds and text colors. Remember, with CSS, you can do many of the text treatments you would once have done only with inserted graphics.

Color Palettes and GIFs
When you’re talking about palettes and graphic files, the term takes on a slightly different meaning from the design palette.

A palette is the set of colors that you are using. In your design palette, you’ll have maybe three or six colors, selected for the way they work with each other and with the content of your site. As you make your design palette decisions, you might be referring to a color wheel and selecting, say, a triad relationship plus three saturations of each.

As you move into production, this palette must convert to a palette that can be displayed by the computer—that is, it must be displayed using an RGB model, the model that monitors use. Each color will be represented by the amount of red, green, and blue it contains.

With indexed images, like GIFs, this process goes one step further. Each image is indexed to a table of 256 or fewer color palette. This type of palette is also known as a color lookup table. But wait, you say, I have only six colors! Ah, with variations of hue and saturation, not to mention anti-aliasing and edge smoothing and other techniques, your original six colors can quickly become dozens.

You’ll save each indexed image file along with its palette, aka, color lookup table. As you save, you can select the type of color lookup table you want to use: adaptive, Web safe, or system. In theory, Web safe contains only colors which are displayable in all browsers on all platforms. In general practice, we find the adaptive palette will give you the best results.

Specifying Color for the Web
You specify color using color names, hex values, or RGB values.

Web pages are viewed on a monitor, so the text and images used in a design will always be displayed in RGB (additive) color. RGB colors are specified by a value that describes the amount of red, green, and blue the color contains. Each primary element in a color can be represented as a number between 0 and 255, resulting in millions of possible combinations of red, green, and blue, like this:

There are four ways to represent these color values to a Web browser:

1. By color name, using a common lookup table;
2. By hexadecimal (hex) representation of colors, in which values are converted to base 16 where counting is done 0-9 then A-F.
3. By RGB value (CSS)
4. By RGB percentages (CSS)

For example, here’s some aqua text on a black background:

The same two colors can be described as:

• “aqua” and “black”
• #00ffff and #000000
• 00,255,255 and 0,0,0
• 0%,100%,100% and 0%,0%,0%

Specifying Color Using Hex Values
Another way to specify color is using hexadecimal values.

Hexadecimal (hex) representation of colors using a numerical system to describe the red, green, and blue values. Instead of using a 0 to 255 scale, the hex system converts the values to base 16 where counting is done 0-9 then A-F. The result is a six character value, ranging from #000000 (black) to #ffffff (white).

The chart below show how these hex values relate to our familiar base 10 system:

Hex colors are represented by a 2 digit value for each primary. It is possible to create the same millions of combinations of RGB using hex values.

A color that would be specified at R=0, G=85, B=210 is written in hexadecimal as 0055D2. The first two digits are the red value, the third and forth digits are the green value, and the last digits are the blue value.

You specify hex values by typing a # and the six digit value:

{color: #rrggbb}

For example, this code sets the foreground and background color for a table cell using inline CSS styles and hex values:

This is table cell element with color and background colors set via CSS. If you don’t see the effect, your browser isn’t CSS-compliant.

 

Using RGB Values
Another way to specify color is by the percentage of red, green, and blue it contains or by the numerical values of red, green, and blue it contains.

You can use either percentage values or numerical values of the red, green, and blue components to specify color. RGB values work with CSS, but will not work with the (soon to be obsolete anyway) font tag.

Fireworks image editing software converts the 0 to 255 values of raw RGB models into a scale of 0-100%, where 100% is equal to 255.

You specify RGB percentage values by typing the letters rgb, an open parenthesis, the three percentages, and a close parenthesis:

{color: rgb(0%, 10%, 60%)}

For example, this code sets the foreground and background color for a table cell using inline CSS styles and RGB percentages:

This is table cell element with color and background colors set via CSS. If you don’t see the effect, your browser isn’t CSS-compliant.

You can also specify RGB values as a decimal number. PhotoShop describes color as a decimal number. To use a decimal number value, type the letters rgb, an open parenthesis, the three numbers separated with a comma, and a close parenthesis, like this:

{color: rgb(255, 0, 0)}

For example, this code sets the foreground and background color for a table cell using inline CSS styles and RGB decimal values:

This is table cell element with color and background colors set via CSS. If you don’t see the effect, your browser isn’t CSS-compliant.

“Web-safe” Colors
“Web-safe” colors are the 216 colors that are supported by all browsers and platforms.

Web Safe colors are a subset of the millions of possible colors between 000000 (black) and FFFFFF (white). Some people prefer to use only these 216 colors on a Web page because they feel only these colors can accurately be represented across all platforms and browsers.

Web-safe colors have six possible RGB hex values: 00, 33, 66, 99, CC, and FF. These six values can combine to form 216 colors. If you remember these six hex values, it is easy to tell whether a color is “Web safe” or not. 6633CC is a Web safe color; and 05F211 is not. 66 and 33, and CC are acceptable values; 05, F2, and 11 are not.

Choosing Web safe colors by specifying a value such as FF3399, is not very intuitive, so most software uses a color palette like this one from Fireworks, which give a visual representation of the Web safe colors. Click on the color you want to use and the Web safe hex color value is selected. Some image editing software also has a “snap to” function that will allow you to mix any color and then it converts it to the nearest Web safe color from the 216 palette.

Viewer Variation
Your readers won’t see colors exactly as you do.

Getting “accurate” color on the web is difficult to impossible, as so many variations are involved. Your best bet is to select colors that work, then test them under as many different variations as possible. Even then, you’ll still have perception differences; biologically, different people perceive colors differently.

But testing can help a lot. First, try viewing your pages under a 256 color monitor. Although increasing numbers of readers have true-color monitors, this is one place where you will still find some variation.

To simulate a basic color monitor, change your monitor’s color setting to 256 colors. On a Macintosh, use the “Monitors and Sounds” control panel:

On a PC use the Setting/Control Panel/Display option, then select the Settings tab/256 color option:

If you look at your images in 256 color mode, you’ll get a better sense of what your readers are seeing.

Next, try viewing your page under both Netscape Navigator and Internet Explorer. There is a fairly even mix of these browsers in use, and each has some subtle variations.

Finally, if you have access to Macintosh, PC, and UNIX machines, try viewing your page on the different platforms. You will see system-to-system differences in rendering.