The personal disquiet of

Mark Boulton

January 3rd, 2007

Five Simple Steps to designing with colour part 3: Colour combinations

Colours chosen from dif­fer­ent spokes on the Col­our Wheel will provide a vari­ety of col­our com­bin­a­tions. Decid­ing upon and select­ing a col­our com­bin­a­tion that works for you will very much depend upon the job at hand.

Will it com­mu­nic­ate what you want it to? Or are you just choos­ing them because you, or the cli­ent, like them? These are very dif­fi­cult ques­tions to answer because any designer or cli­ent will let their per­sonal style and pref­er­ence inter­fere with their decision-making. Col­our com­bin­a­tions tend to evoke cer­tain reac­tions either by cul­tural, or per­sonal exper­i­ence. Under­stand­ing these exper­i­ences will help you cre­ate col­our com­bin­a­tions that tell a story. That is what good col­our the­ory can give you; designs that tell a story.

I’m going to go over a few com­bin­a­tions here to demon­strate my think­ing. But before I get onto that, it’s worth not­ing how palettes can be presen­ted to poten­tial cli­ents or in design documentation.

I’ve always presen­ted palettes in two dif­fer­ent ways depend­ing on the amount of col­ours. In a broad palette, with many col­ours, I dis­play these left to right with dom­in­ance and usage being denoted by the size of the square, or block, of col­our. For smal­ler palettes and com­bin­a­tions, I use the rect­angle con­tain­ing a line and a square. I was taught this simple device in uni­ver­sity but it is sim­ilar to many other examples I’ve seen. You can use circles, blobs, lines, squares. It’s up to you. The import­ant thing is to indic­ate the rel­at­ive weight of colour.

{title}

Col­our palette show­ing range of col­ours and rel­at­ive weight.

The col­ours within this com­bin­a­tion (I was temp­ted there to call this a Triad. How­ever, if you think back to the Col­our Wheel, this is not the case. Just because there are three col­ours does not make this a Triad com­bin­a­tion) are given the fol­low­ing names:

1. Sub­or­din­ate, or Base col­our. This is a visu­ally weak, or sub­or­din­ate, col­our. It should con­trast or com­pli­ment the dom­in­ant colour.

2. Dom­in­ant. The main col­our. It is this col­our which defines the com­mu­nic­at­ive val­ues of the combination.

3. Accent, or High­light col­our. The Accent col­our can be two things: either sym­path­etic to the Sub­or­din­ate or Dom­in­ant col­our, or it can be visu­ally strong and strik­ing, there­fore appear to be com­pet­ing with the dom­in­ant col­our. This can provide ten­sion within a combination

{title}

Col­our com­bin­a­tion show­ing Sub­or­din­ate, Dom­in­ant and Accent colours

Examples of col­our combinations

Act­ive / Vibrant

{title}

Act­ive com­bin­a­tions are intense. They fea­ture bright, often com­pli­ment­ary, col­ours on the col­our wheel and are com­bin­a­tions of primary, sec­ond­ary and ter­tiary col­ours. To many people, col­our com­bin­a­tions such as this evoke feel­ings of noise, flam­boy­ance and energy. It’s a young com­bin­a­tion, although there will be cul­tural dif­fer­ences, aimed at young adults. Many of the hues are not really ‘nat­ural’ col­ours, but they are more intense tones of the same col­ours, there­fore they could be used for ‘nat­ural’ applic­a­tions such as the travel industry.

Muted / Calm

{title}

Muted palettes have a lot of white in the hues. This example uses blues and intro­duces lav­ender as the dom­in­ant col­our. The res­ult­ant col­our­way is bal­anced and calm­ing. Hues in the blue, green and violet areas of the Col­our Wheel con­vey a visual quiet­ness. The Accent is almost always used as sym­path­etic to the Dom­in­ant. Often used in the cos­met­ics industry, the visual soft­ness of the col­ours often por­trays a fem­in­ine quality.

Pas­tel

{title}

A pas­tel com­bin­a­tion is sim­ilar to the Muted com­bin­a­tion in that is often based on col­ours con­tain­ing a lot of white (or lack of white depend­ing on your col­our model right?). Where they dif­fer is that Pas­tel com­bin­a­tions com­bine warm and cool tones read­ily. This com­bin­a­tion can por­tray youth and inno­cence (babies!) and has a warmth that the Muted com­bin­a­tion fails to deliver.

Nat­ural

{title}

