Postcron es el Arma Secreta de los Community Managers Probar Postcron gratis

18 Amazing Facts About The Science of Color That’ll Help Increase Conversions and Clicks

Por Josefina Casas |

la psicologia del color
Do you know how to market within your web page? Is your site optimized to make it compelling to subscribe to, buy download, try a product, or fill out a form? Do you know if the colors you’ve chosen and/or how the elements are arranged are good for getting the user to browse through the landing page the way you want them to? Good enough to get them to click on what you want? Did you know that color is one of the most influence factors on the “subconscious” during the decision of the purchase-making process?

As you know, working on social media channels is extremely important nowadays. Surely, at this point , you give more importance to your Facebook, Twitter, or Google Plus than you do your web page. Or perhaps, you haven’t even created one yet, for fear that it might become useless. Am I right?

la psicologia del color
You must understand that the design of your web page shouldn’t only be visually pleasing, but rather it should be optimized to guide the users through a sequence of thoughts. It should be designed to get them to take the action you want them to take. Color is a key component, and it’s super influential throughout the purchasing process.That’s why it’s so important, if you want to get more sales, subscriptions, downloads, etc…, to read this article to learn what mistakes not to make on your site and how to use the science of color to achieve your goals. The modifications you’ll be able to make are super simple, and could result in incredible changes!

So, ready to start reading? Here we go!


A- The science of color: a quick review of some info that maybe you had no idea about

1.A- The most influential factor on the senses in the purchasing-making decision :

la psiclogia del color 1
2.A – Your brain needs 90 seconds to subconsciously analyze and make judgement about a product:

la psicología del color
3.A- Colors preferred by gender:

  • Men: Blue, Green and Black.
  • Women: Blue, Purple and Green.

la psicologia del color
4.A- There are 3 basic buyer profiles, and each one is attracted to different colors, which in each case act as triggers:

5.A- Blue is the color most used by the most important brands in the world.

6.A- Colors typically used by each industry:

Each icon represents an industry:

Colors most used by industry:

Red is aggressive, energetic, provocative, and attention-grabbing.
It’s popular among related industries: food, technology, cars, and agriculture.

6 red
Purple represents: royalty, sophistication, nostalgia, mystery, and spirituality.
It’s popular among related industries: technology, health care, and finance.

purple 6
Blue is trustworthy, dependable, secure, and responsible.
It’s popular among related industries: technology, health care, finance, energy, agriculture, and airlines.

blue 6
Green evokes: wealth, health, prestige, and serenity.
It’s popular among related industries: food, technology, finance, energy, and household.

green 6
Yellow represents: positivity, light, warmth, motivation, and creativity.
It’s popular among related industries: food, energy, and household.

yellow 6
Orange evokes: vitality, fun, exuberance, and playfulness.
It’s popular among related industries: technology and health care.

orange 6
Brown is: earthlike, natural, simplistic, and durable.
It’s popular among related industries: clothing, cars, and agriculture.

brown 6
Black represents: prestige, value, timelessness, and sophistication.
It’s popular among related industries: technology, cars, and clothing.

black 6
White evokes purity, nobility, cleanliness, and softness.
It’s popular among related industries: clothing and health care.

white 6

B- Mistakes with colors you should stop making on your landing page

As we mentioned in the beginning, the science of color is extremely powerful. The color factor matters the most in the process of conversion on a landing page, in addition to other design elements such as: Size, Shape, Location, and Movement.

Let’s utilize this excellent analysis by Marketing Experiments to develop the following 5 fatal errors relating to the use of colors. That way, you can start analyzing your site and optimizing right away:

7.B- Error 1: Emphasis

The error may lie in the lack of emphasis or by placing emphasis on the wrong item or place.

Marketing Experiments analyzes a case where the site needed to get more subscribers.

Original: On this page nothing was being emphasized or attracting attention. There was no element guiding the user to make a concrete decision. When a person is faced with lots of choices that all seem “the same”, they become confused. They would rather abandon the dilemma, rather than to stop for a minute and try to figure out what exactly is being offered and what the best option is. On the other hand, when the process is simplified, highlighting and indicating one option over another, doubt disappears quickly and it’s easier to get a YES from the customer.

7b original

Optimization: A game of shadows and color gradients was used to guide the eye to the main point. Here, it’s highlighted by a different color in order to strengthen the proposed value. Also, the information that was being given through the text is simplified. That, along with the use of colors, now guides the user towards exactly what the company wants them to choose. With these changes, an 81% increase the CTR was recorded.

7B optim
Another example: emphasizing the wrong things.
The error in this case is that the colors generate a distraction and leave the Call To Action button (CTA) out of the form and put it right in the middle of the visual journey the user is taking through the page. In the optimized version, the color of the CTA button is more intense and its placed at the foot of the page. This “forces” the user to look through the entire form and finally arrive at the CTA button, basically, guiding them to the desired action. Result: 97 % increase in CTR


8.B- Error 2: Number

In this case, the saturation of colors, or “lack of” greatly affects the decision process. Since it can be a confusion factor, or on the contrary, something that helps assimilate the information better.

Consider this example analyzed by Marketing Experiments:

