Using Graphic Color Effectively

The use of color is a major issue in good Web page design. Color can affect the viewer's mood and create a general feeling toward the context of your message. Lime green might work for a teen-age audience, but a businessperson might prefer a type of "executive blue". See competitor sites for the colors they use. If there is a lot of context in the form of text on the page, you want to avoid bright colors and high contrast - which make the page hard to read. Do use enough contrast, though, for good readability. Don't use off-white or yellow text on a white background or dark gray text on black. If most of the message is in the graphics, you might want bright colors and animation to draw the user's eyes to these. Be careful that your link colors are correct for the background you use. You can set these from the BODY tag.

GIF images only support 8-bit, or 256 colors. The GIF image is always painted from a 256 color palette; that is, any 256 specific colors from the larger spectrum. Windows uses 20 colors for itself, other programs use another 20, which leaves only 216 in the palette for your GIF images.

True Colors

Here are several methods of keeping the colors of your page colors true on any system:

Use programs, such as Adobe Photoshop 4 and later, that can save a GIF graphic using the default Web pallette. With Photoshop, you can select this pallette when you convert the mode to Indexed. This isn't good enough for photographs, but works for clipart in most cases. If using a background, you'll need to fill this background in behind your image to avoid halos. If it's a textured background, you may not have enough colors available to save it in the Web palette (default 216 colors). Then try to save in JPG. (If you save without the default palette, various graphics on the page will have different palettes, which can cause the page loading to slow down as the palettes switch.)
When setting backgrounds or colors with HTML, use any two-digit combinations of 00,33,66,99,CC,or FF and you are safe; i.e. - background="#336699". This will insure evreything is in the default GIF palette.
Save images in the JPG format, which supports 16.7 million colors and generally results in smaller files. (This color spectrum is available only if the user's monitor supports them.)
GIF images have two advantages:
- You can identify a transparent color and save a graphic with a transparent background if you use GIF89a.
- You can create animations with GIFs. The files can quickly get large, however. In our design work, we try to use Flash and Javascript as much as possible for animations unless they are small.
Remember that when you convert an image to GIFs and JPGs you lose information. Always before converting to these save another copy in a lossless format such as PSD or TIFF.

What Colors to Use?

Here is an overview of when to use what color:

RED

Red reflects excitement, high energy, confrontational. It can indicate fire, heat, warning, anger, power, energy, revolution, passion, and love. Valentines are red, so is the blood.

PINK

This is a more feminine color and often use for advertising cosmetics, bath products, and perfumes. Generally you want a vibrant shade of pink so that it doesn't look cheap.

ORANGE

This color reflects joy, sunshine, friendship, autumn, and encouragement. Vibrant orange works well for kid's sites and toys. Softer tones (peach) are good for healthcare products and food products. The warmth of orange and brown encourages openness and dialog, and are useful colors for web sites to encourage dialog (see BROWN).

YELLOW

This color shows energy, sunshine, happiness, creativity, and is cheery. Sometimes the yellow can be very light and creamy. At other times you can bright yellow text against a black or dark background for any strong statement you want to make. Another idea is to use yellow as a fill color for a table with the text in black to contrast against it.

BROWN

This is an earth color that reflects fall, organic, outdoors, rustic, conservative. Because it often looks "dirty", the fashion industry avoids it. It also reflects a warmth, encouraging dialog and discussion, for example: http://www.christiancafe.com.

GREEN

Green is the color of money. It represents growth, environmentally friendly, fertility, stability, Spring, loyal, fresh, cool, and healing. Deep green represents elegance and is good for financial sites such as banks and saving.

BLUE

Blue represents the sky, sea, water, religious feeling, peace, faith, loyalty, wisdom, integrity, restful, and committed. It is a good color where the message is important, as it evokes trust and authority. The darker blues symbolize power, but are more approachable than black. Vibrant blues are dramatic and dynamic, while the quieter blues have a calming effect.

PURPLE

The deeper purples speak to royalty, power, nobility, spirituality, luxury. Vibrant purples speak to the future, imaging cutting edge technologies and art.

BLACK

Black is identified with elegance, classic, strong, powerful, sophisticated. Using black and white in photos or backgrounds not only saves loading time (in contrast with a color photo), but also lends a sense of drama. Often a single object (or several) in a photo is rendered in color against a black and white image to project a realism and make the object stand out.

WHITE

White symbolizes purity, brightness, innocence. White against black on a page provides a stark contrast for a message.