Nat­ural com­bin­a­tions are those col­our which are bor­rowed from the great out­doors. Rusty reds, browns, sky blues and warm pinks are the order of the day. I find the easi­est way to cre­ate these com­bin­a­tions is to go out­side, take a pho­to­graph and then choose some col­ours from that, you really can cre­ate some stun­ning com­bin­a­tions. When you need to com­mu­nic­ate rus­tic charm or the feel­ing of walk­ing through autumn leaves, then this is the type of com­bin­a­tion you’re after.

Rich

{title}

This is a good one. Hues of roy­alty, tra­di­tion, often reli­gious and above all; wealth. Rich col­our com­bin­a­tions are per­haps the com­bin­a­tions which are so engrained in cul­ture. True, the actual col­ours used may dif­fer, but the over­all effect is seen through­out the world. Maroon is often mixed with gold and full shades of green. They can be com­bined with Nat­ural com­bin­a­tions for a fuller palette.

Part of the design solution

I hope I’ve indic­ated how import­ant col­our is in com­mu­nic­at­ing part of the design solu­tion. By select­ing the best com­bin­a­tion of col­ours you can go a long way to ensur­ing the suc­cess of your design. We’ve looked at some col­our com­bin­a­tions here but what about the indi­vidual col­ours? They also have mean­ings and go a long way on their own to set the mood and tone of a given design. Next, I’ll move onto dis­cuss­ing col­our and mood. What do dif­fer­ent col­ours mean?

Five Simple Steps: Design­ing for the Web

This art­icle is an extract from the upcom­ing book; Five Simple Steps: Design­ing for the Web. Avail­able later this month.

This entry was posted on Wednesday, January 3rd, 2007 at 7:11 pm and is filed under Design, Simple Steps.

You can follow any responses to this entry through the RSS 2.0 feed.

Responses are currently closed, but you can trackback from your own site.

