What is the best color for your website Call to Action?

Design is choosing the right focus

Why minimalism is so popular today? The aesthetics are great. But there’s another important reason: you can highlight in different ways an element you decide.
One way is with color.

A combination of white space and vibrant color is a killer combination. 

Automator.design and Dona.ai as great examples of minimalistic design
Automator.design and Dona.ai as great examples of minimalistic design

This article is not about white space, but there’s no way to get around it.
You can use the most vibrant red for your button, it may disappear in the noise of surrounding elements. Or drowned in colors screaming for attention. 

You need to have a hierarchy of elements. At the top should be your main call to action.

Take a look at this example of bad design. It has no hierarchy.

Example from a design inspiration website. No clear visual hierarchy.
Example from a design inspiration website. No clear visual hierarchy.

Notice how your attention is switching between the boy and girl. Then the bottom part is visually heavier. No offense to the designer that worked on it. It’s creative but wrong.

Your page background color is important too.
Good designers know that the perception of color changes based on surrounding colors.

You can check examples and get inspired for your color palette. It's a handpicked collection by a good designer.

Example from Tobias Van Schneider. Handpicked collection of colors.
Perception of color changes based on surrounding colors and background. Example from Tobias Van Schneider.

How to make it pop

Your goal is to grab the attention of your visitor and make it as easy as possible to find the path forward. The conversion path. Color should make it seamless, almost on a subconscious level, once they decide to commit. 

Also color needs to interact well with the copy for your button. It needs to be simple and action-oriented.

If you have 2 or more actions you want your visitors to take like "Signup", "Buy", "See More". Focus on one and make the others least intrusive. 

You can print your website, and draw with a fat green marker the path you imagine your visitor's eye will follow. It's a great exercise.

Dona.ai expected attention flow based on design
Dona.ai expected attention flow based on design

Choosing the right color. In practice.

Plenty of marketing and growth hacks talk about: the best ways to use color given a specific psychological aspect.
Or based on symbolism based on different cultures, or even genders.
These have a place in the design world. Or advanced marketing campaigns. In reality, no color choice will make people convert if they're not interested in what you are offering. So this can only go so far.

My advice: Review some of your competitors, if you have them. Choose different colors. Especially the color of your buttons.

Step by step guide 

My go-to free tool for choosing colors is Eva Color Generator. It’s for UI design. But you can use it to define your primary and secondary colors. 

Free Eva Color Generator. How to use it in 2 simple steps.
Eva Color Generator. How to use it in 2 simple steps.

In the Brand Section under Primary Color choose the color of your choice. If you have one in mind paste the HEX value. 

Move the selection in the color square towards anywhere in the top right area. This will give you more vibrant versions of colors.
Move the selection of the horizontal bar below in the same panel. Select the Hue, the "color of color". Like red, purple, or blue.

If you're feeling adventurous and want a dark website: the tool allows you to switch the view to dark mode so you can view the colors. 
Notice that you don’t see absolute black (#000) but rather a more blue tone. That’s because the natural  black is not absolute. Use always a HEX value of #07000B for black instead.

Free Eva Color Generator Dark Mode
Eva Color Generator Dark Mode

Now you have your primary colors. 
Many tools can suggest secondary colors too but for the sake of simplicity just use the primary one. 
The rest should be neutral colors like white, black, or gray for non-graphic elements. Just like in minimalist style.

Additionally, Eva offers success, info, warning color suggestions. I’m sure you may find a way to use them in your product UI. Do it.

Get your website evaluated by me

Get your landing analysed for conversion for 5$.
Use 90%off promo code: XK1NVSWR

Important mention on contrast

Contrast is important for choosing the combination of colors. All design tools have good plugins to verify if your interface is respecting contrast guidelines.
If some people can't see your stuff then what's the point?!

My favorite ones for Mac are https://usecontrast.com/ and https://www.getstark.co/
Also, this is a great free plugin for Figma.

Free Figma color contrast plugin
Free Figma color contrast plugin

Another great thing is that EVA Tool suggests what color to use as text: black or white for your buttons. Pay attention to that.

🐟 Just give me the fish

Use white or natural black color for your background. Vibrant color for the buttons with plenty of space around it. 

Deemphasize other elements. Like other buttons, text, or images around it.

If you’re looking for a tool to build your website. Use Webflow.
It’s the best and has no constraints on design. Iterate for conversion.

— Oleg

Get your website analysed for conversion for 5$.
90%off promo code: XK1NVSWR

Get Conversion Analysis

Here's an example for Resumey.

Practical conversion tips and cases. Weekly.

Awesome! We sent you an email confirmation
Oops! Something went wrong while submitting the form.

Join Our Community

To learn from practical tips and case studies: join my community of founders

We're affiliated with some products we recommend to support us. We don't suggest ones we wouldn't use.

More Articles

All Articles
User Research

Dead simple User Research to increase website conversion

Stop guessing and understand how people react to your message and design
View ArticleArrow Button
All Articles

Design for absolute beginners

How to stop using website templates mindlessly and start thinking like a designer.
View ArticleArrow Button