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

cover image of Design of Flight magazineTo 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.

fig.1 color wheel illustration - fig. 2 examples of complimentary color schemes that are pleasing to the eye - fig. 3 examples of complimentary color schemes that don't work; they feel out of balance and inharmonious

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.

fig. 4 examples of color schemes that use the right amount of contrast - fig. 5 examples of color schemes that are too high-contrast  - fig. 6 examples of color schemes that are too low-contrast

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!

fig. 7 color extracted/derived from the photo

More color resources at my link list.

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.


43served

gravatar

1

permalink this comment H.Roberts Wed Feb 21, 2007 at 08.32 pm

Great article, the “Orange” model is thought provoking too! Useful to say the least. Thanks


gravatar

2

permalink this comment Jon Hughes Wed Feb 21, 2007 at 10.01 pm

As a designer, color is probably the thing I struggle with most when creating new designs without direction, thanks so much for this article, very informative!


gravatar

3

permalink this comment Sam Wed Feb 21, 2007 at 10.24 pm

Great article, never thought of color that seriously before, I’d just mix them up until I thinked they looked right. This should help lots, thanks!


gravatar

4

permalink this comment virtuelBlue Wed Feb 21, 2007 at 10.37 pm

Another Great article!


gravatar

5

permalink this comment Arjan Eising Wed Feb 21, 2007 at 10.58 pm

Damn nice article Veerle..! I should write something about this on my blog soon…


gravatar

6

permalink this comment Andre Liem Thu Feb 22, 2007 at 12.58 am

Excellent article! 

I was just discussing this topic yesterday with regards to designing web advertising banners.  Your article explains my dilemmas very well.


gravatar

7

permalink this comment Andrew Thu Feb 22, 2007 at 01.49 am

Whatever happened to Design in Flight? It’s such a shame that all that content’s gone. Maybe they could find a way to put it on BitTorrent or something.


gravatar

8

permalink this comment Ranjani Thu Feb 22, 2007 at 02.09 am

Beautiful write-up. Thank you :D


gravatar

9

permalink this comment Jessie Thu Feb 22, 2007 at 02.21 am

Wow… so many complications to color. Thanks for the post!


gravatar

10

permalink this comment 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


gravatar

11

permalink this comment 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!


gravatar

12

permalink this comment 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.


gravatar

13

permalink this comment marc thiele Thu Feb 22, 2007 at 10.39 am

Great article. Well written and very useful. Thanks alot!


gravatar

14

permalink this comment Pete Thu Feb 22, 2007 at 10.40 am

I recommend the Leslie Carbaga books on colour, if you want something for your bookshelf. They really helped my confidence with choosing colour schemes.


gravatar

15

permalink this comment Scott Freeman Thu Feb 22, 2007 at 11.10 am

Perfect timing for a colour-related article, as I’m in the throws of redesigning my website and was learning more about colour theory.  Thanks, Veerle!


gravatar

16

permalink this comment Ben Spencer Thu Feb 22, 2007 at 02.29 pm

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!


gravatar

17

permalink this comment Regnard Raquedan Thu Feb 22, 2007 at 05.45 pm

You can check out:

http://100randomcolors.raquedan.com


gravatar

18

permalink this comment MiSHAK Thu Feb 22, 2007 at 07.01 pm

This tool Color Scheme Generator 2 helps a lot :-D.


gravatar

19

permalink this comment Hasan Thu Feb 22, 2007 at 07.41 pm

@MiSHAK, even better…

http://www.colorsontheweb.com/colorwizard.asp
http://www.webwhirlers.com/colors/colorwheel.asp


gravatar

20

permalink this comment Mihai Campean Thu Feb 22, 2007 at 08.42 pm

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!


gravatar

21

permalink this comment 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.”


gravatar

22

permalink this comment Laurent Thu Feb 22, 2007 at 09.34 pm

I am just starting to think of a logo for my new company and this article is right on time :-)

Great article !


gravatar

23

permalink this comment Reek Luck Fri Feb 23, 2007 at 10.36 am

Uouuu !

thankyou, thankyou, thankyou. I love your site !

Reek


gravatar

24

permalink this comment ZenBug Fri Feb 23, 2007 at 04.18 pm

The next time you’re at the liquor store, have a look at the wine bottles.  Those people have attractive colour schemes down to a science. 

Take some photos of your favourite wine labels with your camera phone - I find it great source of design inspiration.


gravatar

25

permalink this comment penny Fri Feb 23, 2007 at 08.53 pm

Very good article, thanks so much for putting in the effort.


gravatar

26

permalink this comment Andy Fri Feb 23, 2007 at 10.40 pm

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.


gravatar

27

permalink this comment Jasja ter Horst Sat Feb 24, 2007 at 11.34 am

Thanx for adding an overview of tools.
personally I really like the “Kuler” tool from Adobe labs


gravatar

28

permalink this comment Mike Sat Feb 24, 2007 at 03.26 pm

When setting up color for my projects, I always thought that I am color-blind. I am always careful of the colors I use. Your write up will surely be a good guide. Thanx!


gravatar

29

permalink this comment Psycho Dude Sat Feb 24, 2007 at 03.44 pm

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.


gravatar

30

permalink this comment Kasra Sat Feb 24, 2007 at 05.14 pm

I’ve always been using monotone color schemes because I was too afraid to venture into the lands of color! This post definitely helped. Thanks!


gravatar

31

permalink this comment Patrick Sat Feb 24, 2007 at 07.15 pm

What a great article! I’m bookmarking this one as a much-needed reference.


gravatar

32

permalink this comment Stijn Vogels Sat Feb 24, 2007 at 10.52 pm

Great article Veerle. Thanks a lot!

Ik kan goed begrijpen waarom zoveel mensen dit artikel aan hun bookmarks toevoegen. Duidelijk geschreven, en die voorbeelden doen het em helemaal. Kleurentheorie hoeft niet alleen beperkt blijven tot de online ‘kunstwereld’. Mijn vriendin, een juf in spe, kan dat evenzeer gebruiken in de klas.

Nog een fijne zondag. :)


gravatar

33

permalink this comment Flower_Girl Sat Feb 24, 2007 at 11.56 pm

Very interesting article! It definetely opened my eyes about making colour schemes. Now I understand why some colours look so well together! It has something to do with ‘complementary’ color!


gravatar

34

permalink this comment Lieuwe Sun Feb 25, 2007 at 09.29 am

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.


gravatar

35

permalink this comment 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.


gravatar

36

permalink this comment Blue Buffalo Mon Feb 26, 2007 at 02.51 pm

Another great article!  I too get shy of using lots of color.  Thanks for the great information - I will definitely use it!


gravatar

37

permalink this comment Rob Goodlatte Tue Feb 27, 2007 at 11.41 pm

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.


gravatar

38

permalink this comment Andy Wed Feb 28, 2007 at 05.49 pm

@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. :)


gravatar

39

permalink this comment Max Sun Mar 4, 2007 at 10.37 am

Thanks for another very good article! Keep up the good work. Greetings


gravatar

40

permalink this comment prisca Tue Mar 6, 2007 at 11.58 am

Veerle ;)

great article - a brilliant read with excellent links ;)  thanks ;)

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.


gravatar

41

permalink this comment Lisa Town Wed Mar 14, 2007 at 04.13 am

I’m trying not to just be a lurker!

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!


gravatar

42

permalink this comment 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?


gravatar

43

permalink this comment Brandon Fri Mar 16, 2007 at 09.04 am

Thanks for the tips, and resources. Now there’s one less lurker.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist