Creating colour palettes
When I am designing a colour scheme for a client site, I am often lead by the colours used in existing logos or publicity materials. But when the client only uses one or two colours, I use a favourite technique for creating complimentary tones.
When I am designing a colour scheme for a client site, I am often lead by the colours used in existing logos or publicity materials as clients want to see the web site ‘fit’ within their company style. But when the client only uses one or two colours, I use a favourite technique for creating a whole range of complimentary ‘tones’.
Less can make more
I start by making a white Fireworks canvas (usually 250 x 100px) and then adding a 250 x 50px black rectangle to the base layer.
Then I sample one colour from a logo graphic, or (in the case of the Status Mortgages site) from a photograph, and create two 50 x 50px squares that I fill with that colour. These are placed over the black and white bases.
Then I duplicate these squares and adjust the opacity of each square (usually 100%, 75%, 50%, 25% and 10%) to allow progressively more of the base colour to show through.
This creates ten tones from a single colour and is easy to replicate for further base colours.
(Swatch colours from Status Mortgages)
I have uploaded my Fireworks PNG source file for anyone who is interested.
One of my essential tools when designing colour schemes is the Vischeck plug-in for Photoshop. This handy tool simulates different forms of colour deficiancies and I mainly use it for checking that link colours contrast sufficiently with normal body text.
Patrick Fitzgerald of Barely Fitz design has also created an interesting solution inspired by this column.
#1 On May 16, 2004 12:46 AM feather said:
See, now this is the kind of post that will really help a guy like me. As you know I'm no designer, but I like to push myself in that direction because it is something that I know I'd like to improve upon.
We often expose our processes and thinking when we are building sites, or advising clients with regard to accessibility, but we've never really seen many people expose their design process. Doug did with his article on his design process, and you've provided a very tasty tidbit here.!!
Thanks mate! This certainly helps to make design "real" and "accessible" to me - simple techniques like this will hopefully be helpful to me!!
#2 On May 16, 2004 10:01 PM blackdolphinstudio said:
Andy very kindly demonstrated this concept to me in person a few weeks ago. I've always had problems identifying colours that are sympathetic to others, but this little tip has seen the quality of my work improve drastically! Thanks Andy :-)
#3 On May 17, 2004 05:01 PM Fishmonster said:
Thanks for the Visicheck tip, very good. I also like this little gem for coming up with groups of complimentary colours: http://kohaistyle.com/scripts/quickcolor/
#4 On May 17, 2004 05:40 PM Phil Baines said:
I was always wondering why you don't have a blog, since your comments are always most insightful.
Now I find out that you do! Bookmarked my friend.
It's so cool to have someone else from wales on my blogroll.
#5 On May 17, 2004 08:17 PM Malarkey said:
Thanks Adam for the link to QuickColor. I haven't had time to evaluate it fully yet, but it looks promising.
You might also like to try http://www.pixy.cz/apps/barvy/index-en.html and http://www.colorschemer.com/online.html.
#6 On May 17, 2004 11:12 PM Gordon Mackay said:
Hey Mr Clarke, Great new blog you have here, and a great idea for generating great colors!
For color scheming I normally see a shade that I like on another site or image whatever, grab it using an amazing and free little tool called “Pixie” that you can get a hold of here: http://www.nattyware.com/?m31. After stealing the color I throw it into another tool called “ColorImpact” http://www.tigercolor.com. I then just fiddle around until I get something pretty nice.
I like semi automated means :)
#7 On May 19, 2004 10:58 AM Mike Pepper said:
Thanks for sharing that, Andy. Very simple and effective.
I use TopStyle's palette picker for harmonious colour selection but what you offer is a great way to build and work with a scheme before the markup process during the mockup stage in a graphics package. Ta!
Way to go Andy. Useful post and a great looking site. I know it's only a small thing, but I really like the borders around your input elements.
#9 On May 19, 2004 11:42 PM Mike Pepper said:
Agreed, AB. Mentioned such to Andy, yesterday. Good attention to detail.
#10 On May 20, 2004 02:05 PM Pete Lambert said:
That's fantastic. Colour schemes always one of my major stumbling block. I've always used guesswork and the "eye" for colour before and then wondered why a lot of my work just doesn't look quite professional enough.
#11 On May 21, 2004 12:45 AM Nick Caldwell said:
Setting this up in Photoshop and adding a Hue/Saturation adjustment layer above it is quite useful too. Need a new scheme? Grab those sliders.
Thanks very much for sharing your technique, Mr. Clarke!
#13 On June 2, 2004 05:32 AM Owen Wagner said:
Great info! Very informative, a nice quick way to easily create a color palette.
Along these same lines, I recently stumbled across a program called ColorShade that I have found to be quite useful.
#14 On June 5, 2004 02:52 PM Stuart Homfray said:
It seems so obvious now that you mention this technique, but then the best ideas always are!!! :)
I always have trouble getting palettes set up, and discovering this on here is a real 'Eureka!' moment for me - I can only echo the thanks given previously!
As the initial image of the white canvas with the black rectangle suggests - Pure Genius!
I made a dreamweaver extension based on this article.
Thanks for the link Ranjan and for the credit on your site. Very nice of you to take the effort.
Not being a Dreamweaver user myself nowadays (except for the occassional table or image map), I can't say how how useful this will be. But if you're a fan of DW extentions, why not check out Ranjan's wee device and report back here?