Veerle's blog

You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Feb 21

Choosing color combinations

2007 at 08.03 pm posted by Veerle Pieters

All important but often elusive: tips on creating your next color palette

Color is a subjective experience, it is a mental sensation, a reaction of our brain. We say that an orange is 'orange'. But is it really orange? How do we know? We cannot get outside of our eyes or brain to find out, but we do know that when the sun or light disappears; color vanishes. We take colors for granted. It's only when we are actually drawing or painting that we realize how much value color brings to our daily life.

Color theory in a wrap

To learn about color, you first need to understand the structure of color. A color wheel shows us how color is structured. We start with the three primary hues: yellow, red and blue. These are the basic building blocks of color. Next we have the three secondary hues: orange, violet and green. Then follows the third generation or third level: yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green.

The color wheel (See Figure 1) shows us which colors are opposite to each other on the wheel. Blue is the opposite of orange, red is the opposite of green, yellow-green is the opposite of red-violet. These are called complements. Furthermore, we can divide colors into warm or cold colors. The colors on the bottom right, derived from blue are cold colors, those derived from red are warm colors.

Which color is suitable for which purpose?

Sometimes finding the right color combinations can be really hard, especially if you have to start a project from scratch. If your client already has a logo, a house-style or branding guidelines, you have a starting point. But if it’s your job to design that house-style, the first thing you should do is decide which style the logo should reflect. And with style comes typefaces and colors. Color plays a major part in all this. It symbolizes a certain mood. Does your house-style need cold or warm colors?

Colors reflect a certain personality. They also have several meanings, most of which are closely connected to each other. For example, blue stands for sky, heaven and water. It reflects freedom and peace, but it can also mean cold, protective, authoritative or technical. Red is the color of blood, it reflects courage, romance, but it also means hot, dynamic, vital, commanding or alert. All these symbolic connotations are perfectly visualized by Claudia Cortes in her Color in Motion, a real treat for the eye (the eye has its claims too).

You may not be superstitious or believe that colors have actual meanings, but you ought to consider them. Whether consciously or unconsciously, we consider those meanings when we judge an artwork or design. These generally accepted meanings often play a role in determining whether we like or dislike what we are looking at. Darkness will always suggest danger and mystery.

Colors effect us psychologically regardless of any symbolism, because in some cases they don't apply; it all depends on the circumstances. For example, black may signify mourning, but a tuxedo is also black and it signifies elegance. We all prefer bright vibrant colors over dull grey, but sometimes grey can be stylish too; it all depends on how we apply it in our design, it depends on the circumstances. But we should also be aware of the fact the meanings of color are different depending on the culture. For example, in most Western cultures, white symbolizes purity and elegance, cleanliness. However, in many Asian countries, white is also a color for death and mourning, and used for funerals. As with any design endeavor, make sure that you don’t only understand the psychological effects of colors but that you also know the nuances of the culture and audience you are designing for! This way you’ll have a better chance of success in achieving the emotional impact you want.

What makes a nice well-balanced color combination?

To define the colors for your project, choose a set of colors that fits with your client's logo. This color set should be limited. This way, you get a stronger brand or identity. The overall use of too many colors could result in chaotic and unintended effects. It can get your design totally out of balance. In other words, it will loose its style and personality.

When you choose your shades, there are a few things you should keep in mind. First, there should be enough contrast, and secondly, it might be advisable to have one complementary color. For instance, if you have a set of three colors, Color One should be in contrast with the Color Two and Color Three. Alternatively, Color One could be a complement of Color Two or Color Three. Using complements is not exactly necessary but it can help you achieve nice results. (See Figure 2) Using contrasting colors is important to achieve an interesting well-balanced design. For example, try to have two light colors and one darker color. Or you can have a light color, medium light color and a dark color.

Too much contrast can result in a restless or even aggressive design. (See Figure 3) It might of course be your intention to achieve this effect, but if so, make sure that the eye has some resting place in your layout. A rest-point is (I believe) necessary to keep it all in balance. You see, besides using the right color combinations, you should also think on how you dose these colors. Try using them in the right proportions. For example, use the lighter color for the bigger areas like the background and the most vibrant color on the items where you want to attract the attention to, like the logo or title. The middle colors can be used for the text and other items.

