The Art (and Science) of Choosing a Color Scheme for Your Website

05/18/2016 02:26 pm ET Updated May 18, 2017

Imagine walking around the city late at night, looking for a place that still serves food given the late hour. You come across two places:

  • A brightly lit restaurant, with vivid red walls adorned by an assortment of artwork
  • The other dark, with subdued lighting and monochromatic décor
Now, you might think the first establishment would be the more popular choice, and your assumption would certainly have merit--festive ambiances do have their appeal, after all. But what if the second establishment was a speakeasy bar? Wouldn't its décor also be a perfect match?

These conundrums come into play when choosing a color scheme for your website, a process that, in my experience, is as much a science as it is an art.

Why are Colors Important?

Whether you admit it or not, people tend to judge a book by its cover--looking at appearances is hardwired into our psychology. And in an online world saturated with information and websites competing for your audience's attention, standing out is often hinged on making a solid first impression.

An infographic by Kissmetrics gives us the following numbers:

  • 93 percent of consumers rank visual appearance above other factors--including texture, sound, and smell--when shopping
  • 85 percent of shoppers consider color as the main reason when making a purchase decision
  • Color boosts brand recognition by up to 80 percent, having a dramatic impact on a consumer's confidence in a company
Whatever your website might be, it will no doubt have some kind of conversion goal: a click on the buy button, a subscription to a newsletter, or a like or follow. In any case, that action will often boil down to what a person feels when they're on your website. And color can make a huge impact on your audience's emotions.

In this guide, I break down some pointers on how to choose your site's color scheme. You may notice these tips also apply when choosing colors for your brand in general.

1. Use Colors Relevant to Your Business, Product, and Industry

Of course, you can't just pick an assortment of bright reds, yellows, or oranges because they look 'cheerful' or 'friendly.' First and foremost, your color scheme has to match your business, your industry, and your product or service.

  • For example, if you own a travel agency website that books trips to the Bahamas, Cancun, Baja and other tropical destinations, it only makes sense to use lighter colors, such as green, white, and light blue.
  • On the other hand, if you run a law firm catering to personal injury claims, somber tones like grays and dark blues tend to be more appropriate.

2. Pick Colors Based on Your Audience

Your website's colors should also reflect your audience's demographics and psychographics. After all, a male, millennial video gamer will have different tastes than a middle-aged mother of three. Simply put, your site's color scheme should resonate with your audience. For example, a pink and purple tandem probably won't be a hit with the first demographic group, but has a higher chance of clicking with the middle-aged mom.

3. Use Contrasting Colors, But Do it Sensibly

From a design standpoint, contrasting colors are a great way to add interest to your homepage, making it 'pop' in the eyes of the viewer. However, (and this is especially important) overuse of contrasting colors and primary colors can be jarring (think bright red and green), making your site look tacky. Instead, use complementary colors or varying shades of the same color to create a sensible color scheme.

Oh, and before you tell your designers you want your website design to 'pop,' consider going through this great web design infographic by Anchor Wave first.

4. Don't Sacrifice Readability for Color Design

Remember the old days of the internet, when people actually used light, comic sans text against dark backgrounds in Flash-heavy sites? Thankfully, those days are over, and designers now know not to prioritize color and design over readability. You want to design around your text content, not the other way around.

5. Use Colors, or a Lack Thereof, to Draw Attention to Calls to Action

White space is just as important as actual color. If you have a bright red button against a white background, your site's visitors will naturally be drawn to that design element, increasing its chances of being clicked.

Color has a powerful way of drawing attention and encouraging users to respond.

6. Use Color Psychology to Your Advantage

Wikipedia defines color psychology as "The study of hues as a determinant of human behavior. Color influences perceptions that are not obvious, such as the taste of food." For example, we associate red with spiciness, black with bitterness, and golden brown with flavor.

In the context of website design, color elicits a psychological response, particularly for brands looking to increase traffic and conversions.

But it all depends on your goals. If you want visitors to read lengthy content assets, a peaceful color scheme (like greens, purples or blues) evoke a sense of serenity. But if you want to bring attention to web page elements, like buy buttons and CTAs, high-contrast color combinations like red and white tend to be more effective.

Conclusion

When it comes right down to it, there really are no hard and fast rules when it comes to choosing a color scheme for your website, or brand for that matter.

If you remember, Apple originally had a rainbow Apple logo, and there was certainly nothing wrong with that choice at the time. Fast forward to today, the company's minimalist product design is reflected on their website's color scheme, which favors grays, blacks, and whites.

In other words, effective color schemes are largely subjective. Fortunately, one of the great things about web design lies in its ability to be tested, changed, and tested again. So, don't be afraid to experiment with colors and see which schemes click with your audience.

Have any approaches to color schemes you'd like to share?