In this article Mr. Pixelsmith helps a reader harmonize the color scheme of a web page to add unity to the look... in the
Mr. Pixelsmith department of   WebDesign & Review

Mr. Pixelsmith helps make your web site better

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
  1. 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.
  2. 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
Christian Mommies 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...

Mr. Pixelsmith

Posted: 11/12/2003

Return to Mr. Pixelsmith, or back to the Critique Department Index   |   Or: Select a reader site to review!


Design & Publishing   /   WebDesign & Review   /   See the current newsletter

Submit your web site for review ... by using the Website Input Form.
 
Become a WebDesign reviewer! ...become a regular, and be promoted by The Design Center. Just review some sites that have been sent in by readers. Post your reviews individually to our REVIEWS page, where you'll find everything you need. If you'd like to publish your articles, hints, tips or tricks in the pages of WebDesign & Review then read our " Readers Guidelines ."


Thank you for visiting WebDesign & Review at http://www.graphic-design.com/web/
Notes: The screen shots herein represent the copyrighted works of their respective owners, and are used here for editorial demonstration purposes. Permission has been granted to display and review all sites in WebDesign & Review by the website owners. Please read and be aware of our Legal Properties & Disclaimers document.
ALL RIGHTS RESERVED. Copyright 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003 Showker Graphic Arts, for the The Design & Publishing Center.   WebDesign & Review, Pixelsmith, WebEye are all trademarks for The Design & Publishing Center. WebDesign & Review is a wholly owned publication of Showker Graphic Arts & Design, Harrisonburg, Virginia, USA. Other products mentioned in these pages are the registered trademarks of their respective owners.