Website Design, Strategy, Social Networking, SEO, Susan Pomeroy, Ph.D.

Build a World-Class Color Palette for Your Website

by Susan Pomeroy

color palettes for web sites

Does your site feel boring, outdated, and passé… because you’re sick of its colors? Do you want to revamp it, but don’t know how to go about choosing new ones, or even whether to try?

It’s worth the effort. Your web site has ten seconds to make an impression. Color is is critical in that decisive moment. And color is not only how people get drawn into your site, it’s how they recognize and remember it to come back.

Color Provides the Visual Cues that Are Key to Having a Memorable Site

Do you need a designer’s help to get started picking a great color palette? No! Here’s a simple worksheet for choosing a complete color palette for your site.

1. What feeling(s) do you want your business to convey?

Express this in three to six words, for example, “energetic, trustworthy, interesting, straightforward.”

2. Does your business currently use distinctive colors?

Are there colors in your logo, business card, storefront, etc.—that “must” be used in your web site? Add it, or them, to your potential palette now. For example, let’s say my business uses a particular medium blue.

3. Warm vs. Cool

Think about warm colors (yellow-orange-red-brown) as opposed to cool colors (green -blue-indigo-violet-gray). For example, blue is a frequently used in business because it creates a sense of calm, trustworthiness, solidity and confidence. However, it is “cool” rather than warm. If one of your chosen adjectives was “warmth,” or if you have a “people” business, blue might be better used as an accent rather than a major component of your site.

Red, the quintessential “warm” color, conveys vitality, health and playfulness. But it also can imply a sense of urgency and alarm. Many colors are ambiguous in this way, with meanings and associations which vary from culture to culture. Keep in mind any strong color associations of your potential audience(s). An excellent short article by Rob Mills on how color communicates meaning is here.

My sample business already uses blue, which is a cool color. So I’m thinking that because I have the words “trustworthy” and “straightforward”, I’ll stick with a “cool” or possibly neutral palette.

4. Create a starting palette

Right now, choose a “draft” palette of 5 or 6 colors (a palette is a collection of 3 to eight colors that work well together). You can use swatches from the local paint store, colored pens, a scanned image which contains the colors you want, Photoshop—whatever you feel comfortable with. There are some very helpful online tools as well. I like Adobe’s Kuler, and Color Scheme Designer, both free. (And yes, this should be fun!)

designer color palette

Color palette with blue and gray

I have blue already. Thinking about “trustworthy,” I think I’ll add a soft light gray to the palette.

Right there, I think we’ve covered “trustworthy” and “straightforward.” But the combo looks dull to me, and neither interesting nor energetic. Using a palette add-on called “Painter’s Picker” for Mac, I see that under something called a “triadic” color scheme, there’s a yellowish olive green that I really like with the blue. I think it makes the group look much more “interesting.”

5. Consider contrast.

Bright, strong, and dark colors work well for headlines. Very light colors like yellow, light beige or light blue make lousy headlines, but can make wonderful backgrounds. You can lighten or darken some colors on your palette for the sake of contrast. Getting stuck? Browse sites you admire, and observe how they have used warm and cool, light and dark, bright and dull.

designer color palette

Color palette with blue, gray and green

I think my sample palette needs something bright that I can use for emphasis. I’m thinking red, orange… so I play around with a few different ones but don’t find anything I really like. (Yes, the main criterion is whether or not you like it.)

Then using Photoshop and the “triadic” tool again, I come up with a dark red. But it looks too much like dried blood for my taste. So I make it lighter and brighter.

And suddenly things “click” for me. I like it. I’ve got a light color I can use for backgrounds, and three other colors I can use for solids and headlines. Since the red is brightest, I’ll save it for points of special emphasis on the pages.

6. Check for readability

Is your color vision normal? Approximately 15% of the general population have some kind of distortion in the way they perceive color. There’s a good visual simulator of various kinds of color blindness here. Your site needs to be legible for these folks. Modify accordingly!

7. And for printability

If so, use dark type on a light or white background for the printable versions.

sample web palette

My sample web palette—plus black, for ordinary text.

8. Dare to finalize

It’s time to finalize at least two strong colors which can predominate on the site. Designate another one or two that can be used as accent or background colors. It’s better to have too few than too many colors—designer Roger Black, for example, gained international fame for his distinctive magazine designs using just black, white, and red, period.

Once you’ve done the right-brain choosing, and the left-brain tweaking, you’ll have a color palette that you can use on any site or template. Still aren’t satisfied? Try one of the online palette-creation sites mentioned above. Or, look at photos (travel photos are especially good), paintings, or design books for more ideas. The book Living Colors: The Definitive Guide to Color Palettes Through the Ages, is a particularly good source—authors Hope and Walch have extracted gorgeous color palettes from the art and décor of many ages and places, which can all be adapted for the web.

But above all, have fun. Color appeals to a primal part of us, and its meaning and impact can’t be fully explained. So savor the inexplicable. If you’re enjoying it, chances are your site visitors will too.

Have you experimented with color palettes, or found a really helpful color-picking tool? I’d love to hear from you.

 build a world-class color palette

Website so out of date you're embarrassed?
Get a custom WordPress site designed for your business... for as little as $65 per month.

Rent-a-website

Don't buy, rent your web site.
Click here to learn more.

Previous post:

Next post: