Top Secret Tips for a Perfect Color Scheme

Many Web page builders agonize unnecessarily over choosing a
color scheme for their pages. In addition to the color
choices themselves, the proportion of those colors is also
critical to the overall look of the Web page. Fortunately,
there is a very simple, foolproof way to create a perfectly
harmonized and proportionate color palette.

This method is so simple, and so effective, that I don't
know why it isn't plastered all over the web ... but it
isn't, it's still a "secret".

I use Adobe PhotoShop, but the technique will work with any
graphics creation or editing program with an eyedropper tool
and the ability to open an image file.

1. Find any image -- anywhere, I use the web frequently --
in which you find the colors visually appealing. Don't worry
about copyright because you will not be copying any part of
the image. It doesn't matter why you find the colors
appealing, just that you do. To determine whether it is the
colors or some other aspect of the image that you find
attractive, squint your eyes until the image blurs. If the
colors alone are still appealing, use that image.

2. Save the image, then open it in your image editing
application. I'll call this your "source" image. Open a new
document in the same work area. This is your "palette"
image.

3. From the source image, determine the color that covers
the most area. Use the eyedropper tool to sample that color.
In your palette image, use the paint bucket (or fill) tool
to set this as the background color.

4. Pick another color, with the eyedropper tool, from the
source image. Notice the proportion that the color has to
the overall image. In your palette image, use the
rectangular selection (or draw rectangle) tool to create an
area that has roughly the same proportion to the whole
palette image and the source color has to the source image.
Again, use the paint bucket (or fill) tool to set the new
rectangle to the new color.

5. Continue transferring colors, in the same approximate
proportions, until you have four or five palette image
colors in addition to the background.

6. If your imaging application is able, convert the image to
"web safe" colors, and save your new color palette.

7. Write down the hex codes (the '#' followed by six letters
or numbers) for your colors.

8. Determine the relative proportion each Web page element
has to the overall page, and assign the corresponding
palette image colors to them.

Of course, you'll have to tweak your colors a little bit
until you get the look you want, but this "secret" method
can save you hours of trial and error.