Certain color combinations can make your eyes water, others can make your eyes practically leap out of their sockets in delight. Colors can help instill confidence in a product, company, or design—or undermine it. Color can set the mood, or destroy it. Color can make you fit in, or stand out—and it depends on your situation whether or not that’s a good thing.

Despite the seemingly magical power of color, it’s not voodoo. No chickens need die in your pursuit of color-coordinating bliss—it’s a skill that can be developed in anyone who has the ability to see the rainbow.

Annoying Prologue

I’ve long been meaning to write an article about color but I wasn’t truly galvanized until a friend sent me this article. I got the feeling that the article had made the rounds—and I couldn’t stand on the sidelines while misinformation like this gets passed into common knowledge of developers, hungry for some help for their color problems. (And his theories on picking colors have inspired my #1 tip at the bottom.)

Now, I don’t want to disparage the author’s intentions at all, because I’m sure they were good—after all, it’s not like there’s a designer superhero who swoops in to save the day for people forced, against their will, to choose colors. Unfortunately, you know what they say about good intentions. On the upside, it helped me formulate this list to try and dispel some color myths and misunderstandings.

So, without further ado or introduction… May you color in peace! (And good taste.)

6. Make your colors earn their keep.

It’s too easy to just spot a color you love and then use it on the next available victi—I mean, project. Unfortunately, this isn’t the path to the most effective work—and color picking, like all design work, is supposed to be functional as well as beautiful.

So, when you pick your colors, you should always ask yourself, “What result am I trying to achieve?” All color choices should stem from your answer.

Examples: If you’re trying to hint at delicious food, consider the type of food and the colors associated with it. (Neon green, for example, is probably not a good choice.) If you’re trying to stress stability and capability, check out which colors are associated with those ideas. (Fuschia? Doubtful.) If you want to go for cool and hip, figure out what stuff around you exudes that feeling and why. If you want to really stand out from the competition, zig when they zag.

5. Pretty is nice, usable is nicer.

Usability goes along with fulfilling your true purpose. After all, what good are your pretty colors if people can’t read your design?

Be sure to create a good contrast between background color and text, and double-check that your colors aren’t so bright as to cause eye-watering or after images.

And, if you use color to encode meaning (e.g. click this, not that, or this is bad, that’s good), make sure that it’s still usable by people with various types of color-blindness.

The author of the aforementioned article uses these graphs as an example of the “fairly appealing” results of his work to spiff up his color palettes. As you can see, the colors only serve to distract from the actual content:

Graph images copyright Jon Shemitz and used solely for the purpose of comment & criticism

Too many colors can easily spoil a design’s ability to communicate. (And, to be honest, this graph doesn’t even know what it’s trying to communicate, but that’s another article entirely.)

4. Just because you don’t want to claw your eyes out… doesn’t mean you shouldn’t.

One of the most dangerous misunderstandings in the aforementioned, misguided article is found in the middle of the last paragraph on the first page:

This is why most walls are painted light colors: they’re easy on the eyes, and they don’t clash with anything. This is also why many websites use pastel color schemes: Any light color with a moderate saturation goes with any other light color with a moderate saturation.
— The Article

This is not true! The rules of color matching don’t apply selectively to only saturated colors. If you need further proof of this, just look at that graph again:

Graph images copyright Jon Shemitz and used solely for the purpose of comment & criticism

In reality, you don’t necessarily have a match because just because your low-saturation colors don’t cause the eye-watering and discomfort high-saturation clashes do.

The author of the article was probably thinking of what interior decorators call “neutrals,” which include white, off-white, grey, tan or beige, and even “dusky” (low-saturation, greyish) green. But that’s interior design, not color science—combine those dusky green walls with a bright pink sofa and you’ll find that green is not so neutral after all.

The only true neutrals are white, black, and (usually) grey; although pairing colors with these neutrals can change the dynamics of a design, they can’t clash. All other colors are subject to clashing, depending on what you pair them with.

3. Colors do so much more than “sit there and look pretty”

There are three main ways your choice of color affects people:

Colors carry emotional and metaphorical meaning for everyone who looks at them—and allegedly, in some cases, directly influence human behavior.

For example, certain shades of blue are said to convey stability, and others are said to convey calm. Some shades of yellow make people think of sunshine, springtime, and hope; others make people think about dangers, warnings, and the unhealthy hue of some bodily fluids. And don’t forget culture! Combinations of orange and black may say “Halloween,” while combinations of orange, brown, and yellow might say “The 70’s.” And you can’t just think of your own culture—to the Chinese, red means good luck and good fortune, and it’s the color of wedding dresses (and just about everything else), whereas red typically means fire/vigor, sensuality, or power to Westerners. And so on.

Research has also indicated that the application of colors can create or stifle appetite, make people hurry or calm down, and a host of other subtle effects. Or at least, that’s the idea behind the pale pink and pale green decor in hospitals, and the reds, yellows, and orange-browns of many fast food joints.

Saturation and brightness convey a more generalized kind of message—less “touchy feely,” but equally important.

It’s not just the hue you choose, but the saturation and brightness, too—whether it’s a light color or a dark color, with a lot of color intensity or without much at all.

Bright, pure colors seem “fresh” and crisp; pastels are often considered calming, or comforting; saturated dark colors may feel “solid” and heavy while unsaturated ones can seem sophisticated and refined, or wishy-washy, watered down, even dismal.

The combination of colors affects the overall “feel” of the final result.

When you combine colors, you create a dynamic that wasn’t there with a single color alone—in effect, the combination changes the effect of all the colors in it.

You can choose to create harmony by choosing colors that coordinate according to color theory, or create tension and drama by choosing colors which clash subtly or strongly. (Just like musicians use discord in music. And just like in music, if you’re inexperienced in the art, you shouldn’t try to create drama by mixing up bad combos. Learn the rules before you break ’em.)

Hey there, new reader! This is the first in a series of articles on color, human interface, and other such related goodies. Subscribe for more! Or, get updated by email when new posts are made.

2. Relying on software to pick colors for you is like letting your mother pick your clothes.

Using some basic knowledge picked up by Googling, you can probably come up with some passable color schemes, given either a color wheel and a ruler, or a simple software program.

BUT… would these color combinations be appropriate for your task? Effective? Beautiful? Might they still be too bright or too dark to be human-friendly?

Software and math can’t understand your wishes, hopes, and goals, or your viewers’ emotional or cultural baggage—or even vet the colors with a critical human eye. It’s simply a toss-up.

Like this article? You might also enjoy my presentations on user interface and user experience from OSCON ’06.

1. The proof of the pudding is in the eating.

And so we come to our final “Thing to Know” about color. This one’s not directly about color itself, but rather the learning process.

Put simply: Don’t take anyone’s advice about colors until you see their output—and don’t listen to them if it’s ugly. In the case of Jon Shemitz, author of the aforementioned misguided article, that means this:

Graph images copyright Jon Shemitz and used solely for the purpose of comment & criticism

If that were pudding, it’d make you very sorry indeed that you ate it (although you might be able to call in sick to work).

Thankfully, unlike many things, a person’s color-picking prowess can easily be assessed. It is both A) something visible, and B) something most humans have an innate sense for. (Even if you feel paralyzed when you pick your own, you probably have no real problem judging color palettes that are already out there. It’s a human thing.)

Bonus Round: Yay, links!

All psyched up about color? I know I am! Don’t quit learning now, just because I’m out of breath (and my wrists hurt!). Here’s some recommended reading so you can keep on:

• Poynter.org – Color, Contrast, and Dimension in Newspaper Design — you will learn. Ignore the fact that it’s about newspapers.
• handprint.org – Color Vision — from a painting enthusiast (and, yet again, still applicable)
• Behr Color Smart — yes, another non-web-specific resource! But color is color. And this is a neat Flash-based app.
• Natural Selections: Colors Found in Nature and Interface Design — article talking about one way to help ensure your audience doesn’t gouge out their own eyes

Books you might find useful—at a reasonable price:

• Pantone Guide to Communicating with Color
• Interaction of Color: Revised and Expanded Edition

Books you might find useful if you have a largeish book budget:

• Color (4th Edition)
• The Art of Color: The Subjective Experience and Objective Rationale of Color

Didja like it? Help get the word out—digg it!

Bonus Round 2: You!

Let me know what you think! I want to hear from you. What did you find helpful in this article? What would you like to see next? Have any terrible or funny color stories to relate? (You know you want to.)