Wise Women List Archive File
Color Theory and Selection
[Someone] asked me the other day for more info about a suggestion I had made
about "limiting your color palette to shades of the same colors as in the
logo" and commented on how she does it in PSP. I don't have PSP so I'm not
much help there but can provide some general ideas.
Shades of one color are referred to in color theory as a monochromatic color
scheme. In the ... logo, there is a nice teal blue and an
olive green or brown color. I have no idea what it would be called in color
theory, but basically the idea is to make a monochromatic color scheme from
each of the two colors, then make up the page color scheme from each of the
two monochromatic color schemes.
One of the first things I do when faced with a logo designed by someone else
is to fool around with trying to shift the logo to Web safe colors, either
in Illustrator or ImageReady. Few logo designers, being print animals, know
about the Web safe color scheme. If I can shift the colors without a
noticeable difference, I'll do it. If not, I would work with non Web safe
How I proceed from there depends a lot on how religiously I want to stick to
the Web safe palette. (Nowadays, the answer is "not very.") If sticking to
the Web safe palette, I simply look at the color swatches in Photoshop and
pick the next few lighter or darker shades of one of the logo colors. This
is simply a visual process -- there's no right or wrong way to do it. Since
the color swatches in Photoshop's palettes are so small, I find it's easier
when I make a "scratch pad" in my Photoshop file by adding an extra layer,
sampling colors from the logo, then filling generously sized selections on
my extra layer with the logo colors, then sampling colors in the palette and
filling selections next to the logo color on my scratch pad layer until I
get several swatches of colors that I find pleasing.
An easy way to make a monochromatic non Web safe scheme is to match a large
swatch of the color, then make a selection of the color, fill it with 20%
white. Fill another selection with 40% white, and so on until you get a
sufficient number of colors.
Here's a handy tool I just ran across: the Web safe color wheel divided into
shades from light to dark. Scroll down for hex values:
In the wheel above, you wouldn't necessarily assume that all the colors look
great together. Use your own judgement. For example, to my eye, #1 in the
Yellow Orange slice would blend better with the lighter shades in the Orange
slice. And I wouldn't have called the darkest color (#1) in the Orange slice
"orange" - it looks more brown to me.
As you scan the slices, you'll see that many colors in a slice don't really
match. To choose shades from this wheel that are pleasing together, look to
see which segments of the slice "borrow" colors from neighboring slices. For
example, in the Red Violet slice, segments 2, 3, 6, and 8 contain more
Violet than the other segments, so they would make a more pleasing
I made up a file showing how one might start with two colors similar to
those in [someone's] logo, then, with a little knowledge of color theory, develop
color schemes based on the logo. In each group of colors, the top row is a
true monochromatic scheme made by adding white to the color, while the
bottom row is a pseudo-monochromatic scheme made up of Web safe colors only.
Here are some color theory articles that may be helpful:
A good explanation and visual example of monochromatic colors:
Linda Weinman article: http://www.webtechniques.com/archives/1998/03/desi/
This article is about a different way of looking at color -- the color
cube -- rather scientific and obtuse for me but some of you may connect with
Have fun experimenting with color!