Using one complementary color can even increase the ultimate effect, but there’s a bit of a catch to this method. You have to be sure to apply them in a subtle way. If you excagerate and get it out of proportion things will get too overwhelming (See Figure 5). If colors are wrong applied or don't go nicely together, they can make your design rather unharmonious. It's up you to find out what is suitable or not, after all, colors are a subjective experience. One might like the combination while another doesn’t. So what makes you have 'good taste' in colors? Tastes differ, we all have different meanings of what is attractive and what isn't. Yet still, the world would be unbearable if there wasn't some general agreement. Luckily, by following these simple guidelines, you’ll have a better chance of achieving the optimal result. If you get stuck, you might find Adam Polselli's Get The Look a nice source of inspiration on the latest color trends and styles.

Color inspiration

It's been said before, but bears repeating: inspiration can come from anywhere. Always keep your eyes open for color combinations that you like. Examine photographs, pay attention to the vibrant colors of nature, and most importantly, keep experimenting!

Since Design in Flight isn't available anymore, I thought I publish the article I've written about color combinations for the magazine in April 2005. Many of you probably missed that one and I thought it couldn't hurt to publish this on my blog here for you to read and hopefully to learn as well.

Cezary Okupski Thu Feb 22, 2007 at 02.48 am

Although your article doesn’t encourage using red-green combination, it is never enough to stress to avoid it particularly. Especially for texts-backgrounds or other informational parts, e. g.: maps. According to Wikipedia 7-10 % males are colour-blind for this pair.

Fortunately, I am not. :D

11

Evan Thu Feb 22, 2007 at 03.43 am

Great Post!

I have always been afraid of using color, so my designs tend to be a lot of “shades of gray”, but hopefully this post will hep me branch out and be more unique. Once again, great post!

12

Hal Jordan Thu Feb 22, 2007 at 05.04 am

Nice work, Veerle. I’ve been using Kuler since I stumbled across it earlier this year. The site is sorta sluggish at times, but a nice resource.

I absolutely love the design of your web site. The little touches everywhere are so nice ... like the change of color when it’s your own comment in the list. Great work.

I am slowly but surely getting better at choosing a colour scheme and applying it to the various elements of my website projects. This article will most definitely give me that extra little bit of help that I need… Thanks!

I was just in the process of thinking up a nice logo and site design when I stumbled upon your article. Very informative and useful, keep up the good work!

21

bart Thu Feb 22, 2007 at 08.59 pm

Love the article as well as the look of your blog. Very nice, but I have a problem loading up the pages in my Firefox 2.0.0.1. Essentially the content renders, but some of the images (example images and header) never finish loading. The busy favicon just keeps on spinning. The status bar indicates, “Transferring data from s19.opentracker.net.”

Great article! Myself I always find getting the right color combination one of the hardest things when creating a design, you truly make it look so easy. Will try to follow up these tips next time and see how it’ll work out.

Thanks for the post! Halfway through the blog I felt the urge to turn away from my computer and start painting rightaway. Great story on what color does and how it works.

35

Veerle Sun Feb 25, 2007 at 10.15 am

Andy said:

So, how do you pick which colors from the photos to pick? I often get my light balance wrong, and end up picking colors that do not go well together.

Guess it’s not enough to know only the technical side of this, you’ll need an eye for matching color combinations too. This article can help a bit but you still need to feel if the colors work well together. That’s something I can’t explain, because it differs from person to person.

One popular way to extract colors from a photo is to use the mosaic filter in Photoshop. That way you get blocks that are blends of the primary tones in the image and you greatly reduce the colors to pick from.

I however, often simply rely on my own judgment when choosing colors. I find a scheme then tweak it until I’m happy with it.

Another tip with color I would advise is to step away from a design after tweaking the colors for awhile. I find my eyes become adjusted to a color combination which might not be the best choice and upon revisiting the design later, I immediately notice the mis-match.

@Veerle & Rob:
Thanks for the input. I’m not “totally” ‘hue-deaf’ , just not as savvy as could be.
I will take a look at the mosaic filter, sounds like it could be helpful.
Plus, I think I’ll go sit at the botanical gardens more and absorb nature’s input until my “mind’s eye” is better attuned. :)

I also found that the Firefox extension ‘palette grabber’ is a very useful tool, especially for those new to webdesign or visual design in general. Being able to look at the colour scheme of a well designed site can really open your eyes to the possibilities.

I always say that no one can ever learn too much about color. I also recently discovered Adobe Kuler and it’s great, I like to just sit and look at all the great combinations. It often times is a great place to start when I’m having a total block moment because different color combinations will generate different ideas!

42

Cruz Vaughn Thu Mar 15, 2007 at 05.47 am

Our Teacher said that:The colors comes from our brain, It not the color really,and our eyes just can know three colors,thay are bule green and red,but I wonder that where is yellew comes from? Whichever they mix can not to be yellew right?