Using Web Color

Using Web Color

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:

0 85 210
77 226 33
255 223 34
236 49 210

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%

Using Color Names
One way to specify color is by using a set of predefined color names.

The most intuitive way to call a color in a Web page is by its name: “red” or “wheat,” for example. The color names date back to old UNIX standards.

When you use a color name as an attribute, make sure you surround it with quotation marks to make it HTML and XML compliant, but be sure you’re nesting single and double quotes correctly. For example, this uses inline CSS to set a background color value of “black” and a text color of “aqua.” Note the use of nested single and double quote marks:

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.
This is a td element with color and background colors set via CSS. If you don’t see the effect, your browser isn’t CSS-compliant.

This chart shows the standard names. Click on the alphabet example beside each color name to turn the background the specified color.

Color Click Sample Text
aliceblue AaBbCcDdEeFfGg0123456789
antiquewhite AaBbCcDdEeFfGg0123456789
aqua AaBbCcDdEeFfGg0123456789
aquamarine AaBbCcDdEeFfGg0123456789
azure AaBbCcDdEeFfGg0123456789
beige AaBbCcDdEeFfGg0123456789
bisque AaBbCcDdEeFfGg0123456789
black AaBbCcDdEeFfGg0123456789
blanchedalmond AaBbCcDdEeFfGg0123456789
blue AaBbCcDdEeFfGg0123456789
blueviolet AaBbCcDdEeFfGg0123456789
brown AaBbCcDdEeFfGg0123456789
burlywood AaBbCcDdEeFfGg0123456789
cadetblue AaBbCcDdEeFfGg0123456789
chartreuse AaBbCcDdEeFfGg0123456789
chocolate AaBbCcDdEeFfGg0123456789
coral AaBbCcDdEeFfGg0123456789
cornflowerblue AaBbCcDdEeFfGg0123456789
cornsilk AaBbCcDdEeFfGg0123456789
crimson AaBbCcDdEeFfGg0123456789
cyan AaBbCcDdEeFfGg0123456789
darkblue AaBbCcDdEeFfGg0123456789
darkcyan AaBbCcDdEeFfGg0123456789
darkgoldenrod AaBbCcDdEeFfGg0123456789
darkgray AaBbCcDdEeFfGg0123456789
darkgreen AaBbCcDdEeFfGg0123456789
darkkhaki AaBbCcDdEeFfGg0123456789
darkmagenta AaBbCcDdEeFfGg0123456789
darkolivegreen AaBbCcDdEeFfGg0123456789
darkorange AaBbCcDdEeFfGg0123456789
darkorchid AaBbCcDdEeFfGg0123456789
darkred AaBbCcDdEeFfGg0123456789
darksalmon AaBbCcDdEeFfGg0123456789
darkseagreen AaBbCcDdEeFfGg0123456789
darkslateblue AaBbCcDdEeFfGg0123456789
darkslategray AaBbCcDdEeFfGg0123456789
darkturquoise AaBbCcDdEeFfGg0123456789
darkviolet AaBbCcDdEeFfGg0123456789
deeppink AaBbCcDdEeFfGg0123456789
deepskyblue AaBbCcDdEeFfGg0123456789
dimgray AaBbCcDdEeFfGg0123456789
dodgerblue AaBbCcDdEeFfGg0123456789
firebrick AaBbCcDdEeFfGg0123456789
floralwhite AaBbCcDdEeFfGg0123456789
forestgreen AaBbCcDdEeFfGg0123456789
fuchsia AaBbCcDdEeFfGg0123456789
gainsboro AaBbCcDdEeFfGg0123456789
ghostwhite AaBbCcDdEeFfGg0123456789
gold AaBbCcDdEeFfGg0123456789
goldenrod AaBbCcDdEeFfGg0123456789
gray AaBbCcDdEeFfGg0123456789
green AaBbCcDdEeFfGg0123456789
greenyellow AaBbCcDdEeFfGg0123456789
honeydew AaBbCcDdEeFfGg0123456789
hotpink AaBbCcDdEeFfGg0123456789
indianred AaBbCcDdEeFfGg0123456789
indigo AaBbCcDdEeFfGg0123456789
ivory AaBbCcDdEeFfGg0123456789
khaki AaBbCcDdEeFfGg0123456789
lavender AaBbCcDdEeFfGg0123456789
lavenderblush AaBbCcDdEeFfGg0123456789
lawngreen AaBbCcDdEeFfGg0123456789
lemonchiffon AaBbCcDdEeFfGg0123456789
lightblue AaBbCcDdEeFfGg0123456789
lightcoral AaBbCcDdEeFfGg0123456789
lightcyan AaBbCcDdEeFfGg0123456789
lightgoldenrodyellow AaBbCcDdEeFfGg0123456789
lightgreen AaBbCcDdEeFfGg0123456789
lightgrey AaBbCcDdEeFfGg0123456789
lightpink AaBbCcDdEeFfGg0123456789
lightsalmon AaBbCcDdEeFfGg0123456789
lightseagreen AaBbCcDdEeFfGg0123456789
lightskyblue AaBbCcDdEeFfGg0123456789
lightslategray AaBbCcDdEeFfGg0123456789
lightsteelblue AaBbCcDdEeFfGg0123456789
lightyellow AaBbCcDdEeFfGg0123456789
lime AaBbCcDdEeFfGg0123456789
limegreen AaBbCcDdEeFfGg0123456789
linen AaBbCcDdEeFfGg0123456789
magenta AaBbCcDdEeFfGg0123456789
maroon AaBbCcDdEeFfGg0123456789
mediumaquamarine AaBbCcDdEeFfGg0123456789
mediumblue AaBbCcDdEeFfGg0123456789
mediumorchid AaBbCcDdEeFfGg0123456789
mediumpurple AaBbCcDdEeFfGg0123456789
mediumseagreen AaBbCcDdEeFfGg0123456789
mediumslateblue AaBbCcDdEeFfGg0123456789
mediumspringgreen AaBbCcDdEeFfGg0123456789
mediumturquoise AaBbCcDdEeFfGg0123456789
mediumvioletred AaBbCcDdEeFfGg0123456789
midnightblue AaBbCcDdEeFfGg0123456789
mintcream AaBbCcDdEeFfGg0123456789
mistyrose AaBbCcDdEeFfGg0123456789
moccasin AaBbCcDdEeFfGg0123456789
navajowhite AaBbCcDdEeFfGg0123456789
navy AaBbCcDdEeFfGg0123456789
oldlace AaBbCcDdEeFfGg0123456789
olive AaBbCcDdEeFfGg0123456789
olivedrab AaBbCcDdEeFfGg0123456789
orange AaBbCcDdEeFfGg0123456789
orangered AaBbCcDdEeFfGg0123456789
orchid AaBbCcDdEeFfGg0123456789
palegoldenrod AaBbCcDdEeFfGg0123456789
palegreen AaBbCcDdEeFfGg0123456789
paleturquoise AaBbCcDdEeFfGg0123456789
palevioletred AaBbCcDdEeFfGg0123456789
papayawhip AaBbCcDdEeFfGg0123456789
peachpuff AaBbCcDdEeFfGg0123456789
peru AaBbCcDdEeFfGg0123456789
pink AaBbCcDdEeFfGg0123456789
plum AaBbCcDdEeFfGg0123456789
powderblue AaBbCcDdEeFfGg0123456789
purple AaBbCcDdEeFfGg0123456789
red AaBbCcDdEeFfGg0123456789
rosybrown AaBbCcDdEeFfGg0123456789
royalblue AaBbCcDdEeFfGg0123456789
salmon AaBbCcDdEeFfGg0123456789
sandybrown AaBbCcDdEeFfGg0123456789
seagreen AaBbCcDdEeFfGg0123456789
seashell AaBbCcDdEeFfGg0123456789
sienna AaBbCcDdEeFfGg0123456789
silver AaBbCcDdEeFfGg0123456789
skyblue AaBbCcDdEeFfGg0123456789
slateblue AaBbCcDdEeFfGg0123456789
slategray AaBbCcDdEeFfGg0123456789
snow AaBbCcDdEeFfGg0123456789
springgreen AaBbCcDdEeFfGg0123456789
steelblue AaBbCcDdEeFfGg0123456789
tan AaBbCcDdEeFfGg0123456789
teal AaBbCcDdEeFfGg0123456789
thistle AaBbCcDdEeFfGg0123456789
tomato AaBbCcDdEeFfGg0123456789
turquoise AaBbCcDdEeFfGg0123456789
violet AaBbCcDdEeFfGg0123456789
wheat AaBbCcDdEeFfGg0123456789
white AaBbCcDdEeFfGg0123456789
whitesmoke AaBbCcDdEeFfGg0123456789
yellow AaBbCcDdEeFfGg0123456789
yellowgreen AaBbCcDdEeFfGg0123456789

Click here to go to HTML Basics: Choosing a Color

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:

Base 10 0 1 10 12 15 16 17 26 31 32 153 159 160 189 204 255
Hexadecimal 0 1 A C F 10 11 1A 1F 20 99 9F A0 BD CC FF

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.
This is a td 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.
This is a td 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.
This is a td 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:

mac color setting

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

windows monitor settings

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.


Share the Post: