Stuff and Nonsense

Malarkey is Andy Clarke, a UK based designer, author and speaker who has a passion for design, CSS and web accessibility.

Andy has been working on the web for almost ten years. He is a visual web designer and author and he founded Stuff and Nonsense in 1998. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. Andy is the author of Transcending CSS: The Fine Art of Web Design, published by New Riders in 2006.

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'.

Dave Shea posted an interesting article this week on coming up with a good colour scheme.

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 find it easier to implement this technique using Macromedia Fireworks rather than Photoshop.

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.

ten tones from a single colour

This creates ten tones from a single colour and is easy to replicate for further base colours.

Swatch colours from Status Mortgages(Swatch colours from Status Mortgages)

I have uploaded my Fireworks PNG source file for anyone who is interested.

Vischeck

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.

Updates

Steve at Slayer Office has created a fanstastic Color Palette Creator tool from this technique. Steve, you're the man!

Patrick Fitzgerald of Barely Fitz design has also created an interesting solution inspired by this column.

Replies

  1. #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. #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. #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. #4 On May 17, 2004 05:40 PM Phil Baines said:

    Andy,

    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. #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. #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. #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!

  8. #8 On May 19, 2004 01:19 PM Andy Budd said:

    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. #9 On May 19, 2004 11:42 PM Mike Pepper said:

    Agreed, AB. Mentioned such to Andy, yesterday. Good attention to detail.

  10. #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.

    Cheers.

  11. #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.

  12. #12 On May 21, 2004 02:49 AM Steve said:

    I've hobbled together a javascript app inspired by this tip.

    http://slayeroffice.com/tools/color_palette/

    Thanks very much for sharing your technique, Mr. Clarke!

  13. #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.

    http://www.colorshade.com

    Thanks again!
    Owen

  14. #14 On June 5, 2004 02:52 PM Stuart Homfray said:

    Andy,

    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!

  15. #15 On June 8, 2004 09:34 AM ranjan said:

    I made a dreamweaver extension based on this article.

    http://ranjan.ws/50

  16. #16 On June 8, 2004 09:47 AM Malarkey said:

    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?

This article was originally published by Andy Clarke on his personal web site And All That Malarkey and is reproduced here for archive purposes. This article is published under a Creative Commons By Attribution License 2.0.

Andy Clarke Stuff and Nonsense Ltd.
The Cow Shed Studio, Eversleigh Gwaenysgor Flintshire LL18 6EP UK

Or call us on the dog and bone on +44 1745 851848. Download our vcard.

© Copyright Stuff and Nonsense Ltd. All Rights Reserved except as noted.