Want to write a blog post for Unbounce? Send us your idea and you could be the next conversion hero.

How Color Theory Affects Landing Page Conversion

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 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.


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 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 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


  1. iDream

    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?


  2. Josh Pigford

    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

      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

    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…


  4. Rachel Collinson

    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. Marketing Day: January 30, 2013

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

  6. Fred

    Great hair, bro.

  7. akram

    wow,Excellent article!..
    Thanks you…

  8. Larry T.

    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. Friday Links: Utilizing Multiple Marketing Channels - Content Marketing Labs

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

  10. Friday Catch-Up: Most Important News and Posts about SEO and Online Marketing This Week Promodo Blog

    […] 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. What’s Your Tagline? |

    […] 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. Hampshire SEO

    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. What I Have Read This Month – February 2013 - Matthew Woodward

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

  14. 16 Lessons in Color Theory & Mixing | Exploration Art

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

  15. Plaban

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

  16. Randall Magwood

    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. Color Theory and Superheroes | i love color

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

  18. Paul

    Thanks, this is great information.

  19. 5 Commandments for Designing Sign-Up Forms that Convert Like Crazy | fresh fresher peppermint!

    […] 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 […]

  20. Haynes Bruce

    Thanks for the article. It helps me to improve the conversion rate on my website’s landing page!

  21. Guo

    i am always confused with colors . It is useful to me. thanks.

  22. 10 Secrets To Increase Your Landing Page Conversion Rate

    […] Always make your button a complementary color to the main color on your website. –  How Color Theory Affects Landing Page Conversion –  Color Wheel […]

  23. What You need to Know About How Colors Affect Conversions

    […] run last minute sales, are RED in color. This color is said to quicken the heart rate and hence create a sense of urgency and that is what you will need when you want to push your sales up in a “Limited period […]

  24. 23 Hacks and Tweaks to Increase Landing Page Conversions

    […] theory you can read about in detail here. I don’t have the space to cover it in detail. Suffice it to say that different colors have […]

  25. 23 Hacks and Tweaks to Increase Landing Page Conversions | The best way to freedomly finance

    […] theory you can read about in detail here. I don’t have the space to cover it in detail. Suffice it to say that different colors have […]

  26. How to optimize my PPC campaigns' landing page ? |

    […] impact is determined by color and the combination of colors. It is for that reason that the color theory can be a great help to understand what colors to use in our landing page and how to play with […]

  27. ¿Cómo optimiza mi página de destino para campañas de PPC? |

    […] determinado mayoritariamente por el color y la combinación de este. Y es por esta razón que la teoría del color nos puede ser de gran ayuda para entender qué colores utilizar en nuestra página de destino. […]

  28. 10 Ultimate Landing Page Designs You Won’t Forget in a Hurry! | Andrew Day

    […] The cool light blue color and the eBook in the white cloud clearly reflect the business’s essence, which is SaaS based (cloud computing). Here, visual content does the talking and the bulleted salient features of the eBook convince visitors to fill the field on the left and download the free eBook gift. […]

  29. Marketing Blog | 9 Steps to the Perfect Ecommerce Product Page | Sailthru

    […] your CTAs. Specific colors are known to generate certain emotions and perceptions. Check out Unbounce’s detailed post about colors and their […]