Color: Highly subjective and backed by plenty of psychological research.
There are a seemingly endless number of possible color combinations to choose from. But what colors have the biggest impact on your digital branding and which ones appeal most favorably to your target audience?
In this post we will focus primarily on the psychology of color use and why the color(s) you choose for your site will have a direct influence on not only forming the impression of your brand, but also on how color ultimately impacts your conversion rates.
Each color, both primary and secondary, has its own root of powerful associative emotions that us humans respond to unconsciously. And while many color charts exist across the web for all types businesses and desired psychological impact, they all share pretty much the same baseline set of associated response emotions. Here’s a look at one such chart:
And here’s another, simplified version:
Not all colors are created equal. And even though we might want to position our brand as ‘passionate’ and ‘exciting’, we may not necessarily want to use a bright, fiery red as the header color on our website. It’s just too RED!
So, what are we to do? We like the the color red and we definitely want to depict our brand as ‘powerful’ and ‘passionate’, and ,of course, plant a seed of urgency in our visitor’s minds. So how do we achieve this and still use the color red without blinding our website visitors?
The answer: Hue, Saturation, Brightness and Contrast – plus two terrific online tools to help guide us along the way.
Using the header example above, let’s work towards identifying another “shade” of red that delivers on both our brand color positioning requirement and on our desire to provide visitors with a color scheme they can visually tolerate.
To achieve this, we will turn to a handy online tool over at platetton.com.
Of the two tools we are recommending you use for website color scheme development, Paletton is the more technical. You’ll need to play with the various settings and options they offer to arrive at your desired result. It’s a robust tool with plenty of opportunity for color customization. So have some fun with it!
After a bit of tweaking and configuration, we arrived at a new color that appealed to us most. Here’s a look at our header with the newly selected red:
And here’s another look at the original:
So which one do you prefer? Obviously, color is highly subjective. And to make things even more interesting, Men and Women respond differently to color, to some degree. The point is to follow your own instinct and preference, without jeopardizing the bigger picture – which is to utilize the psychology of color to your advantage when designing your website.
But we’re not done with our header yet. Let’s have some fun with this simple design sample by introducing another tool into the mix: Coolors
The people over at coolors.co have developed an awesome online tool for creating and saving amazingly beautiful color swatches. It’s definitely a creative’s tool, and for those who need some inspiration when looking for direction on what colors might work together.
Let’s have a closer look…
Beginning with the base color (#9B0000) we chose for the background of our header, we will use Coolors to help us discover various combinations of color we think looks good, and delivers on our psychology objectives.
In this example, we’ve “locked-in” three colors that we like together. Now we need to find the fourth simply by pressing on the space bar of our keyboard until the perfect color is discovered…
…this is exactly what we were looking for!
Let us never forget that color is a subjective median, and not everyone is going to agree on what are the best combinations of colors. But stick to your gut and your individual taste – all the while staying aware of how your selections impact branding efforts.
And now our color selections are integrated into our sample website header.
It’s not a very fancy header, but we’ve subtly instilled the following into your human brain through the psychology of color:
Let’s begin with some facts and stats:
- 92.6% of people say the visual dimension is the #1 influencing factor affecting their purchase decision (over taste, smell, etc.).
- Studies suggest that people make a subconscious judgment about a product within 90 seconds of initial viewing. Up to 90% of that assessment is based on color alone.
- One study found that magazine readers recognize full-color ads 26% more often than black-and-white ads.
- Heinz changed the color of their signature ketchup from red to green and sold over 10 million bottles in the first 7 months, resulting in $23 million in sales.
This is some powerful stuff. Let’s dig deeper.
Once you’ve identified the color scheme you’d like to go with for your overall site design, you need to select an “Action Color”. This color is to be used only when you’d like your visitors to perform an action, like buying your stuff or learning more. Be sure to use your “action color” only for actions, don’t use that color for anything else on your site – other than for calls to action.
Here’s an example. We’ve used lots of different colors in this sample, but only one is dedicated to action, and we will use it throughout our site:
Did you happen to click the call to action button? Be honest. Did it work? We’d love to know, so please leave us a comment.
The bottom line is that when you have strategically selected a color scheme and beautifully integrated those colors across your site and you’ve effectively created calls to action with a dedicated action color, you are well on your way to achieving the conversion rates you are working so hard to achieve. At the end of the day, there is no magic bullet for increasing sales or conversions. However, the power of color psychology and tried-and-true marketing techniques are working in your favor – and they always will be.
In conclusion, we’d be remiss if we didn’t mention how easy it is to customize the various audio, video and image skins we offer at Cincopa. And you don’t have to be a rocket scientist to integrate your color scheme into our players or image galleries.
With a few simple adjustments to our CSS code, you are on your way to a beautiful, fully integrated solution for your website design.
Happy website designing! And the very best to you and your conversion rates.