According to statistics, it only takes 1/10th of a second for us to form a first impression about a person; and websites are no different.
Google’s 2012 study entitled “The role of visual complexity and prototypicality regarding the first impression of websites: Working towards understanding aesthetic judgments” confirmed that it takes less than 50 milliseconds for users to form an opinion about your website. In other words: after only 0.05 seconds the average user has already decided whether he should stay on your website or leave it.
First impressions do matter. The first impression a user gets from your website depends on many factors, such as the structure, the spacing, the fonts and, of course, the colors and color combinations you display on your page.
What is color psychology?
The human brain plays a major role in color perception. In fact, although we tend to think of color as a physical object, it is actually a psychological phenomenon. Scientific research suggests that our perception of color is controlled much more by our brains than by our eyes.
The relationship between colors and the human brain is a complex one. Not only are colors perceived in the brain, but they also deeply affect our psyche. Experts claim that people subconsciously associate specific colors with specific social or cultural messages. A study published in the Journal of Business Research has revealed that customers are actually 15% more likely to return to stores with blue color schemes than to those with orange color schemes, thus proving that colors affect not only our thoughts and feelings but also our actions.
Color psychology relies on a mixture of scientific, psychological and cultural propositions. In fact, how we react to colors is determined both by universal evolutionary traits and by our specific cultural background.
Researchers claim that the way we associate certain colors to specific feelings or events is partly the result of evolution. For instance, very few people choose brown as a favorite color because of its association with rotting produce.
Other color associations are cultural specific and determined by our cultural background. Over time, we learn to associate certain colors with certain feelings and thoughts. For example, in the western world brides wear white and mourners wear black, while in South Africa red is the color of mourning and in India brides wear bright and colorful Saris.
What colors mean
As a consequence of both evolutionary traits and cultural background, the western culture has associated the main colors with the following ideas and feelings.
- Red: the color red represents joy, vitality, energy and passion and, in the western culture, it also represents love. However, red can also be associated with aggressiveness and anger.
- Green: green is the color of life and nature and evokes positive feelings in the observer, such as calmness and hope. Also, green stands for generosity, security, harmony, and growth.
- Yellow: yellow is the color of the sun. It inspires joy and happiness and symbolizes friendliness and openness and freedom. Yellow can have mood enhancing effects on the observer.
- Blue: blue is a cool and relaxing color. It is the color of the sky and the water. It stands for peace, trust and security.
The psychology of color in web design
When designing a website, usability and aesthetics are undoubtedly key elements to consider, but making your website beautiful and easy to navigate is not enough to achieve a first-class conversion rate.
In fact, color coding plays a central role in setting your website up for success. As said, colors and color combination can have a huge impact on how users react to and act on a website.
In general, websites display both neutral colors and main colors. Neutral colors like black, white and grey are usually used for the background, whereas brighter colors are used for details and other foreground elements. In the latest web design though, neutral colors are often very dominant in terms of how much space they take up. Their function is similar to the function of white spaces – that is, they give the reader a break and they enable him to take his time to digest and prioritize the content of the page. Moreover, neutral colors are considered trendy and minimalistic and are associated with progress and technology.
Warm colors like red, yellow and orange are very strong and are used to attract the attention of the observer on specific elements. However, when used too often on a single page, these colors lose their positive associative potential and evoke negative feelings, like aggressiveness and anger. On the contrary, a calming effect is achieved when combining different hues of green and blue. Blue also conveys loyalty and security.
The perception of a specific color also depends on which shade of the color you use. For example, more delicate shades do not usually attract the attention of the user, but they convey a sense of harmony and balance.
Color-coding and buttons
Users are consciously or unconsciously affected by the color-coding used on a specific web page, and they often act according to the feelings they associate with certain colors. Therefore, changing the color of your call-to-action button can often result in a significant improvement in your conversion rate.
A call-to-action button consists of five elements, which should coexist harmoniously and be consistent with the website design. These elements are: form, size, message, placement, and color. All five elements may affect the conversion rate. However, tests have shown that color plays a central role in improving your KPIs. In a case study carried out by Maxymiser, a company achieved an increase of 11% in clicks to the checkout area of their website only by testing color variations.
Researchers claim that bright warm colors, such as red, orange and yellow, have the highest conversion rates. Green is also an excellent option, as most people associate green with the “green light”, thus by clicking on a green button they have the feeling of doing the right thing. Conversely, darker colors like black, dark gray or brown have a very low conversion rate and should be avoided.
In conclusion, considering the psychological associations evoked by specific colors and design elements in your target audience is a key step in the process of designing a successful website. Notions borrowed from color psychology can help both designer and digital entrepreneurs to make the right decisions during the first stages of the design process, as well as to optimize an already existing website and unlock its unfulfilled potential.
About the author
Alessandra Maino works as Digital Marketing Manager at 99designs, the world’s largest online graphic design marketplace. Born and raised in Italy, Alessandra has been living in Berlin, Germany for four years. Together with marketing, design and branding, her passions involve nutrition, travel and literature.
How to create an excellent web design for your blog
“It is not what you say that matters but the manner in which you say it.” This famous quote by William Carlos William is as relevant for blogging as it is for real life. Although whether the “what” is important or not (especially in educational blogs) is debatable, the “how” is definitely a factor you…
11 productivity boosts for remote web development teams
This article is brought to you by Usersnap – a visual feedback & bug tracking tool, used by software companies like Facebook, Google, and Microsoft. Working in a remote web development team can be a lot of fun. Besides the fact of working in your pajamas in your home office, there are some greater benefits for employees and enterprises as well. On…
Hands-on experience with Hugo as a static site generator
A while ago – in April 2015 – we launched bugtrackers.io as a small side project. Since then, the site has grown from a three-pager to a website with dozens of interviews. The increasing number of pages & therefore line of code made us look for ways to improve our internal workflow. We also ended…
8 TED talks every web developer should watch
TED-Talks are fantastic, short introductions into new topics and perspectives. Everyone with internet access can dive into new stories and new worlds. There is a huge variety of these talks out there, so that it can be a challenge to get an overview of what’s out there. Therefore, we put our heads together and collected…
9 creative ways to ask your website visitors for feedback
You’ve finished some design drafts for a new website. You’ve even shipped those new designs to your website. And now you wonder what people – your website visitors – think about those new changes. In this post, I’m going to show you 9 creative ways to ask your website visitors for feedback which will help you…
How to boost your business with visual software
Our world is getting more and more visual every day. Our increasing visual intelligence is strongly connected to digitalization and digital products. In this blog post I want to give you an overview how you can use visual tools and strategies for your business. Let’s get started!
Building a software product?
Solve your customers' pain and create a great product.
Get feedback easily within the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.