How Color Theory Affects Landing Page Conversion

By , January 29th, 2013 in Landing Pages | 21 comments
color theory and landing pages

When you sat down to design and develop the landing page for your website, how did you choose the colors? It’s most likely that you chose them based on your existing brand identity, or even on something as simple as what you thought looked best.

You may be interested to know that this isn’t how the most engaging landing pages are developed. Instead, successful online marketers use color theory to really make their landing page intentions clear.

What is Color Theory?

The importance of color theory is something that artists and designers have been aware of for a long time. Visual impact is greatly determined by color and colors combinations, and can even lead us to have different emotional responses.

Color theory is a wide topic, and one that has interested artists and scientists alike for centuries. Some of the earliest principles of the theory date back to 1435 when Italian renaissance man Leone Battista Alberti wrote;

“Through the mixing of colors infinite other colors are born, but there are only four true colors – as there are four elements – from which more and more other kinds of colors may be thus created. Red is the color of fire, blue of the air, green of the water, and of the earth grey and ash.”

Of course, later theorists including Leonardo De Vinci and Issac Newton proved that the three primary colors are actually red, yellow and blue.

Modern color theory was developed by American artist and teacher Albert Munsell in the late nineteenth/early twentieth century. Rather than the simplistic traditional adherence to the three historical primary colors, Munsell developed a new theory that emphasized the concepts of color space, including a framework of hue, value and chroma. Munsell’s theory incorporates key scientific findings from Helmnoltz, Maxwell and Hering. His three dimension color frameworks are fundamental to the psychological associations of color.

In the past few decades, a digital color theory has emerged. Theorists, designers and web developers have worked to investigate how color is translated and viewed via digital platforms.

How Does Color Theory Relate To Your Landing Pages?

In the digital age, color theory has become important to a much larger range of people. When consumers visit websites, they typically make up their mind within the first few seconds. This is why effective landing pages are so important for online success: if you can’t get the attention and trust of your site visitors straight away, you’re likely to lose them forever.

There are two specific ways that color theory relates to designing a successful landing page:

  1. Contrasting color combinations and readability
  2. Psychological color associations

Using these two methods and taking the time to really put some thought into the color combinations you choose for your landing page will help you to make choices based on what will be most effective, rather than making an arbitrary choice based on ‘what looks nice’.

Doing this will help you to engage visitors to your landing page in the first few seconds and significantly reduce your the bounce rate. It will also help you create effective calls-to-action and increase your sales.

What Do Your Color Choices Say To Your Visitors?

It’s important to take psychological color associations into account when you’re designing a landing page. If you don’t look into what the colors you’ve chosen mean, you may find that you’re passing on a message to your site visitors that you didn’t intend. Here’s a breakdown of some of the most popular color associations.

blue man group color theory and landing pages

I’m blue da ba dee da ba die (Image Source)

Blue stands for trustworthiness, loyalty and sincerity. It’s seen as an intellectual color that also has associations with communication, logic and coolness.

Yellow is seen as a youthful, optimistic color that grabs attention. It’s also associated with emotions, self esteem, creativity and friendliness.

Red is a very physical color which quickens the heart rate and promotes urgency. It stands for energy, courage, strength, excitement and defiance. Warmth is also a key association.

Green is often seen as the color of wealth. It’s a relaxing color which is the easiest one for the eyes to process. It promotes balance, health, refreshment and restoration, and is often associated with the environment.

Orange is an aggressive color that creates a call to action. It is associated with fun, warmth, passion and security.

Pink is generally seen as a romantic, feminine color. It stands for love, warmth, nurture, tranquility and sexuality.

Purple is a soothing color that has a spiritual element. It is associated with luxury, vision, quality and truth.

Black is a powerful color that exudes sleekness, sophistication and efficiency.

Now that you’ve learned some of the key associations of the most commonly used colors, it’s important to think about how you can use this knowledge to your advantage. Before you start to think about what colors will help your landing page to achieve its purpose, sit down and think about the associations that you want you site visitors to pick up on.

When you’ve finished making a list, take a look at the key qualities and decide which colors will best help to reflect them. These are the colors that you should be using in your landing page design. For example, if you’re hoping to promote trust, but also create a call to action, blue and orange might be the right color choices for you. If you want to hint at sophistication and femininity, pink and black would be good choices.

If you’re still not sure which colors have the associations you’re hoping to achieve, here’s a great trick. Mock up a couple of landing pages that are identical except for one thing; they use different colors. When you ask people for their opinions on the mock ups, and the message they get from each one, you’ll be amazed at how different the answers will be.

How Does Color Theory Help To Improve Readability?

It’s important to take color associations into account when designing your landing page, but it’s also vital to explore how readable your color choices are. Generally speaking, colors are more readable when they’re on a background that they have a large contrast with (for example, black on white).

A landing page will only be effective if your site visitors are able to understand what it’s saying quickly and easily. The best way to do this with color is to ensure that your text and background colors are complimentary, but contrasting.

An easy trick for finding contrasting colors is to use a color wheel. Color wheels are very important in color theory, and you’ll find lots of online tools available to help you make the most of them. This accessibility color wheel is a great place to get started and test out how readable and accessible your color choices are.

Examples of Landing Pages Made Effective By Color Theory

The more you learn about color theory, the more you’ll realize how often it’s used to share extra, almost subliminal, messages in advertising.

Take a look at the examples below to see color theory in action.

Coca Cola

