Complimentary Color Scheme

How To Pick A Good Site Color Scheme

Website colors are extremely important. One second. Let’s say that again. Color is VERY important. Allright. Now let’s continue.

To begin to illustrate why colors are so very important, we have to list a few basic aspects of color:

Color evokes emotion. (More specifically: People subconsciously react emotionally to colors.)
Color guides the eye. (Meaning that colors are used by the user to follow a trail across a page.)
People see colors differently. (Ever have someone tell you that your dark-blue shirt looks black?)
Computers limit color. (Computer monitors and operating systems will limit and change how colors are shown.)

Color Evokes Emotion

These things are pretty much standard after much research and testing, so I’m just going to give you a quote from a nice article on this topic found here.

“Red is associated with blood, and with feelings that are energetic, exciting, passionate or erotic. Most colors carry both positive and negative implications. The downside of red evokes aggressive feelings, suggesting anger or violence.

Orange is the color of flesh, or the friendly warmth of the hearth fire. The positive implications of this color suggest approachability, informality. The negative side might imply accessibility to the point of suggesting that anyone can approach– a lack of discrimination or quality.

Yellow is the color of sunshine. This color is optimistic, upbeat, modern. The energy of yellow can become overwhelming. Therefore yellow is not a color that tends to dominate fashion for long periods of time.

Green In its positive mode, green suggests nature (plant life, forests), life, stability, restfulness, naturalness. On the other hand, green in some tones or certain contexts (such as green skin) might instead suggest decay (fungus, mold), toxicity, artificiality.

Blue suggests coolness, distance, spirituality, or perhaps reserved elegance. Some shade of blue is flattering to almost anyone. In its negative mode, we can think of the “blues”-the implication being one of sadness, passivity, alienation, or depression.

Violet is the color of fantasy, playfulness, impulsiveness, and dream states. In its negative mode, it can suggest nightmares, or madness.”

Now, there are quite a few websites that have really gone into detail on this topic, I definitely suggest you give Google.com a whirl. However, I’m going to point you toward a couple of sites that are really helpful.

One website called ReturnofDesign has a excellent sampling of popular color schemes that are pleasing to the eye on their color page. That site is great if you want a tried and true color scheme.

Another favorite of mine is WebWhirlers. This site includes some indepth discussion on color theory, and has a lovely little online software program called ‘The Color Wheel’ (free) that lets you create your own complimentary color scheme.

Color Guides the Eye

Where you place your colors, and how you use them, will influence where your viewer looks. Whether you are looking at a webpage or someones living room, some things will always attract the eye better than others. Various things do factor in, such as size, shape, and placement – but color is one of the key elements involved. A careful balance between using color to help guide the eye, and maintaining accessibility standards for the visually impaired is something that will be addressed in another section. For now, let’s focus on some steps.

Step 1) Analyze what your website is for.
Step 2) Decide on no more than four important visual components of your site. (Remember that your site name is always one.)
Step 3) Use a common visual model, or make one that guides the eye on its own.
Step 4) Use emotion specific colors from your color scheme to influence the response to the points.

These things will help some, but the real test is to watch someone visit your site for the first time. Ask a friend, coworker, or relative to take a look at your site. Watch their eyes and their face.

When someone hates a color, they tend to squint when their eyes go near it, somewhat in a way of ‘blocking it out.’ The same with things they can’t see clearly and applies especially to small text. Also watch to see if their eyes follow a natural and easy flow or if they are darting all over the place. Ask them to find you some things on your site. Do they naturally go to the right place or are they not sure where to find it and start searching?

Overall, it’s very important to get actual user feedback on a website.

People See Color Differently

I gave the example earlier about the person who thinks your dark-blue shirt is black. Everyone has a different ‘range’ of color that they can see really well, and this is affected by various vision issues that you have no control over. However, what you can do to control it is to follow three small rules in your color design:

Make sure that you have a drastic color contrast for things that should look different.
Make borders fade gracefully by using a series of small changes in background colors around the edge, rather than one start line.
Remember that people always recall and see information better if it is light text on a dark background better than they recall dark text on a light background.

Computers Limit Color

This is a somewhat intricate topic, so I’ll just give a non-technical overview. Some colors will not show up properly on your users monitor. To compensate for that, the web community has distinguished 216 ‘Web Safe’ colors. An 8-bit monitor displays 256 colors, but not all of those are Web Safe colors. This article explains the entire reasoning behind the ‘Web Safe’ colors. That is definitely some good reading. However, if you’d just like to see what the colors are, you can take a look at the Web Safe colors that W3Schools has on their site. Also, Visibone has a great little color lab program on their website that you can use online. This program will not show you the colors that look best together, but it will show you how the colors look together, and it only uses web safe colors.

Overall, remember: Color Evokes Emotion. Color Guides the Eye. People See Color Differently. Computers Limit Color.

~Nicole