Using 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 content 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. And don't use text the same color as the background as hidden test on the page in a trick to get good ranking in the search engines. The search engines are wise to this trick.

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 the rest of the colors in your GIF images. It is possible to switch palettes for different images on the page, but this is not advisable. When using GIF images, always save them to the Web palette. Most graphic editors have this option available when you switch your image to GIF.

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 palette. With Photoshop, you can select this palette 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 everything is in the default GIF palette.
Save photographic 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.)

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.

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.

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).

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.

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 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 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.

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

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 symbolizes purity, brightness, innocence. White against black on a page provides a stark contrast for a message.

Using Graphic Color Effectively

True Colors