CocaCola Landing Page Color
Click for full-size image

Coca Cola is probably the most recognizable brand in the word. They’ve been using the classic combination of red and white for more than a hundred years, and it’s been a very successful color strategy. Not only do the colors have a great contrast, which ensures readability, the bright red shade also promotes Coca-Cola friendly qualities such as energy, courage, excitement and strength.

PopSurvey

PopSurvey Landing Page Colors
Click for full-size image

PopSurvey’s landing page is predominantly blue and white. Like the Coca Cola example, this color combination is classic enough to mean that it’s easy to read, but bold enough to give off a strong brand association. When site visitors land on this predominantly blue page, they’re likely to instantly associate it with trustworthiness, logic and communication.

Apple

iPad Mini Landing Page Colors
Click for full-size image

Apple makes a great impression with this very simple color combination. The contrast of black and white is the easiest for most people to read, and ensures that accessibility is not an issue. The crisp white background also clears the way for the black to take center stage, and subtly remind viewers of the Apple values of power, sleekness, sophistication and efficiency.

Subway

Subway Landing Page Colors
Click for full-size image

Subway predominantly use green to illustrate their landing page. As green is the color that’s easiest for the human eye to process, this site has no problems when it comes to readability. The color is also associated with health, balance and restoration, which are all key to Subway’s wider marketing messages.


When you’re designing a landing page, the possibilities for using color are almost endless. Used well, color can help you to seal the deal and turn site visitors into customers and/or subscribers. Used poorly, color can confuse the message you’re trying to promote and turn your site visitors away.

If you want to use color theory to your advantage, step away from arbitrary choices. Instead, choose your colors based on the two issues of readability and psychological association. This one little trick will help to reduce your bounce rate and make your landing pages far more engaging and successful.

– Josh Pigford


About The Author

Photo of Josh Pigford

Josh Pigford is co-founder + CEO of Temper, which lets you measure and track how your customers feel about your product at any given time.
» More blog posts by

Comments

  1. iDream says:

    Great article and a great subject.

    Q: So what we are really looking to do is make the eyes notice the CTA with contrast and use colour theory to provoke an emotion which should help produce an action.

    What sort of up lift in conversion could you expect from these types of changes?

    Thanks

  2. Josh Pigford says:

    Thanks iDream!

    I don’t think anyone could say how much of a conversion change you’d see from this as conversion rates are a few parts skill, a few parts luck and a few parts magic. :)

    I’d suggest taking this info, come up with a few ideas that work well with your brand, and then start A/B testing.

    Thanks for reading!

    • iDream says:

      Cool, I will have another read and maybe start testing a few things off the back of this, see what happens.

      Thanks again Josh, nice.

  3. Aaron says:

    Excellent article!

    I just came across this great infographic yesterday that explains these same color theories and gives great examples of brands that use each color.

    Could be a great addition to your post…

    http://pinterest.com/pin/37999190578193429/

  4. I think it’s important to note that colours have different associations in different cultures. For example, as far as I know, pink in India is not seen as a feminine colour (it’s more the equivalent of navy blue in the US) and white is worn at funerals. Some psychological associations with colours are common across all cultures, though, such as red prompting an increase in heart rate.
    The only way to find out what works best for your audience is to keep an open mind and test. But most importantly, to ignore your own taste and cultural bias.

  5. […] How Color Theory Affects Landing Page Conversion, unbounce.com […]

  6. Fred says:

    Great hair, bro.

  7. akram says:

    wow,Excellent article!..
    Thanks you…

  8. Larry T. says:

    Josh, you point out some good tips and tricks here when it comes to using color on a landing page for your site. I enjoyed this article and will definitely use it in the future for future websites. Thank you

  9. […] Conversion Master color theory in order to affect conversion. (Unbounce) […]

  10. […] Did you know the colors you choose for your landing page send some kind of message to the viewer? The concept of the Color Theory details how the colors on a landing page affect the decision-making of the average user and how he/she is influenced. There are many websites which are perfect examples of using the right colors to increase landing page conversion. Read more at Unbounce. […]

  11. […] out.  I have also learned that the colors used on your website/blog are a big  deal.  I read How Color Theory Affects Landing Page Conversion which I found interesting and thought blue tones, yup, that’s […]

  12. I recall reading a similar article some years back and it really resonated. I like your examples, and it’s so true the psychological effect colour has, which is why it’s important to go through a professional designer who can guide through to the perfect design and colour scheme. I’ve worked on some sites using a theme/template and the colour scheme has been set to taste but is glaringly wrong for the sites requirements.

  13. […] that’s got you thinking then you’ll also want to consider how colour theory affects behaviour online backed up with some great […]

  14. […] How Color Theory Affects Landing Page Conversion (unbounce.com) […]

  15. Plaban says:

    Selection of right colour is very essential for for every websites. But many web master ignore its importance.

  16. I’ve always heard that yellow sells alot of houses in real estate, and that a yellow background on sales pages creates the most results. Would you agree with this?

  17. […] Read article here: http://unbounce.com/landing-pages/color-theory-and-conversion/ […]

  18. Paul says:

    Thanks, this is great information.

  19. […] course, choosing the right colors that “pop out” on your form header and CTA can make it a lot easier for visitors to identify what they are […]

x
Get actionable optimization tips delivered straight to your inbox.

You'll learn:

  • What it takes to build successful marketing campaigns
  • Why your landing page design and copy might be working against you
  • How to increase conversions while delighting leads and customers