home about/faq features tutorials resources members search

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 colors.

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: http://www.inherent.com/tools/colortheory101/browsersafe.cfm

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 monochromatic scheme.

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.

Color Swatch

Here are some color theory articles that may be helpful:

A good explanation and visual example of monochromatic colors: http://www.webdesignclinic.com/ezine/v1i1/color/part3.html

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 it: http://www.colorcube.com/articles/theory/theory.htm

Have fun experimenting with color!




Recommendations and Reviews for web professionals.

List Archives

Project WW Archive: how you can help us to build up a treasure trove of useful information.

List of available archives

Alphabet Soup

Essential terminology for the serious web professional.


Printable version of this page

Link to us

Join the discussion lists

passionate about the web