The Colors Do Matter: How to Pick Colors for a Winning Website Design

Posted by Mustafa

Which color has a calming effect? Which one increases heart rate? Do certain colors make a customer more comfortable with buying from your site?

When visitors first load your website you have approximately 30 seconds to catch their attention. Your web design better be appealing, easy to view, and instantly captivate your visitor or you can say hello to Mr. Back Button.

The colors of the layout can largely affect a users perception of how easy to use, or professional you web site looks.

Even before the web, advertising pioneer David Ogilvy found that advertisements in at least four colors are 100% more memorable than ads in black and white. He also notes that white (or light) background colors with black (or dark) text color improved conversion by 100% as opposed to the reverse. Colors capture visitors’ attention, trigger emotions and when used correctly they help you keep viewers around long enough to make you money.

The Meaning of Color: The First Impression of Your Web Site

Different colors have different meanings and associations. They engage your visitors emotions, silently and powerfully.

What colors mean in North America:

White WHITE – Projects cleanliness, and refinement. Brides wear white as a sign of purity as do doctors. Impressions: refreshing, clarity, and truthfulness.

Black BLACK – Power, sophisticated, seriousness. Creates drama and strong emotions but too much is overwhelming. A bad background choice. Impressions: mystery, exclusive, or evil.

Blue BLUE – The most popular color worldwide. Promotes business dependability; a good choice for building customer loyalty. Impressions: cooling, serene, can also be cold.

Red RED – Excitement, danger, passion, energetic. Red draws attention, increases heart rate and stimulates appetite. Use it to focus attention with boldness and accents, and promote excitement. Impressions: Enthusiasm, encourages confidence, action.

Green GREEN – Natural, healthy, peaceful. Green promotes tranquility, and financial stability. The second favorite color, green is easy on the eye. Impressions: renewal, harmony,relaxing.

Purple PURPLE – Wisdom, royalty, spirituality or sophistication, celebration or mournfulness. Purple is made of blue (calming) and red (stimulating) and the dominant undertone will define perception. Frequently a favorite of adolescent girls and creative people; purple can promote a premium service or create a romantic, feminine appeal. Impressions: encourages creativity, uplifting, spiritual, and calming.

Orange ORANGE – Warmth, energy, play, excitement. It can add fun to your site, or be a highlight on charts and graphs. Impressions: stimulates activity and appetite, and encourages socialization.

Brown BROWN – Effectiveness, stability, and richness. It’s associated with natural, organic things. Impressions: a connection to the earth, wholesome feelings, and orderliness.

 

As you can see, your colors will have an immediate effect on visitors.

 

Some Effective Color Schemes

So what’s the right color scheme for a positive effect? First, carefully consider colors to promote your image. Use a background color and text color that contrast but work in harmony. Variations of one color don’t provide enough contrast.

A light background color (instead of white) maintains contrast, but is easier to read since it softens the screen’s brightness. Gray’s a favorite background choice, although, green is gaining favor as the “new gray.” Choose a text color that stands out and is easy to read against your background. Use bold, primary colors to draw attention to important page elements. But be careful: Too many colors can distract and reduce readability. In addition, colors should enhance site usability. Establishing a color for headings and a color for links allows visitors to navigate quickly and easily.

Accommodating the Color Blind Online

Web sites with good balance and color schemes have the usability and appearance. Similarities in hues and brightness harmonize colors and create attractive color schemes. However, they’re not “user-friendly” for the visually impaired. Nearly one in 12 visitors to your site will have some form of color-blindness. Most commonly, the inability to distinguish between red and green. So a red-green combination is a bad choice for usability. If links are a different color, but aren’t identifiable as links, color-blind visitors may not realize that they are links. Blue is recognizable by everyone, and the standard usage of blue, underlined lettering for links gives all visitors the same usability.

With all colors, it’s best to keep them bright and distinct to clearly separate headings, links, and text, and increase functionality.

Use the following links to help choose your winning color schemes.

Give thought to what emotions your colors will trigger, and how the colors enhance your site’s usability. When you consider your viewer’s needs, select a color scheme that is appealing, and is easy for them to use, you’ll have the winning edge to convert visitors into customers.

Save this at: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • Digg
  • DZone
  • Reddit
  • StumbleUpon

Like this post? Stay up to date by Subscribing to our Full RSS Feeds


Other People Who Read This, Also Read

Reader Comments

  1. DesignVitality » Blog Archive » The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources - July 19th, 2007

    […] The Colors Do Matter: How to Pick Colors for a Winning Web Design […]

  2. tricker - July 25th, 2007

    such a helpful information…
    but can we have some sample color schema for the browser safe colors..

    any pointer for the same is high appriciable..

    Thanks,
    Tricker

  3. By Design: Charting, Surfing, and Color | Logo Design Works - September 10th, 2007

    […] on any computer monitor, provided they’re calibrated. Also see Design Vitality, who offer the meanings of basic colors, in terms of moods […]

  4. web tasarimi - October 2nd, 2007

    Thank you Mustafa, Its really valuable information and interesting.

    Ozcan

RSS feed for comments on this post. TrackBack URI

Leave a comment

Your e-mail address will be kept private. HTML is not allowed.


*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image