Every Web site's got colors -- except maybe one for old-time photography. And why not? Unlike print, colors on the Web don't cost any more than black and white. The temptation is to use all the colors. This, however, is a bad idea. Your challenge as a Web site designer is to use colors wisely to create a Web site that conveys the appropriate mood without going overboard.

Develop Your Color Scheme

One of the first steps in Web site design is to determine the color scheme you're going to use. You don't have to decide right away which colors you're going to use where in your page layout, but knowing which colors you're going to use before you get too far along in your project will save you lots of headaches later.

The Color Wheel

You may remember the color wheel from art class or elsewhere. However, the color wheel is poorly understood by most people. Just so we're all on the same page, let's review the basics. Review the color wheel shown in Figure 2-2.

Figure 2-2: The color wheel.

Colors that go well together are:

• Complementary colors: Colors on opposite sides of the color wheel
• Triad or tertiary colors: Three colors that are equidistant from each other on the color wheel
• Analogous colors: Colors that are next to each other on the color wheel

Clearly, there are a lot of options here, and the colors that you select are largely based on your own subjectivity. The key is to pick something that looks good and is appropriate for your Web site.

Two of One, Several of the Other

Your color scheme should, in most cases, consist of two main colors, plus one or more second-level colors. This is not as complicated as it may sound. See Figure 2-3 for an example.

Figure 2-3: A sample color scheme.

Enlarge image

WindPower Sports uses a simple color scheme for its Web site. You can see the two main colors are blue and gray. The Web designer used blue for the company name and navigation links, with a darker blue for the category headers. Gray is used as a background color to show off the blue. Two secondary colors, red and yellow, emphasize important information such as the tag line and phone number.

Tools to Help You

A graphic designer can often help you to determine which colors work well together. When a graphic designer isn't available, you can use a handy online tool that generates color schemes automatically.

The Color Schemer Online, shown in Figure 2-4, provides color schemes based on a chosen color. The company also sells a software version that provides more functionality.

Figure 2-4: Color Schemer Online can help you develop your color scheme.

Enlarge image

So, What Works for My Site?

As mentioned previously, your color scheme should be appropriate for the type of site you're developing. Here are some guidelines to start your thought process:

• Sites for children (or child-related topics, like toys) typically use bright primary and secondary colors such as red, green, yellow, and blue.
• Professional and corporate sites tend to use more subdued shades of blue or green (such as navy blue or forest green), along with grays, tans, and beiges.
• Online store color schemes are all over the map and often relate to what they sell. For example, bath and beauty products can be presented in shades of pink and beige, or forest green and white. Clothes stores can be a bit bolder, using a bright navy blue or crimson red along with tan or gray.

Of course, all these color schemes should use plenty of soothing white or light gray, particularly for text-filled areas. Bold background colors often appear amateurish and distract from the intent of most Web sites. In the next section, find out how to use fonts to match the professional appearance of your colors.