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.
About the author:
Mike Morgan is the owner of Bison Creek Desktop Publishing,
(http://www.zianet.com/bisoncreek) offering a variety of
low-cost and "you'll-owe-me-one" service to those long on vision
but short on funds. Need an outlet for your e-book? A cover
designed? A review or testimonial? Sales copy?