17 Responses to “Five Simple Steps to designing with colour part 3: Colour combinations”

  1. Nate K said on: January 3rd, 2007 at 10:35 pm

    Again, thanks for the great art­icle. I am still wait­ing patiently for the book :) 

    Glad the server move was painless…

  2. tonyc said on: January 4th, 2007 at 12:01 am

    This art­icle would really help me espe­cially when I choose which col­our from the scheme to use for a par­tic­u­lar element. 

    Thanks for shar­ing this great knowledge…

  3. Daniel Eastwell said on: January 4th, 2007 at 12:23 pm

    Great art­icle, I love com­ing to your site, I learn a lot. 

    One point, though — the samples you’ve pre­pared as palettes give rise to optical illu­sions, such as phantom grey squares in the white grid between the col­our swatches. Would but­ting the swatches together cause problems? 

    The other optical illu­sion that I sup­pose these palettes are help­ful in high­light­ing are those where the col­our appears to changes depend­ing on the col­our that sur­rounds it.

  4. Martin L. said on: January 4th, 2007 at 5:07 pm

    Thank you for detailed art­icle.

    Indis­put­ably this scheme will help me and to many design­ers in the world.

  5. Mark Boulton said on: January 4th, 2007 at 5:45 pm

    Nate K: Cheers. Should be the end of this end. This art­icle is a dir­ect extract from the book so hope­fully it gives an indic­a­tion to the depth, length and quality. 

    Daniel: You could butt them up. The main prob­lem with that how­ever is you could cre­ate undesir­able effects from the ten­sion cre­ated by two col­ours sit­ting next to each other. I often find it’s bet­ter to frame them in white.

  6. Martijn said on: January 5th, 2007 at 9:12 am

    Mark, great series again. As a lot of people I realy do enjoy read­ing your articles. 

    One thing in this col­our series that I would like dis­cussed, may be you will come to it, would be hue, sat­ur­a­tion and bright­ness.

    These three things define a col­our but can be hard con­cepts to grasp. But when you do they will be very power­full to describe en think about colour. 

    I do know some­thing about these things, but I’ll guess you will be able to tell a lot more about them. How to use them in real life etc. 

    Just my 2 cents. 

    Well, keep up the good work and I’ll be look­ing for­ward to the next art­icle. Cheers.

  7. Andy Vaughn said on: January 5th, 2007 at 2:12 pm

    Thank you Mark. Your art­icles have provided a won­der­ful resource in all of my new design work.

  8. Rogier Bikker said on: January 7th, 2007 at 8:49 am

    You could butt them up. The main prob­lem with that how­ever is you could cre­ate undesir­able effects from the ten­sion cre­ated by two col­ours sit­ting next to each other. I often find it’s bet­ter to frame them in white.

    But those ‘undesir­able effects’ are exactly what you want to see when cre­at­ing a col­our scheme so you can avoid and cor­rect them, right?

  9. Paromita said on: January 7th, 2007 at 1:30 pm

    hi mark,

    i have always been a great fan of your “ 5 Simple steps” series.…patiently wait­ing for your book :)

    this was an great art­icle. though i play a lot with col­ors, it really gave me a insight into how it can be nicely presented. 

    thanks

    paromita

  10. Kisan said on: January 9th, 2007 at 6:19 am

    Great art­icle.

    I am also wait­ing for the book :)

  11. Rob said on: January 9th, 2007 at 12:19 pm

    Arrived here via your latest Alistapart art­icle. Both are great. Related to this post I thought you might like to see Kuler from adobe (if you haven’t already).

  12. Yves Vaz said on: January 9th, 2007 at 10:39 pm

    To a large extent, choice of col­our and com­bin­a­tions are influ­enced by a designer’s per­sonal tastes brought to bear upon clas­sic selec­tion. As a design guru, your recom­mend­a­tions will be accep­ted as clas­sic. Should the stu­dent then allow his own pref­er­ences to creep in, to modify his final choice? Or would this tam­per­ing be regarded by you as likely to be disastrous?

  13. T.D! said on: January 11th, 2007 at 1:22 pm

    Excel­lent art­icle series, I really like it. Although, wouldn’t it be nice with links to all three parts in each art­icle? Like you did with the series about typography.

  14. tranquocbao said on: January 12th, 2007 at 2:03 pm

    Thanks a lot, Mark.

    As your clas­si­fic­a­tion, I think your blogs is some­thing “Nat­ural”, if i am not wrong.

    How­ever, i have a small question?

    Between Muted/Calm and Pas­tel, i think they can be used inter­change­able because they two bring me gen­tle­ness and soft­ness; although, indi­vidu­ally speak­ing, i think Pas­tel matches bet­ter to fem­in­in­ity quality.

  15. inoodle said on: January 12th, 2007 at 5:27 pm

    Hi Mark,

    Enjoy­ing this series of art­icles.

    As a developer con­stantly strug­gling to stay afloat in the design world, I was won­der­ing what you do with regard to text col­ours in these schemes — is a white, grey or black impli­cit in each scheme ?

    Also when design­ing with a 3 col­our palette, do you really stick with just those 3, or do vari­ous shades / tints get added on a whim ? 

    Thanks.

  16. Mark Boulton said on: January 13th, 2007 at 3:53 am

    tran­quocbao: They can be inter­changable although the key thing is, Pastel’s tend to have warmer col­ours such as pale yellows.

    inoodle: White, grey and black are tones, not col­ours, so yes they would fit with most col­our com­bin­a­tions. Be care­ful with grey though, it can look ter­rible, espe­cially with muted or pas­tel combinations.

  17. inoodle said on: January 13th, 2007 at 7:35 am

    Mark,

    Could you give an example from one of your 3 col­our palettes of how a block of text would be presen­ted ? Is it nor­mal that a palette such as you have dis­played already con­tains the col­ours and tones which should be used for the typography? 

    And another ques­tion:)

    When you spe­cify the dom­in­ant col­our, do you expect that to be used pro­por­tion­ally more than the subordinate ? 

    Thanks

  • Me

    Hello. My name is Mark Boulton. I’m a designer, an author, a speaker and I run a small design agency where we work with lovely cli­ents and pub­lish books as we go. This is my blog.

  • More of me

  • Publications

    Design­ing for the Web
    Start­ing from £19 + VAT for a PDF Down­load. £29 for a full col­our paperback.

  • Where I work

    Mark Boulton Design
    A small design stu­dio doing good things for nice clients.
    Five Simple Steps
    Pub­lish­ing easy to read design books.

  • See me speak

    Access­ib­il­ity 2.0
    Septem­ber 22nd, London.
    Drupal­con, Paris
    Septem­ber 1st — 5th, Paris.
    Web Dir­ec­tions South
    Octo­ber 6th, Sydney
    Build Con­fer­ence
    Novem­ber 5th, Belfast.
    Cam­bridge Geek Day
    Novem­ber 21st, Cambridge.
    Design­ing for the Web work­shops: Lon­don, Manchester & Glasgow
    Novem­ber & Decem­ber 2009

    • Copyright © 1999–2009 Mark Boulton. Made with an Apple Mac in Wales. Powered by WordPress and hosted by Media Temple.