With an endless array of color combinations to choose from, you need to decide which ones will have the most significant impact for your brand when it comes to your target audience.
Most people say that color and visual appeal influences them a great deal when considering a purchase. Studies suggest that people make a subconscious judgment about a product within 90 seconds of initial viewing and much of that is based on its color.
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 root of powerful associative emotions that we respond to unconsciously. Many color charts exist across the web for all types of businesses to show the psychological impact of different colors.
People’s response to color is highly subjective. To make things even more interesting, men and women respond differently to color to some degree. The point is to utilize the psychology of color to the advantage of your brand.
So, what are we to do? We like red, and we 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 you choose the right color red? You need to consider hue, saturation, brightness, and contrast to identify a shade of red that will appeal to your customers.
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.
Two tools to help you with a website color scheme development are Paletton and Coolers. Paletton.com is the more technical of the two. You’ll need to play with the various settings and options they offer to arrive at your desired result. Paletton is a robust tool with plenty of opportunity for color customization. So, have some fun with it!
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.
The people over at coolors.co have developed an excellent online tool for creating and saving amazingly beautiful color swatches.
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. 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.
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.