Original: Too many colors are competing for the person’s attention at the same time.

8 b original
Optimized: The noise generated by the overuse of colors is removed, leaving the box that includes the call to action button as the only element emphasized by color.

8 b optim

9.B- Error 3: Combination

At this point, I think it comes in handy to bring in an explanation by Derek Halpern in one of his video posts, which is super logical, but apparently difficult to get used to. He states that there are two colors you should use on your web page:  Passive colors and Action colors:

  • Passive Colors: those used to generate the visual appeal of the site and give your brand personality.
  • Action Colors: show people that “X” color = click. This color should be used to educate visitors and regular users, to know that certain buttons, links, and boxes, should be “clicked on“. If we use the same colors to highlight headlines, links, or for other messages that lead nowhere, we’re wasting the resources that color gives us. Which, in this case, is showing the person who looks through the page what we want them to do.

Marketing Experiments highlights this case, a huge combination error in a dialog box which contains a CTA for premium access to content this site offers.

9 b orig
In the optimized version, an active color is assigned to the box containing the call to action. This allows the message or requested action to be brought forward, and prevents it from being lost among the rest of the visual content. In order to not confuse users, it’s absolutely necessary to be consistent in the use and combination of colors. That way, you won’t throw them off balance, and you’ll simplify decision-making.

9 b opt

10.B- Error 4: Message

Each color conveys a message. That’s why it’s essential to know the meaning of each, which emotions they activate, and what associations they can trigger. In the following case, the original version doesn’t transmit credibility nor seriousness nor reliability, which are the necessary values for this type of product.

10 b
To decide on which color is best for achieving your goals, think about: your industry, your product, what message you want to convey, and what actions you want people who visit your site to perform.

11.B- Error 5: Flow

The case we saw before about the error of “emphasis” could also fit under this category. It’s necessary to use colors to accompany and guide the people who visit your page. That way, each user can correctly interpret the messages transmitted by the different design elements.

The following is another example of how the misuse of color can actually interrupt the visual journey and the natural train of thought each person experiences while reviewing contents of a site or landing page. With good use of color and layout, you can get the user to perform the actions you desire, effortlessly.

Original: Although color is being used for the CTA button and could potentially attract lots of attention, it’s been placed in a white box outside the main message. This interrupts the person’s natural train of thought, leaving a space that generates nothing but noise. It disengages the user, and in that precise instant, they begin to doubt —- exactly what we want to avoid.

11 b

Optimized: the button is now part of the message. It doesn’t interrupt the visual journey, and it simplifies decision making, without creating a bunch of unwanted noise in the middle of the page. You can see that the blue button is the only element that attracts attention. This scenario opts for a design strategy that uses low contrast, less color, but lots of emphasis on one single well-placed element.

C- Tips for optimizing your Call To Action button

12.C- Encapsulation

Don’t let the message or the point of interest get lost among the other elements on your landing page. Encapsulate the button in order to incorporate it in the message and correctly draw attention to it.

12 c

13.C- Directional Cues

Don’t give the user a chance to wander around the page visually. Guide and indicate them directly to the places you want them to pay attention to on your landing page. If necessary, use elements that help direct the eye over the page.

13 c

14.C- Color Contrast

As we’ve mentioned in some of the other topics above, remember that contrast doesn’t mean using lots of colors. It means applying the weight of the color in the right place.

14 cc

15.C- Whitespace

You can highlight buttons or boxes with CTAs by using whitespaces, and avoid generating noise with too many colors or extra elements that might steal away the attention.

15 c

16.C- In addition to color, optimize your site and buttons with a smart and distinct CTA.

Mohita Nagpal puts together an excellent collection of ideas for optimizing buttons and text on your landing page, in the blog Visual Optimizer. Let’s review them quickly:

  • Use phrases that are difficult to say NO to, or that are so uncomfortable or ridiculous that it makes the person reconsider their decision. Surprise visitors on your site, remember that they’re constantly exposed to CTAs, and you’ve got to break the barrier of skepticism that we’ve all generated by constantly bombarding them with information…


16 C1



16 C 5

16 C2

  • You can also optimize messages like, system errors, the “404 – Page Not Found”, or pop-ups, in order to not lose any potential clients. You can’t just say “Page Not Found” anymore. Think about the people who visit your site, what language they use, and what would be smart to say to get their attention, and keep them on your site.


16 C6

D- Two tools you’re gonna love that’ll help you make better decisions about colors!

17.D- Navflow:

This app analyzes the path visitors take through your site, and lets you know where they find it difficult to follow the flow of actions.

tool 1

18.D- Kuler de Adobe:

This app allows you to analyze and test the colors on your site using different criteria, and helps you determine which ones are the best combination.

tool 2

Let’s conclude:

Understanding the power of color and its the science behind it, is really important for optimizing your page. Colors not only serve for grabbing your user’s attention, but even more because they communicate messages using the framework of associations that each one triggers. As we said in the beginning, you must also learn to market within your web page, and take advantage of each design element in order to connect with the people who visit your site, guide them, and get them to perform the action you desire.

Now, if you liked this article …


Main Sources :