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. 

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.

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.

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.

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. 

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.

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.

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

‍