Choosing a colour scheme for the web

Choosing a colour scheme, or swatch, is one of the first things you need to do in planning a design. Thankfully Adobe provides a number of tools that make creating and managing swatches simple.

Different approaches to colour schemes

Agreeing at least a working swatch with a client can make the design process run much more smoothly. Many designers define the swatch after initial logo explorations. I like to get an idea of the swatch and then start on the logo.

How you approach colour schemes is very much a matter of personal choice but my preference is to choose five colours. Three colours are complimentary, one is a contrast and one is a highlight. The tricky part is finding colours that fulfil all of these criteria but go together as a whole. Look around you for inpiration - you might find it on an advert on a bus or on the hairclip of a barmaid. Where there is colour there is inspiration.

Adobe to the rescue

If you haven't got time to immerse yourself in colour theory or daydreaming the nice folks at Adobe have just launched a very useful online application called Kuler. This allows you to create colour schemes online and even share them. There are many options available to you and moreover you can browse other colour schemes for inspiration.

The only word of caution is that colours generated may not be websafe. For an overview of the issue involved here read this article.

Managing swatches in your projects

If you are Creative Suite CS2 user you can export swatches from Kuler directly into Photoshop, Illustrator or Indesign. Once you are signed in you can export colour schemes as an Adobe Swatch Exchange File. This is a really useful feature. Try downloading a swatch you like.

Importing the swatch is straight forward. In Photoshop for example go to Window > Swatches. This brings up the Swatches Window. Click the fly-out menu in the top right hand corner. You can either load swatches or replace swatches. I like to keep things clean in my Swatch window so I choose replace. This shows only the colours from the swatch I am using at the time. I can then design away and have quick access to the colour scheme I'm using. Furthermore if there is another designer on the project I can send the swatch quickly and easily as an .ase file.

Instead of scribbling the colours on a piece of paper you now have them in a swatch that you can refer to at any point. Clicking a colour in the swatch makes it the primary colour so it should make things much easier!

Comments

Shycon Design Nov 26 2006: Nice tutorial. I didn’t know about that Adobe color site, so thanks for the tip!
Hex Nov 29 2006: well nice tool..similar to one on http://wellstyled.com/tools/colorscheme2/
Charlotte Nov 29 2006: Thanks, kuler is great
misund Dec 4 2006: i like this one: http://meddle.dzygn.com/tests/colors/
fokus Jan 7 2007: another one online tool:
http://www.colorblender.com
and online gallery (+offline downloadable soft):
http://www.colorschemer.com/
yo!
philip Mar 6 2007: i need to know about blending correct beautiful colors
haiming webhosting reviews May 9 2008: Nice!It’s good for me.I always can’t touch the color for the web.
David Jul 3 2008: Thanks - nice tools!