A simple way to choose a colour scheme

Posted by Rob on July 16th, 2010

If you’re colour challenged like me, choosing the colours to use in a web project can be tricky. Here’s a simple method that might help.

To do this, you’ll need Photoshop and a picture, preferably one that is significant to your project (like a banner). If you’re project doesn’t use any pictures, find one with a few general colours that you think could work.

Open your picture in Photoshop. For this demonstration I’m using the banner from my personal site. I’m planning to revise that site soon anyhow, so this might give me a head start.

Select Filter > Pixelate > Mosaic from the main menu.

Change the cell size to increase the pixels of each colour square. The larger the pixels, the fewer colours you’ll get. Play around with it until you get a range you like. Keep in mind what each colour will be used for (backgrounds, headings, link states, etc.). This will help you decide how many colours you need in the palette.

Click OK, and presto! You have a colour scheme.

Now all you need to do is use the eyedropper tool to get the hex codes for each colour.

Schweet.

2 Responses

  1. Alan Houser says:

    Yup, that’s old-school. Another tip: take a digital camera to a client’s location and shoot everything (carpet, chairs, artwork). Nothing better than telling the client that you developed their color from their place of business.

    You should check-out colourlovers.com

  2. Rob says:

    Hey Alan,
    Yea, I’m kind of surprised I only just found out about this technique. It’s so simple.

    I usually use colorschemedesigner.com. And someone I work with showed me pictaculous.com a while ago, which is pretty handy. That Colourlovers site looks cool too.

    Thanks for the tip with the digital camera! I have a couple of potential freelance projects coming up, so I’ll keep it in mind. :)

Leave a Reply




You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>