Website Colors

When designing a website it can be very easy to overlook your choice of colors or it be secondary to the overall design of the site. I'm sure most people who use the web long enough have come across sites that strain your eyes to read the text.

Try reading red print on a blue background.

It's harder to read from a monitor than on paper, so make it as easy as possible for your visitor to read your text. This is why you see black text on a white background both on and off screen because it is one of the easiest color combinations to read.

Your choice of color should be dictated by what you want your site to portray. This applies both on and offline, if you need convinced of this go to any number of chain restaurants and check out their choice of color. Burger King uses orange and you can be sure they did their homework and found out that orange and red encourages people to eat faster, therefore they make more money by having space for more patrons during the same period of time.

While not every color makes you want to eat faster, every color does evoke an emotion, some more subtle then others. The emotions that come with the colors also carry negative and positive ideas. Although individual people may associate differently with different colors, below is a breakdown of select colors and the feelings associated with them.

Red:
Positive: Sense of power, strength, action, passion, sexuality
Negative: Anger, forcefulness, impulsiveness, impatience, intimidation, conquest, violence and revenge

Yellow:
Positive: Caution, brightness, intelligence, joy, organization, Spring time
Negative: Criticism, laziness, or cynicism

Blue:
Positive: Tranquility, love, acceptance, patience, understanding, cooperation, comfort, loyalty and security
Negative: Fear, coldness, passivity and depression

Orange:
Positive: Steadfastness, courage, confidence, friendliness, and cheerfulness, warmth, excitement and energy
Negative: Ignorance, inferiority, sluggishness and superiority

Purple:
Positive: Royalty, sophistication, religion
Negative: Bruised or foreboding

Green:
Positive: Money, health, food, nature, hope, growth, freshness, soothing, sharing, and responsiveness
Negative: Envy, greed, constriction, guilt, jealousy and disorder

Black:
Positive: Dramatic, classy, committed, serious
Negative: Evil, death, ignorance, coldness

White:
Positive: Pure, fresh, easy, cleanliness or goodness
Negative: Blind, winter, cold, distant

When I first started creating websites I was adamant about using "Web Safe" colors, however as technology has advanced I dropped "Web Safe" colors and use the complete rainbow of colors. The advantage of using "Web Safe" colors back then and even now is that you guarantee what you see, your visitors will also see regardless of their monitor, resolution or platform. Graphic programs usually will have a save for "Web Safe" colors option if you would like to guarantee everyone will see the same thing you are looking at.

So now we know it's important to choose colors carefully. Try to stick with as fewest colors as possible. I try to design with 2 colors, usually a main color and a second complimentary color. Now we know how to use colors, so based on what you want from your site you can choose colors to accommodate this. Not all colors are going to work together, so be creative and try a variety of colors before deciding on a set color scheme. Unless you already have an established brand set of colors, you have the rainbow of colors to work with. Keep in mind that your advertising venues, should compliment each other, so your website, business cards, stationary and any other print material should be uniform.

Colors should not only be chosen for your website layout, but also for your website content. We've learned that red is an "action" color. Put this to use and use red for sales or promotions you want to advertise.

Add Comments Below
 

slub - Posted 11/7/2007 this is awesome. this is really great matt.