How many times have you seen a colour combination that just worked, a match so perfect that it just seems obvious?
Now, how many times do you come up with those in your own work? A perfect palette looks easy when it’s done right, but it’s often maddeningly difficult and time-consuming to accomplish.
Choosing effective colour schemes will always be more art than science, but there are things you can do that will make coming up with that oh-so-smooth palette just a little a bit easier. A simple trick that can lead to incredibly gratifying results lies in finding a strong photograph and sampling out particularly harmonious colours.
Photo Selection
Not all photos are created equal. You certainly want to start with imagery that fits the eventual tone you’re attempting to create. A well-lit photo of flowers might lead to a poor colour scheme for a funeral parlour’s web site, for example. It’s worth thinking about what you’re trying to say in advance, and finding a photo that lends itself to your message.
As a general rule of thumb, photos that have a lot of neutral or de-saturated tones with one or two strong colours make for the best palette; bright and multi-coloured photos are harder to derive pleasing results from. Let’s start with a relatively neutral image.
Sampling
In the above example, I’ve surrounded the photo with three different background colours directly sampled from the photo itself. Moving from left to right, you can see how each of the sampled colours is from an area of increasingly smaller coverage within the photo, and yet there’s still a strong harmony between the photo and the background image. I don’t really need to pick the big obvious colours from the photo to create that match, I can easily concentrate on more interesting colours that might work better for what I intend.
Using a similar palette, let’s apply those colour choices to a more interesting layout:
In this mini-layout, I’ve re-used the same tan colour from the previous middle image as a background, and sampled out a nicely matching colour for the top and bottom overlays, as well as the two different text colours. Because these colours all fall within a narrow range, the overall balance is harmonious.
What if I want to try something a little more daring? I have a photo of stacked chairs of all different colours, and I’d like to use a few more of those. No problem, provided I watch my colour contrast:
Though it uses varying shades of red, green, and yellow, this palette actually works because the values are even, and the colours muted. Placing red on top of green is usually a hideous combination of death, but if the green is drab enough and the red contrasts well enough, the result can actually be quite pleasing. I’ve chosen red as my loudest colour in this palette, and left green and yellow to play the quiet supporting roles.
Obviously, there are no hard and fast rules here. You might not want to sample absolutely every colour in your scheme from a photo. There are times where you’ll need a variation that’s just a little bit lighter, or a blue that’s not in the photo. You might decide to start from a photo base and tweak, or add in colours of your own. That’s okay too.
Tonal Variations
I’ll leave you with a final trick I’ve been using lately, a way to bring a bit more of a formula into the equation and save some steps.
Starting with the same base palette I sampled from the chairs, in the above image I’ve added a pair of overlaying squares that produce tonal variations of each primary. The lighter variation is simply a solid white square set to 40% opacity, the darker one is a black square at 20%. That gives me a highlight and shadow for each colour, which would prove handy if I had to adapt this colour scheme to a larger layout.
I could add a few more squares of varying opacities, or adjust the layer blending modes for different effects, but as this looks like a great place to end, I’ll leave that up to your experimental whims. Happy colouring!
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
22/12/2006
Great tips, Dave.
Vote Helpful or Unhelpful
22/12/2006
Lovely tips! Thanks
Vote Helpful or Unhelpful
22/12/2006
Very useful – not to mention concise. Top notch.
Vote Helpful or Unhelpful
22/12/2006
I’m loving this tutorial – its a great idea to find some new colours that compliment each other.
Just to add to your last part about creating neighbour hues of a colour – I created this very simple Fireworks tool which does exactly that by changing the document colour. That should save designers a bit of time.
Vote Helpful or Unhelpful
22/12/2006
Nice tips, Dave!
Have a Merry Christmas :)
Vote Helpful or Unhelpful
22/12/2006
A great read Mr. Shea!
I’ll be playing about with my photo collection over the holidays : D
Vote Helpful or Unhelpful
22/12/2006
Speaking of color palettes, here’s a nice tool to help with picking highlight, shadow, and contrast colors.
Vote Helpful or Unhelpful
22/12/2006
Nice stuff Dave!
I quick made a Photochop CS2 action for that last little Tonal variation tip you gave. If anyone wants it yoou can grab it here:
http://www.farnorthdesign.com/DL/MakeSwatch.atn
Once installed just hit F7 and the above pallete will be created based on whatever color is in your foreground.
Cheers!!
Vote Helpful or Unhelpful
22/12/2006
That last tip sounds extremely useful, I’m certainly going to use that!
However, I also feel that you should change the sampled colours to websafe. For example your sampled brown is #461808, but when using it on the web, it would be best to make it #441100 for the sake of supporting as much visitors as possible.
Again, great article :)
Vote Helpful or Unhelpful
22/12/2006
Thanks for the tips, Dave!
I found this via del.icio.us/popular and was pleasantly surprised to discover that not only was this hella useful, but that you’re local!
I always have tons of trouble picking out appropriate colour schemes when I’m putting anything together, so this is a big help and is (surprisingly) geared towards beginners like me.
I’m also finding that colour wheel tool Milo posted really helpful.
Vote Helpful or Unhelpful
23/12/2006
“However, I also feel that you should change the sampled colours to websafe.â€
Nah. It’s not 1998 anymore, websafe is a thing of the past.
Vote Helpful or Unhelpful
24/12/2006
Nice article. You can also use the HSB control to sample tonal matching variations. Just be sure to fiddle around with only one of the HSB values at a time.
Vote Helpful or Unhelpful
27/12/2006
simply effective…
Now perhaps you should start writing user docs for the likes of Adobe, so a ‘layman’ can understand HSB’s and Gaussian and whatnots…
one thing that is really beautiful here is the simplicity with which you have written. very helpful.
God bless,
M.
Vote Helpful or Unhelpful
27/12/2006
Great article – and good examples. Only problem is, you make it sound so simple – but in real life I find it a bit more difficult.
But you’ve given good motivation to try this at home ;-)
Regards,
Lindkold
Vote Helpful or Unhelpful
30/12/2006
Wow, awesome article. Those look great! Thanks for the tips.
Vote Helpful or Unhelpful
02/01/2007
Great article! There’s also nice online tool that extracts a color pallette out of a jpg image.
Vote Helpful or Unhelpful
03/01/2007
This was probably one of the most helpful tutorials I personally have found on this website so far.
Thanks and also thanks for all those other links that we can use for this type of thing.
Vote Helpful or Unhelpful
12/01/2007
Partial automation for the color stupid (me).
Vote Helpful or Unhelpful
23/01/2007
Another great article in the series… and another “ I hate you Dave for making it look so easy” just like in many other ventures those that make it look so easy are truly good at it. A site i stumbled across last week for sharing color palettes and modifying them, Adobe’s Kuler Thanks again for articles that mix a little how to with some much deeper thinking and understanding.
Vote Helpful or Unhelpful
23/01/2007
There seem to be a variety of ways to devise a color pallette but, in the end it’s like testing a site in different browsers. We have to have a variety of eyes to look at it but, be confidant enough in the original choices we’ve made so that feedback can actually help, not hinder the final result. The biggest problem is from clients who insist on something that is just totally wrong.
Vote Helpful or Unhelpful
24/01/2007
You might find this color scheme generator useful. I was a big fan of DeGraeve tool, so I made a mash-up with Flickr Services an a frequent color algorithm so I could get ideas for new website layouts. Hope you find it useful or at least inspirational.
Vote Helpful or Unhelpful
Impress us