How to Use Colors for More Effective Landing Pages

by Hafiz Muhammad Ali

Last updated on October 19th, 2017

We all know that colors play a large role in our marketing efforts, but have you ever taken a closer look at how color may be affecting your bottom line?

Believe it or not, color has a powerful influence on our emotions and decision making abilities, not to mention our first impressions of everything from a logo to a landing page.

Using Colors for Landing Pages

Psychologists have suggested that color impression can account for 60% of the acceptance or rejection of a project or service.

Is this statement backed by data? You bet, it is.

According to recent research, 92.6% of people say that visual dimension is the top influencing factor affecting a purchase decision. By harnessing the power of color, your business has the potential to be even more successful, particularly in regards to conversion optimization.

Let’s examine how colors can play into building more effective landing pages:

Designing for Gender

Depending on your industry, gender preferences may play heavily into purchase decisions so it pays to do your research on which colors can persuade someone to stay on a page and take action.

For women, according to this research, colors that appeal to them most include blue, purple and green while orange, brown, and gray are least appealing.

Marie Forleo’s B-School was all about women, and when it was launched, it became a huge hit instantly. But a lot more goes into a successful launch than knowing who you’re targeting. From landing pages to email templates everything was branded perfectly—that attracted the right buyer for her.

Marie Forleo Women focused Landing page

For men, blue, green, and black are often well-loved and brown, orange, and purple are least-loved. Keeping this in mind, consider your color choices when crafting your call to actions, buttons, or landing page design in general.

Let’s take a look at the landing page of a male-focused startup that really got our attention in last two years, thanks to their viral video.

Other than having a strong call to action, the landing page  gives a real masculine feel with the brown wood background and orange elements.

 Dollar Shave Club Men Focused Landing Page

Designing for Age

When choosing colors for your landing page, don’t forget to take into account your demographic spread in terms of age. In an online research project conducted by Joe Hallock, color preferences based on age were documented and explored.

In general, children or younger audiences tend to prefer warm and bright colors that are associated with positivity and high energy such as:

  • Red
  • Orange
  • Pink
  • Yellow

However there are few colors that are often associated with sadness and negativity by children, these are:

  • Brown
  • Purple
  • Blue

As people age into adulthood, there’s shift in color preference towards cool shades, as evidenced by blue being widely regarded as the most popular favorite color by adults.

Adults have also been found to associate more symbolism or emotion with certain colors, such as black being associated with mourning and red being associated with alarm, intensity, or passion.

Which leads us into our next point: Perhaps one of the most powerful factors that plays into color choice in landing pages is that of color psychology and symbolism.

Designing for Emotion

Depending on your goal for your landing page, you may want to encourage a user to feel a specific emotion. This can be accomplished through a combination of smart design, well-written copy, well-chosen graphic elements, and of course, color.

Research tells us that these colors tend to be associated with these emotions:

  • Red: This is a polarizing color that triggers opposing emotions of love and passion, as well as anger and danger. It’s known to increase heart rate and generate excitement. Plus, in some cases, it can boost appetite.
  • Orange: Often associated with vitality and happiness, orange draws attention and expresses energy. It’s more inviting than red but is still attention grabbing. Many agree that it’s a great choice for a call to action.
  • Yellow: Associated with laughter, hope, and sunshine, yellow is about giving a gentle energy to a page, with a goal of making it feel cheerful and optimistic. However, yellow should be used in moderation, as it tends to irritate the eyes if over used.
  • Green: Rebirth, life, health, wealth, and growth are connected to the color green. Naturally, green is a color found in many financial organization logos since it suggests growth, financial health, and possibility.
  • Blue: Known for being a very calming color, it’s also associated with trust and security (and can be found in many company logos as a result!). Blue actually encourages the body to create chemicals that soothe and calm, allowing the viewer to be more relaxed. Additionally, it’s regarded as a favorite color by most, so it’s often seen as very professional.
  • Purple: This color is associated with creativity, nostalgia, royalty, and wealth. It can be soothing or intriguing, depending on which shade you choose. It’s often associated with luxury and romance.

