The psychology of color in web design

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.

Summary

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.