Blogging and All that Malarkey Stuff & Nonsense

Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

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)

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 fantastic 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: https://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 blog roll.

  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 https://www.pixy.cz/apps/barvy/index-en.html and https://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 colours. For colour 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: https://www.nattyware.com/?m31. After stealing the colour I throw it into another tool called “ColorImpact” https://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.

    https://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. Thanks again!

  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. https://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 occasional table or image map), I can’t say how how useful this will be. But if you’re a fan of DW extensions, why not check out Ranjan’s wee device and report back here?