Last Updated on September 29, 2021 by James Castro
We want to know how color psychology in website design plays into website conversions, and thus rank, who’s talking about it, and what resources are available online, so while doing work ourselves, we put this blog together for our readers
How do colors affect website design?
Colors change and influence how a website is perceived and thus how much interaction the site has. It’s important to consider color in your design, images, and website assets such as videos and graphics for brand consistency as well. Since everything on the front-end of the page is fundamentally a color – including text elements, and all content – it’s important to consider the layout in relation to colors, fonts, and overall style of the website. The juxtaposition of colors between blocks, columns, and even pages can impact the overall user experience and in turn the conversion rates for business websites, or interest for personal or educational websites.
So, if you like results and you’re interested in learning more about how the use of color psychology in great design can help you get more conversions – check out this blog for a list of useful links and personal insight.
How to Use Color Psychology in Website Design?
Since Goethe presented his Theory of Colors, [Goethe, W. (1810). Theory of Colors. London: Frank Cass.] as it related to emotional response, people have started paying attention to color in the design. This isn’t a get-rich-quick plot on how to manipulate your audience – what color psychology should be to you is experimentation on how color can be used to engage your audience, and provide them with the emotional context intended within your page or brand story.
The quick answer to “how does color affect my website design?” isn’t quick at all.
We’ve taken a lot of the work out of the research process for you, but the theories are complicated, the papers and articles are endless. There’s a lot of debate, but there’s also a lot of good insight that can help you leverage color psychology in your website.
We’ve found some great resources, infographics, articles, and industry insight, so you don’t have to do all the work of hunting this down yourself.
To start, here is the not-so-short but very sweet infographic by Iconic Fox (opens in new tab). Check it out for a quick visual overview and we’ll catch back up when you’re finished (warning: it’s “a scroller”), but worth your time.
This shows brands by logo color, as well as some associated emotions to those colors.
We didn’t agree with the “feeling” some of these brands represent. What do you think?
Never Mind Color Psychology, What is Color?
Color psychology can really help your website shine, look its best, and perform as well. But what is color anyway? Whoa. We just went there…
Well, based on one article from COLOR, Research and Application, cited here, “A color stimulus may be characterized by three psychophysical dimensions (luminance, dominant wavelength, and purity), whose corresponding color attributes are lightness, hue, and chroma/colorfulness.”
It’s easy to understand that how light or dark something is, how pure it is, and how colorful it is could very well influence our emotions.
Think about this:
Are you more confident drinking a glass of green water or blue water?
Walking in the woods at 3pm or 3am?
The physical characteristics of color – of these wavelengths – have helped us survive, find fresh food, avoid undesirable situations, and so forth.
It is only natural to expect that this power can be transferred through design to inspire our deepest feelings of trust or apprehension.
Yes, colors make us emotional, that’s fair. However, do emotions impact our decision-making process? Of course!
Don’t believe us, just ask Antonio Damasio, (link to his wiki) who has spent a lifetime on the subject. Otherwise, trust us when we say that people act on their emotions.
Don’t get angry – that’s a fact of life.
Color and it’s impact on Website SEO
Indeed, smarter people than ourselves have really helped us turn the [color] dial and increase Search Engine Rank Position for our clients by helping their website visitors engage with the page, stay on the page, click through the page, and convert into paid customers.
So bookmark this page, and consider A/B Testing your website with some strategically placed colors!
Switch a CTA Button from Blue to Orange or Red, Change the Background Color from Green to Black – go nuts if you’re feeling brave, it’s a learning experience.
By implementing suggestions found from academic articles, other marketing professionals, and world-class designers, we’ve been able to step up our game and squeeze a little more juice from our pages and our customers’ website design projects.
The Principles of Color Psychology
Based on the work of Satyendra Singh, who reviewed an extensive amount of literature on color psychology, shown in the link above:
“People make up their minds within 90 seconds of their initial interactions with either people or products. About 62-90 percent of the assessment is based on colors alone.
If you are skimming this article and missed the all bold, or the link above
About 62-90 percent of the assessment is based on colors alone.
Now, at this point you may be wondering exactly what colors to use – how to use them – how to make money with colors in your design, and all of that.
Well, slow down a minute… if you need a quicker ROI, check out our article on SEO vs PPC, then come back to this one.
Here’s a lovely infographic you must look at (opens in new tab), This visual infographic looks specifically colors as they relate to purchasing decisions.
It was put together by the folks at Neil Patel, who credit the data used in this fine work of art to: dirjournal.com, colormatters.com, “The Effects Of Store Environments On Shopping Behaviors: A Critical Review” by Shun Yin Lam, “The Profit of Color” by Color Marketing Group, “The Psychology of Color in Marketing” by June Campbell, “The Psychology of Web Performance.”
It’s certainly worth your time, so go on, check it out above.
Beyond Color in Psychology, there’s Saturation and Brightness.
There’s something else at play here as well, Saturation and Brightness… and based on this study, how light or dark any given color is, has a dramatic effect on the emotions associated with that color.
There’s a lot of data (facts, studies, smart people stuff) on this subject, but this research really caught our attention. Effects of Color on Emotions Valdez-Mehrabian
Saturation (S) and brightness (B) evidenced strong and consistent effects on emotions.
“Saturation (S) and brightness (B) evidenced strong and consistent effects on emotions. Regression equations for standardized variables were; Pleasure = .69B + .22S, Arousal = -.31B + .60S, Dominance = -.76B + .32S. Brightness effects were nearly the same for chromatic and achromatic colors.”
They go on to say:
“Blue, blue-green, green, red-purple, purple, and purple-blue were the most pleasant hues, whereas yellow and green-yellow were the least pleasant. Green-yellow, blue-green, and green were the most arousing, whereas purple-blue and yellow-red were the least arousing. Green-yellow induced greater dominance than red-purple.”
(Source)
The next time you open up a website and see a nice light BLUE above the fold image (see above) and wonder, “why do I feel the need to work with these Multiverse Media Group people?”…
…stop and think: What roll does color play on my website, and who can I turn to for help?