Gregory Ciotti has created one of the most comprehensive pieces you could read about the psychology of color on the Help Scout blog.

In his article he says:

“Additional research in studies on color perception and color preferences show that when it comes to shades, tints and hues men seem to prefer bold colors while women prefer softer colors. Also, men were more likely to select shades of colors as their favorites (colors with black added), whereas women were more receptive to tints of colors (colors with white added):

Bright vs Soft Color Preference in Gender

Landing page Men Vs Women

Source: KISSmetrics

The above infographic from KISSmetrics showcases the disparity in men and women’s color preferences.”

Now that we have all this information and data you can start making landing pages with color that will resonate with your target audience to see which one converts best. The work does not end by simply creating a landing page, more in-depth research can be conducted on your particular audience segment by doing A/B testing.

There are dozens of examples where a simple change in the color of a call-to-action button increased conversions, since other than copy, design and color play a huge role in the success or failure of any landing page.

Some real-life case studies are referenced here, but feel free to conduct one of your own. You may be surprised at changing the color of a call to action or a click to purchase button making all the difference in your conversion rate.

Image Credits: Magician extracting colored paint



Get updates on new articles, webinars and other opportunities:

Hafiz Muhammad Ali

Hafiz Muhammad Ali is the CEO of Omnicore - Digital Marketing Agency where he helps startups and small to medium sized businesses achieve higher ROI through actionable marketing strategies and conversion optimization. To get in touch, Follow him on Google+ and Twitter @AskHafizAli OR Connect at Linkedin:


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. chris cornish says:
    April 9, 2014 at 11:19 am

    Great article; thank you. Wish I read it before having my logo designed; looks like I dipped out on the females by using grey. I appreciated your use of examples as they gave stark differences between what females and males find appealing.

    • Muhammad Ali says:
      April 11, 2014 at 4:31 pm

      Hi Chris,

      Thanks for sharing your thoughts.
      It’s always my Pleasure, I will try to write something more useful to give back to my community.


  2. D Thomas says:
    March 3, 2014 at 7:56 am

    Wow very interesting read, by pure chance my own website happens to be a combination of blue and black but as a designer, I would always put more emphasise on the branding etc, never really thought about how much the colours could influence people’s decisions!

    Thanks for a great post! I’ll shoot off now and add more of these colours to my call to actions 🙂

    • Muhammad Ali says:
      April 11, 2014 at 4:27 pm

      Hi Thomas,

      Elated to know I could add value to your time. Please share your experience after testing.


  3. Muhammad Ali says:
    January 23, 2014 at 12:54 pm

    @ Indeed. Minor changes do create huge impacts on ROI. Don’t forget to Share your experience when you play.

  4. Ketul says:
    January 23, 2014 at 6:41 am

    It seems every little change can create a great result. Can’t wait to bring it into play. Thank you for your great post!

  5. Muhammad Ali says:
    January 18, 2014 at 2:29 am

    @Reshu I agree with you some extend on taking culture into consideration, as I think it would be more appropriate taking culture into consideration when you are targeting locally e.g just any specific city, country OR ethnic group. If you are a service provider like us providing Digital Marketing Services you have to take things globally.
    Glad you liked it:).

    @William Much Happy you found it interesting. Yes, it is always a best approach to hire an agency to maximize your ROI.
    Best, 🙂

    @Monalisa Pleasure I was able to provide worthy information.

    Happy Testing.

  6. Monalisa says:
    January 17, 2014 at 9:18 am

    Brilliantly compiled article about the utilization of colors in Landing Page. A lot of attention must be given to the Landing Page Optimization to help convert visitors. I have outlined a few more aspects that count in maximizing conversion, which can be found here : Once again….thanks for sharing your great thoughts.

  7. WIlliam V. says:
    January 15, 2014 at 4:26 pm

    Interesting read, Muhammad.

    it is often easy to overlook the smaller things that can boost conversion. We are all concerned about usability, personalization, site speed, CTAs etc… but I guess it all matters. Based on my experience with visual optimization, the best approach is to hire an agency and have them deal with it. It can be challenging to find the right balance between accommodating the target demographic profiles, being consistent with brand colors and bringing everything together for an overall composition that works.


  8. Reshu says:
    January 15, 2014 at 5:55 am

    Nice read Ali! You’re right! Colors can make or break a landing page. It’s extremely essential to design your landing pages taking your color associations into account. Colors cannot only make your page more readable and attractive, but when used correctly are also good in evoking emotions in people.

    As you said, when picking a color you have to take gender, age and emotion into account. Other than these, it’s also extremely important to take culture into consideration while designing your landing pages. As, different colors have different significance in different cultures.

    TIP: A/B test your landing page design elements to find out what works for you. Keep experimenting until you find the right mix.

    Other than color there are few more things that are essential for your landing page conversion. Have earlier shared my views on landing page optimization here:

  9. James says:
    January 14, 2014 at 2:35 am

    Hi Muhammad

    Great article and some great examples. I find the concepts of colour and typography really interesting in how they can drasticallly alter a visitors perception of the site and therefore their experience yet colour and typpgraphy are still, sometimes, discussed at the end of a designs process and sometimes not at all.

    I found the points around the impact of gender and then age interetsing. It creates some food for thought if you have a marketplace that has to deal with both genders across a multitude of age ranges in which colours you should consider to gain the reactions you are looking to achieve.

    • Muhammad Ali says:
      January 15, 2014 at 2:01 am

      Hi James,

      I’m glad you liked the post, if you have any questions feel free to ask 🙂

  10. Ashley says:
    January 13, 2014 at 8:04 am

    Hi Muhammad,
    I love the whole color thing and how it can really affect websites and the way that people interact with them. I have also wriitten some interesting posts on the meaning of color before such as which people really enjoyed too.

    People often do not understand the use and impact of color, so such great posts as yours are super helpful!
    thanks for sharing

    • Muhammad Ali says:
      January 15, 2014 at 1:59 am

      Hi Ashley,

      I’m glad you liked it. If you need anything else, feel free to ask 🙂

  11. Lasse Kjær says:
    January 9, 2014 at 3:39 am

    Great article, but something is a bit “off”.

    You write: “For men, blue, green, and black are often well-loved and brown, orange, and purple are least-loved.”

    Okay, so brown and orange are two of the LEAST-loved colors.

    After that you mention the “Dollar Shave Club” for using colors wisely and writes:
    “the landing page gives a real masculine feel with the brown wood background and orange elements.”

    You see what I mean? Or am I misinterpreting something?

    • Muhammad Ali says:
      January 10, 2014 at 4:31 am

      Hi Lasse,

      Thanks for dropping by. The research showed that brown, purple, and orange are least loved but that doesn’t mean they don’t convert when it comes to landing pages design too.

      You’d see that both Dollar Shave Club and The Art of Manliness have opted for the grunge brown design. Eventually it comes down to what your product is and what is your target audience.

      I hope it answers your question.


  12. Jay says:
    January 8, 2014 at 1:14 pm

    Yes, color is important in design. Cave men used color to indicate threats as well as honeypots. Now we’re doing it with pixels on LEDs instead of plant dyes on rock walls.

    Anyway, great summary. It would also be great to mention how extremely subjective the theories are on which colors are suitable to which genders and ages, as well as which colors evoke certain emotions. To that point, we’re attempting to perform our own usability testing on some of the sites we’ve designed with strong color palletes; green within, yellow within and (still in private alpha) and purple within our own –

Show Me My Heatmap

Ah, @CrazyEgg I really do love you! So useful evaluating how users are interacting with all aspects of our redesign

Mike Halligan


What makes people leave your website?