Mr. Pixelsmith answers this letter from Web Design reader in Toronto: |
Curious what you think about the color scheme at the Christian Mommies site. Should it be changed? What would you recommend?
Harmonizing Unity in Color Schemes
... unity makes the reader feel "comfortable"
Wow. What can I say. I think it's lacking unity. Folks, here's the way the site looked the day I reviewed it. (50K 701 x 472 GIF file)
- Color Analysis
- You've got the magenta thing going at the top, then all the yellow, then that orange/russett box in the content area, none of which really goes together.
- The burgundy/mauve part of the magenta is okay, but the bright magenta has to go. It's simply too ... how shall I say it ... garish?
- Choosing a Color Theme
You should decide on a color family -- a set of shades of one or two colors -- and then stick with those colors. Generally it would be considered best to select analogous colors as your primary set. These can come from any position around the color wheel so long as they're related.
Then introduce a complementary color as an accent to use very sparingly.
If you should decide on yellows and browns, which are warm colors, then you might use a blue or green as the accent. Use accent colors judiciously, only where you need emphasis -- not in backgrounds.
For my personal feeling, it simply looks too bright. Mommies probably put up with too much of that 'look' in their children's world anyway. You might experiment with a more calming look -- something neutral and warm. By the time Mommies get around to surfing the web, they probably aren't looking for bright colors or excitement.
- Testing color themes with CSS
Make yourself a copy of your page, and then DELETE all the colors.
Grab a neutral background tile like "Stripes" or perhaps "Speckled Tan" or even "Gold linen" or something similar. (I'm sure you have dozens of such images.)
This would be considered "calm" and "warm" -- so pop it into your test page, and automatically the page will be "calmer"
Now open the GIF in Photoshop... zoom in very, very tight and look for tans and very pale yellows. Photoshop should display the HEX code for the color in the "Info" palette when you move the Eyedropper tool over various pixels.
Those HEX codes are ones you can use for your various table
cells. Select darker colors from the tile for heading colors
or other "emphasis" items. A medium green, orange or even blue makes a nice "compliment"
to this range.
It's only a suggestion, you may want to go with all blues or
something. But you need to "harmonize" the colors for unity.
- Using the Style Sheets
I note you're using style sheets. You can test different color schemes by modifying the sheet, once you've tagged your page to support CSS in the colors used. Rename the style sheets as you go along, then they are interchangable. Maybe different seasonal color schemes would be cool.
Read down through this page where we've done seasonal color schemes over the months. These are color combinations that offer harmony, an accent and even some hybrid "builds" that give you a lot of flexibility.
Take a look at a staging page where another reader is testing different
color schemes for the user group network.
Here, you'll see a tan/brown scheme. But, notice to the right
there's a link to "purple" ... try it. Then use the "Back" and "Forward" buttons to switch quickly between color tests. Then add this page to the mix, and toggle through the pages. (Don't click anything, they're only testing pages, and the links aren't hooked up yet.)
This kind of testing allows you to look at various combinations. Once you have the CSS tags in place, it's a simple matter of cloning the style sheet with different codes.
- Gathering ideas for color combinations
Also use these as reference pages. I think "Pastels" would be nice for "Mommies"
You can also refer to "charts" with even more ideas for finding color "families"
If this has been of help to you, let me know.
- Have fun...