How Website Colors May Help Improve Your Conversions

Web design

Most content marketers will agree with the notion that content is king - after all, what better way to establish a brand but to write engaging and informative content? However, many people tend to forget that web design is perhaps the king's crown of content marketing. If you want your content to stand out, you've got to have a web design to match it. A simple change in layout can make a drastic change to your blog's overall performance - even with a color scheme. Which may lead many to ask the question as to how website colors may help improve your conversions.

First, let's check a few numbers. You may have heard that websites that take too long to load have a huge chance of turning off prospects - 39-percent of people worldwide will quit engaging with a site if the images take too long to load. However, did you know 48-percent of viewers say web design is one of the most important factors in deciding a business' credibility? 38-percent of viewers stop using a website if its layout is unattractive, and nearly two-thirds of online viewers prefer reading content with a beautiful design to match.

This leads us to the question: How exactly do we make sure colors help boost conversions? Here are some of the reasons and the ways:

Ensure website colors go with the branding

Your web design exists not just as a "shell" through which your blogs can exist, it's there because it's a representation of your brand identity. Outside your products and services, your blog and your online presence is your brand's way of "communicating" with your audience. As such, appearances matter. Make sure your chosen color scheme goes with your branding.

  • If you have an icon with you, try to determine if one of its dominant colors can work for your blog's "primary" color. It can either be the second color or the dominant color of your logo, depending on your preference.
  • It's recommended you do not use your chosen color as the space for your content - but use it for the rest of the details like headers and sidebars. Leave the space for your content white to help you find a way to direct reader focus.

Understand what most colors imply

When choosing colors for your website, the same logic of why you chose your logo colors applies here - but on a larger scale. As in color psychology, some colors tend to imply or "evoke" emotions and responses. For instance, red indicates passion and action, black for mystery and style, and blue for calmness. This also applies in web design.

Understand what most colors imply

  • Note that certain color groupings apply to certain demographics. For instance, warm hues like red and orange, black, and royal blue appeal to impulse shoppers because they appear exciting (red), mysterious (black), and regal (blue). Green, on the other hand, resembles wealth, health, tranquility, and nature.
  • Meanwhile, the majority of blue hues correspond to finance, because they're commonly associated with money and have a general calming atmosphere. Royal blue and navy blue also have a calming effect on users, and teal closely resembles the color of money.
  • Pastel colors or otherwise "feminine" colors such as sky blue, rose, and pink generate an air of "normalcy", "success", and "freedom" and tend to attract traditional buyers.

Understand how color combinations work

Now that we know that brands and colors can blend together to help "imply" something, it's also important to remember that certain color combinations can work to your benefit. Sometimes the mind can perceive colors that dictate their preference, so you should take advantage of these.

  • While men and women have a general preference between dark and light colors, it's been learnt that men like brighter colors and women like softer tones. In terms of achromatic or hue-less colors (such as greys, blacks, and whites), men tend to prefer those more. Hence several car brand colors appear "plain" and "cater to men".
  • Men also prefer shades, while women prefer tints. Shades simply imply colors with a bit of black, and tints as colors with a bit of white. Interestingly, in terms of plain colors - blue, purple, and green tend to capture the hearts of women more; while blue, green, and black capture the attention of men.

If you're in need of help with targeting much more specific demographics, a conversion rate optimization agency may be able to help you deal with this predicament.

Know where to place your colors

Now that we've explained that particular color "combinations" help appeal to certain demographics, you can now try to use these colors on your website. You can't just use them willy-nilly though, as there are still ways to make your colors "pop" properly. For instance:

  • When using your dominant or primary color, use them in places you want viewers to see. These include the logo, menu tabs, calls-to-action ("Call Now!" etc.), highlights, titles and headlines.
  • When deciding on your accent colors, try checking if an opposite color in the color wheel works. Try not to use anything within the hue of the dominant color as it may appear dull. These accents can be used to highlight current tabs, subtitles, and secondary information.

Conclusion: it's all in the pattern, balance, message

What a lot of people don't remember about web design is that it's all about the message you want to convey. Design principles work best not because they're "trendy" or "hip," but they blend well with your brand identity and your message. As such, before following any of the tips above, it's also advised you check if the principles you want to apply can go with your current brand direction. After that, feel free to mix and match.

Related article: Emotionally Intelligent Design: Why You Need It in Your Mobile App



This is a guest post by James Spittal. James is the founder of Conversion Rate Optimization and A/B testing obsessed digital marketing agency, Web Marketing ROI. They help brands with high-traffic websites optimize their conversion rate using A/B testing and personalization.

Get in Touch