Choosing your Web Color Palette

Choosing a web color palette is one of the first steps most web designers make when starting a new project. Hand-in-hand with layout, it is probably one of the most important design choices you will make. Colors evoke all kinds of associations and using colors well can create a synergy on your site that visitors will find attractive. Your web color palette can make or break your website.

One of the tools you can use in choosing your web color palette is the color wheel. Most designers are probably already familiar with the color wheel to some degree. For web designers coming from a more technical background with less focus on design elements and color theory, it may be no more than a distant memory from junior high art class. The color wheel is often used as an aid while discussing color theory and can be valuable tool in selecting your web color palette.

Web designers are used to dealing with red, green, and blue components in color. It can be a confusing transition to working with a color wheel to determine a web color palette since the wheel is based on red, yellow, and blue, also called the primary colors. In addition, the color wheel contains secondary colors, the product of mixing two primary colors. The secondary colors are placed halfway between the two primary colors from which they are formed.

While in theory the color wheel can be extended indefinitely by continuing to mix two adjacent colors and putting the product between the two, in practice most frequently it is only extended to include tertiary colors. Tertiary colors are the product of a primary color and a secondary color, placed between the two on the wheel.

Constructing a color wheel is a simplistic exercise, but using one to develop a web color palette requires an understanding of color relationships that the wheel demonstrates. The color wheel is divided in half, with warm colors like red, orange, and yellow on one side and cool colors including blue, green, and purple on the other. Neutral colors like browns and grays are not depicted on the color wheel, however. (And neither are black and white.)

Color relationships can be used to evoke different feelings. When choosing your web color palette, be aware of the the type of relationship your colors have to each other. A complementary relationship exists between colors directly opposite each other on the color wheel. While they may be a great, great, vibrant, high-energy choice for a children's site, they can also be visually exhausting.

A contrasting relationship exists between colors separated by three sections on a color wheel that includes tertiary colors. For instance purple and orange or red and blue are contrasting colors. Using contrasting colors in your web color palette can create a high energy site that stands out without the visually jarring effects sometimes associated with complementary colors.

Analogous colors are those situated right next to each other on the color wheel. Analogous colors are a good choice for a muted web color palette as there is very little contrast between them. For even less contrast, a monochromatic palette can be used, where the hue of the color is the same and the tint varies.

Developing a strong web color palette using color theory and a simple color wheel can be difficult at first, but with practice it becomes easier. It is a mechanical process, however, and ultimately the designer is responsible for creating a site that is appealing to the target audience. Using bright complementary colors can work well for an on-line toy store but probably would be less effective for a web-based bridal boutique.

Not all designers are comfortable with color theory and the process of selecting a web color palette by themselves. There are color theory resources on the web that help to explain the process and most introductory art books also cover the topic. For designers who are stronger in layout and other technical areas, some software packages are available to help with color selection.

However you choose your web color palette, either manually with a color wheel or as a pre-assembled selection in a software package, it's important to understand who your target audience is. The most important choice you can make is choosing colors that will appeal to your visitors.

top