This post is a direct response to the aggravation I was under teaching design. More importantly, teaching design to developers. Let’s be clear, there are developers, there are designers and then there are the hybrids. The hybrids never bothered me, they got it…mostly. However, it’s amazing how many people are baffled by colour (or correct colour choices). Let’s make one thing clear: Colour Theory is one of the single most important parts of design. I often told my students that with “good colour theory and typography you’ll never miss a day of work.”

What’s worse, is that with the internet, the colour-hopeless have “help.” And by help, I mean, not at all. Things like Adobe’s kuler, and ColourLovers (bonus points for the British spelling) have provided templates and themes for them to take. There’s no teaching there, there’s no learning. Not that colour can be taught or learned by everyone. We should at least try, though. Worse yet, is that sites like kuler and ColourLovers are a mixed bag of successful colour palettes, and often are far too busy. Some of them are downright dreadful and even those that aren’t often offer up to five colours(!) which is far too busy as it were before adding in the associated shades and tints.

I’ve seen the pitfalls of this, where a developer (or someone a company has thrown unwittingly onto designing something) has nicked a theme from one of the above sites and because it’s seen as a set, or a theme, they feel they need to use all five, six colours. Oh, no, no, no. There’s a word for that, and it’s busy.

As a rule of thumb, you should not need more than THREE colours. Note that this does not mean only three shades and tints. Three colours.

NOTE: If you’re not natively aware of the difference of colours, shades and tints (without running to Wikipedia) we could be in some trouble here. Let’s marshal on anyway, shall we?

So, we take that as a guideline. We’re setting out to use only three colours. The next important question is…which three colours? There’s no set rule to this, as successful colour schemes can come from anywhere in the spectrum. However, there’s a few things that always cross my mind when I’m selecting colours:

Association.

Attitude.

Ancestry.

With Association, I mean Colour Association and Colour Psychology/Symbolism. One of the core tenets of colour theory. What feeling, emotion, word, object, traditions are associated with a colour? By now we’ve all heard of “green rooms” used frequently for guests of talk shows. Green is a very calm, soothing colour and as such, waiting rooms were painted green to calm the guests. Green can also be associated with money, the outdoors or Saint Patrick’s Day. For example, green is a common earth tone used for outdoors/earth related websites. Take a look at REI’s latest website.

REI's latest website would bring a tear to Captain Planet's eye...

Inversely, in the United States, a colour like red is very alarming, and might agitate (or inversely, make them feel joyful, dependent on person) a user. Even for a company like Honda or Coca-Cola who’s company brand is dominantly red, it is used sparingly, only to grab attention for important things. Likewise, red is always an attention grabber. That’s why insurance is higher for red vehicles. Instead, for something they want people to actually use as opposed to just look at, they use a bunch of neutrals that will neither disturb nor distract from the brand.

If you’re designing for a company with an international presence, you should definitely be aware of cultural associations. I’d mentioned above that red in the United States is a very aggressive, attention grabbing colour. What about in Canada? Patriotic. For instance, in Tibet, purple might be an impactful colour choice given it’s association to Buddha. While in the U.S. white is seen as a virginal colour, associated with purity (hence, weddings) through out parts of Asia, it’s a colour of mourning, replacing the western view of black.

There’s of course, way more to association/symbolism/psychology (especially when taking into account the idea of “colour placebo”) and it’s a dense conversation to have. I’m not going to present any more information however. If you’re looking for more, you should certainly read books, blogs, and study the brands of the world. For a book, I’d suggest Color Design Workbook (also linked to on the right) by Rockport. It’s a pretty solid starter book (if you buy it through that link I also get paid, hey-yo!).

Next up, Attitude. It’s exactly as it sounds…what kind of attitude do you want to send with the design or brand? For example, “neutrals” like blue (especially darker shades) and grey are often seen as unbiased and professional. Have you noticed that even though Presidents (or Prime Ministers) could easily dress like they walked off a GQ cover, they dress mostly in boring navy suits with a blue or red tie? There’s a reason and yep, it’s to appear unbiased, professional, and to an extent, more focused on the work than on themselves.

Instead of this...

...we have this.

And this.

The point being, if you want to appear professional, unbiased, trustworthy, use grey, or a dark shade of blue. Inversely, if you want to send a message of vibrancy, use something like pink, magenta, a bright green or orange. These are often used as brighter, attention grabbing colours without being stark (like primary colours).

Pinkberry's logo you notice for its youthful vibrancy.

Lastly is Ancestry or heritage. There’s something to be said for a company with tradition. Just like typography and art treatments can date a brand, so can colours. You have to decide given subject matter of the company, or the heritage of the company whether to go with fresh-faced, contemporary colours, or more traditional. For example, the “chocolate/sky blue” pairing is all the rage now. You go into Bed Bath and Beyond and it’s everywhere. It’s fanciful, but also ult-modern. Would that be appropriate for an art school that’s been around since the 1930′s…probably not.

Ancestry handled in the wrong way, and you might end up like Pepsi, with your base divided in half. I for one at least like their idea of stepping off the primary colours, in favour of more versatile, muted versions, if not the execution. That’s right, I hate primary colours. They’re too stark and clashy.

It’s good to note that none of this is “rule” just firmly explored opinion. In the hands of the right designer, anything is -technically- possible.

Anyway, so, you’ve put some thought into the Association, Attitude and Ancestry of the brand. You’ve got some ideas of a primary colour, and maybe a secondary colour, but it seems wholly incomplete, and a bit limiting still. Besides, I promised you a third colour. So, what is that third colour, and how do I decide. Well, you could just eyeball it, but that’s impossible to teach and wholly unscientific.

A process to decide alternate options that I’ve come to like (and seems more analytical) is doing something of a venn diagram. Do we still remember those from schools? Spheres of overlapping influence? I’ll show you an example:

This is accomplished by taking two colours in either Photoshop or Illustrator and messing with the blending/overlay options. This is not always going to result as a win. The bright green and the navy-ish grey look great together, the two greens look great together, all three look good with white and black. However, mixing the darker green with the grey is mostly disastrous. I left these colours together because, well, I wanted to show the good and bad to the process and that it cannot be 100% trusted. It doesn’t mean you shouldn’t use the two colours together, and that there isn’t a good third option. It’s an experiment meant to give an idea.

While snooping around the internet, you’ll note that others are doing essentially the same thing. Check out Brand New’s article on attempting to re-brand Valentine’s Day (it’s a great article anyway).

But, but, but, it’s still not enough! First off, you might be right. Three colours may not give you enough variation across all the various materials and collateral you may need to be brand. However, before accepting that conclusion, absolutely make sure you’re right. If, and only if you come back with the same conclusion, should you then explore shades and tints.

A more successful color study with shades and tints

In Adobe Illustrator, using the color palette and spot colors, we can add amounts of white to create tints. Using process colors we can add amounts of blacks to create shades. Shown here are now twenty-seven shades and tints that are perfectly on brand and at your exposure, while keeping to only three colours.

So, in a nutshell, colour theory. Have fun. Hope to see you in the comments.