Developer

Make the right color choices

Before you make color choices for your Web site, you should make a plan. Here's how to plan your color scheme.

This article originally appeared as a Design and Usability Tactics e-newsletter.

By Jim Kukral

Let's face it, not everyone has an eye for color. If you're one of those people, you need to either rely on a professional designer's opinion, or learn how to pick and use color yourself. Another alternative is to use the following color scheme guide and play it safe.

Plan your color scheme

1. Choose a palette
A palette usually consists of one or two base primary colors, and a few secondary colors that will be used for accent. The palette will act as the main inspiration for your project.

Start by finding your primary color(s). If you're working on a brand piece for your company or client, you can find your primary color(s) by examining the corporate logo or printed collateral material. If necessary, scan a printed brochure and use the Photoshop "eyedropper" tool to select the color for an exact match.

Your primary colors will be used in the majority of your design.

2. How to choose a palette
When designing a project that is completely independent of the company brand, you'll need to pull color choices out of thin air. That's when things can get tricky.

Ask yourself: "What am I trying to accomplish?" For example, if you're building a site about surfing, you'll probably want to choose shades of blue similar to the ocean.

But how do you choose a color for a company intranet? Choose a few colors at random, print out some examples, and ask your fellow employees which ones they like the most over lunch. After all, they're the ones who will be looking at it all day.

After they pick their favorites, set those as the primary colors and proceed to step 3.

3. Select secondary colors
Once you have your primary colors, select your secondary colors by using shades of the primary colors, or adjusting their saturation/hue to similar tones. Another designers' trick is to invert the color to the exact opposite using your favorite imaging software. Remember that the point of a secondary color is to complement, not distract.

Use secondary colors minimally, and only to accent the primary colors. A good place to use secondary colors is in copy headlines, or to highlight words or titles on the page. A secondary color, if used effectively, can draw a user's eye to pieces of important information.

4. Watch for symbolism
Colors are deeply associated with feelings and interpretations on just about everything we see. Therefore, make sure your color choice isn't "saying" the wrong thing. If you choose color combinations that are fresh and unique, you won't have a problem.

5. Get automated help
Finally, you can use a tool such as The Color Schemer, which helps you create color schemes with the click of a button based upon one color selection.

Now you're on your way to coloring within the lines of proper color usability. Good luck, and happy coloring!

Jim Kukral has spent the last seven years working in the trenches of Web design, development, and usability for Fortune 500 clients as well as mom-and-pop companies.

Editor's Picks