Are you struggling to choose a great color scheme for your website?

If you have any ‘dress sense’, you’ll know that when you get dressed each morning it’s important to wear matching colors, or you’ll certainly look less well-groomed and professional, if not plain weird.

It’s also important to have a well-dressed website. Clashing colors are so hard on the eyes of your visitors, and they won’t stick around long enough to read your marketing message if you have a downright unpleasant color scheme.

On the other hand, if you stick to using ‘safe’ colors like black and white with dark red or navy blue accents, you will probably blend too much into the crowd of other websites out there in cyberspace.

The same thing can happen if all the websites in your field are using a faddish color scheme like blue and orange, and you follow the crowd. Following fads can also make your site look outdated very quickly.

So, what you need is a simple color scheme that is classic and helps you stand out – in a good way. But with the millions of colors out there, how do you know which to combine?

A word about ‘web-safe colors’

You may have heard that there is a limited number of colors that are safe to use online. That may have been the case many years ago, but even that is debatable.

The fact you have to face is that your visitors all have different monitors with different brightness, contrast and color settings, and different video cards. Only designers have monitors that are ‘calibrated’ to show ‘true’ colors. So, your colors can’t possibly look exactly the same on every single monitor out there.

But your color scheme will look mostly the same on most people’s screens, and that’s good enough. So, don’t pay too much attention the ‘web-safe color’ theory.

Here is one technique you can use to choose your color scheme.

The Foolproof Photo Technique

This is one of my favorite techniques. Many websites have a ‘header graphic’ (a.k.a. ‘banner graphic’) at the top of the design. If you plan on using a photo for the header graphic, it’s much easier to choose this photo first, then derive your color scheme from it. It’s much harder to find a photo that matches an existing color scheme, than to find a color scheme that matches a photo.

Step one – find a suitable photo

The first thing you need to do is find a photo for the header. You can buy the right to use stock photos for $1 – $2 from Big Stock Photo and iStockPhoto. It can be tricky to find a relevant photo that suits the long, narrow dimensions needed for a header graphic. You may want some help from a good designer for this.

If you’re not using a header graphic in your design, but you will be using a certain photo on every page, then you can use that photo as the basis of your color scheme – it doesn’t have to be a header graphic.

For this demonstration, I’ll use a smaller photo (of the ‘wrong’ dimensions for a header graphic) to show you how to create a colour scheme. Normally you would crop the photo to the right dimensions to fit your design first.

Step two – create a color palette

Now, if you have Photoshop or you hire a designer, you can turn the photo into a colour palette. (If you don’t, it’s a bit trickier, but you can skip this step and go to step 3.) This is done by using the Mosaic filter in Photoshop. Basically, it turns the photo into big blocks of colours.

Step three – use a color picker

Now you’re going to choose three to five of these colors with a “color picker” to create a unique color scheme.

You can use the eyedropper tool in Photoshop, or if you don’t have Photoshop, you could use a free Firefox extension called Colorzilla (and open your image in Firefox – or just go to your website if your photo is already on your site). You need to find out the hex code of the colours you want.

Or use an online tool that turns photos into color schemes. Here’s one that is pretty good:

http://www.aminus3.com/color/scheme-generator/

The hex code is the 6 digit alphanumeric value next to the # sign – for instance, white is #FFFFFF. That’s the code you’ll need to put into the code of your website.

You can safely use these colors for headings, subheading, backgrounds, buttons, links, and so on in your web design, knowing that the colors harmonize with each other and perfectly match the photo.

Here is the original photo again:

Here are the colors I chose:

And here are the hex codes for these colors:

#5c7ba1

#98ae1a

#b2ab6e

#a58738

#4e6389

Notice they are a bit different from the ones automatically chosen by the online tool. Choosing colors in Photoshop or just by using a color picker directly on a photo gives you greater flexibility.

If you would like some help using this technique, please leave a comment below or email me at me@trishacupra.com