Design CTA with Data & colour

Design CTA with Data & colour

You should never use red because it’s a stop color” or “Green buttons are best!” While such generalisation are convenient, they rarely mirror reality. What actually works will vary wildly depending on context, brand and your users.



I always been curious about the use of colour on CTA in e-commerce, and the primary actions, it seems so random and easy topic but has some secrets behind that can make your conversion rate increase, so i start to do some research around this subject, so here is my option on that matter.


When users take action they’ll usually see two buttons in most cases, primary button and secondary button, to make this distinction clear, we have to use visual weight, ( is how users compare button priority). The button with the strongest visual weight will get the most attention. Therefore, it’s important that primary actions on your interface have the strongest visual weight, and that secondary actions have the weakest visual weight.


Would you believe it that 85% of shoppers say that color is the primary reason for buying a product? Not only that but color increases brand recognition by 80%. These are huge numbers, especially considering many online businesses simply choose colours at random, starting at the logo and going to call to action buttons. Similar to selecting your own selling platform, randomness is not exactly the best solution, those colours should be choose wisely.


It’s important to realize how crucial color is to your e-commerce store because a small change in one of your color choices could yield you large conversion increases or decrease. Plenty of myths are out there about the types of colours you should select, but the reality is that the only way to truly understand which colours work for your business is through testing, so do lots of A/B testing, as we know google while ago test 41 different shade of blue, madness? is clever way to define the best shade for your business.


There is no secret formula to choosing colours for your online business, but some general rules can apply. Is a lot of stats out there, they might be accurate or not, but we always need to test on our users like that we have a more accurate result. 85% of shoppers say that colour is the primary reason for buying a product, 66% of people won’t buy a certain appliances unless it comes in their preferred colour, 26% full-colour ads in magazines get recognises 26% more often than black and white ads.
More info on those numbers



By gender

It doesn’t say much about which colours you should use, the reason is every business they have a different targets, different users, best way is to test which colour works best for you.

CTA, Test and test…

Is one of the most important visual funnels for people to click and navigate our online presence. It plays a fundamental part in your conversions and sales. The CTA lights a path to your checkout and turns a visitor into a customer as quickly as possible. To optimise this journey, we should examine how people responding to the button shape and colour.


As an extreme example, if we change the button from black to red, we can increase conversion, it doesn’t mean that you should immediately change all the buttons to red, it is actually the quiet the opposite. We should be savvy in how we deploy and test our hypothesis.


So setup an A/B test and run few colours for your main CTA and see how much that increases for each variation, but note the exception for sale’s season (including other promotions) because that is not a realistic simulation of normal conditions, choose the normal times of the year, because the data gathered will reflect more accurate numbers.


While there’s no definitive color that converts best, it’s important to ensure that you’re using a color that resonates with your visitors, and your brand.


Here are a few tips to consider when determining which color to use for your CTA.


  • Use white space around your CTA to make it clear where to click
  • Make sure it stands out from the background
  • Don’t make it too crazy with colours and animations
  • Choose the right colour
  • Keep your button copy short


Buttons come in all sizes, shapes, and colours, and there really is no one-size-fits-all solution that works every time. People like to say stuff like “You should never use red because it’s a stop color” or “Green buttons are best!” While such generalisation are convenient, they rarely mirror reality. What actually works will vary wildly depending on context, brand and your users.

Finding the Right Colour Palettes

What makes a design look coordinated, planned and professional? The answer is: ‘colour’.


Not every project needs bland corporate blue to look professional. Planning color means creating a framework that describes which colours to use and how to use them.


Colour is the slipperiest design element. “Good” colour is so closely tied to elusive things like personal taste and intuition, as well as technical considerations such as contrast and monitor calibration.

Hue, Saturation and Brightness

I always use a tried and true method for picking colours. I heavily employ the HSB (Hue, Saturation, Brightness) color model to create color schemes. Here is a description from the Illustrator Help docs.


Hue — Colour reflected from or transmitted through an object. It is measured as a location on the standard color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color, such as red, orange, or green.


Saturation — Strength or purity of the color (sometimes calledchroma).Saturation represents the amount of gray in proportion to the hue, measured as a percentage from 0% (gray) to 100% (fully saturated). On the standard color wheel, saturation increases from the center to the edge.


Brightness — Relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).


When using this model, I lock in the Saturation and Brightness value. Then I play around with the Hue value to find colours that complement each other well. From there, I may create more colours by adjusting Brightness to provide darker or lighter variants for more primary colours, accents, and alternative states (hover, focus, etc).

Primary, Secondary, and Tertiary Colours

The primary colours are red, yellow, and blue. Think about them as if you were using paints — these are colour that cannot be created by combining two other colors.


Secondary colour on the other hand, are the three (green, purple, orange) colours that are formed by combining the primary colours.


Tertiary colours are created when you mix a primary color with secondary color.


From here, colour gets a little more complicated. And if you want to learn how the experts choose colour in their design, you’ve got to first understand all the other components of colour.


→ More about colour basics


→ Colour of the year 2016

Tools for Playing Around with Colour


Generate infinite color palettes for your designs and share, export or save it in your profile

Material Palette

Material Design Color Palette Generator

Colorful gradients

Gradients automatically created by a computer. 48 times daily.

Color Hunt

Curated collection of beautiful colours, updated daily.

Have a wonderful week,
Marco Lopes

Thank you for reading, if you have anything to add please send a response or add a note!

Leave a Reply

Close ()