What if you had a way to make every person who visited your website click on the “Call Now” or “Subscribe” button? Would that change your business? You bet it would.

Color on websites affects our emotions and actions. Certain colors send messages about your business to visitors. It can cause someone to feel a sense of security and tranquility towards your company, or distrust and frustration. Colors can lead someone throughout your site or deter visitors. Ultimately, the color choices you make on your website can make or break someone’s decision to do business with you.

How To Use Color Effectively On Your Website

Some of the most common web design mistakes have to do with the excessive and improper use of color. You should follow these guidelines when deciding when, where, and which colors to use on your site.

1. Match Your Logo

Your logo is incredibly important. Oftentimes, it is the first thing someone notices when they visit your site. It appears at the top of every page on your website and links back to the home page. In addition, it appears on any formal document you give to a client. Logos typically employ one main color, which should be used on your website. Using your logo colors is an immediate signal to your visitors that they’ve reached the right place and conveys a sense of security.

2. Use Contrasting Colors

In addition to using your logo color on your site, you should also pick one or two contrasting colors for call to action items and buttons. These are elements you want people to click on, such as “Contact Us” or “View More”. Contrasting colors grab attention and encourage users to click on something.

3. Color Consistency

Using the same colors throughout your site makes users feel comfortable. They begin to expect certain elements to be specific colors. This doesn’t mean you have to be boring. Using various tones of the same color can add variety, while still maintaining color consistency.

4. Don’t Use Too Many Colors

Your website should employ a variety of colors, but don’t go overboard. Too many colors causes confusion and distraction for users, causing their eye to look every which way. It’s best to stick to 2-3 distinct colors.

5. Where To Use Color

Just because you are in love with the color of your website, doesn’t mean it should be used everywhere. A little white space is a good thing, as it gives people some “breathing room”. When you do use color, it should be for a purpose.

  • Logo Color– Navigation menus, boxes, buttons, links and search fields are all areas where you should use your logo color. This will highlight the main features of your site, making them easy to see when users need to do a task.
  • Contrasting Colors– As we’ve mentioned, contrasting colors should be used for call to action items, as they are attention grabbing.
  • High Contrast Colors (black + white)– Wherever there is a lot of text, you should use high contrast colors that do not compete with your logo. Black and white are best for these areas because together they make text easy to read. Black text on a white background is the standard convention for text on the web.

Now, let’s take a look at a couple examples!

Color On The UPS Website

UPS has a brown logo. While brown isn’t a particularly attractive color, it’s the color of boxes and matches the company well. However, their site is blue? This makes it very confusing for a visitor. Have I reached the right place? Is this the right UPS website? These are not the questions you want someone asking upon landing on your site.

UPSwebsite2.png

Color On The American Express Website

American Express does a fantastic job of using their blue for their main functions, and orange/yellow for call to action items. It’s clear this is their site, and the user can easily find navigation functions. Additionally, the Login button and “Daily Getaways” text are particularly eye-catching, encouraging a user to click. The text is also easily readable.

americanexpress-1024x602.png

If you’re looking for a way to improve your website and motivate your customers to take certain actions, the proper use of color is a highly effective means to achieve this. While color may not be something you think about often, is has a much larger impact on emotions and actions than we realize. Individual and cultural reactions towards certain colors may vary, but the proper use of color on the web will consistently draw attention.