Web design: How to Choose Right Website Colors

Web design: psychology of color for matching the best

The first impression is what counts. Far from being just an old saying, this statement contains a source of truth. A study by the university of Princeton dating back to 2006 revealed that the human brain uses only a fraction of a second to form an opinion about a person during the first meeting. The same applies to websites.

Another study, this time conducted by Google in 2012 and entitled The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments(“The role of visual complexity and prototipicità in the first impressions on the web sites: towards understanding aesthetic judgments”) tells us that a user takes less than 50 milliseconds to form an opinion on a web site. In other words: after only 0.05 seconds, the average user has already decided whether to continue the navigation of a site, or leave the session and return to the search results.

The first impression a user gets of a web site depends on several factors, such as the structure of the site, the organization of the white space, the font, and, without a doubt, the colors and the color combinations used on the page.

What is web design and what aspects to consider?

Web design deals with the design, development and usability of a site. Aspects that a designer must always keep in mind are:

  • the responsiveness from the mobile
  • the user experience
  • the choice of colours
  • the alignment with the chosen brand identity
  • the content design

What is the color psychology?

Colors for the web: the choices of web design

Not only the eye, but also the human brain plays an important role in the perception of colors. In fact, even if we tend to consider the color of a physical object, in reality it is a psychological phenomenon: in summary it is a processing generated by nerve signals that the photoreceptors on the retina send to the brain.

The relationship between colors and the human brain is complex in nature. Not only the colors that are perceived in the cerebral cortex, but they, in their turn, deeply affect our psyche. In fact, our mind connects to certain colors, sensations, feelings, and specific associations social, and cultural. This influence that colors have on our is the fundamental theme of the psychology of color.

The psychology of color is based on a combination of scientific, psychological, and cultural. In fact, the way in which our brain reacts to certain colours is determined by both traits, the evolutionary world by our specific cultural background. From one side, some of the associations are the result of the evolutionary process.

For example, very few people would choose the brown as a favorite color because of its association with material in decomposition. Other associations are determined by our cultural baggage. Being born and growing up in a certain Country with a certain culture, you learn to associate certain colours with certain feelings and thoughts. For example, in the western world, brides wear white and black is the color of mourning, while in South Africa the color of mourning is red and in India, brides wear Sari-vibrant and colorful.

What is the meaning of the colors

Diseganre a web site: which colors to use?

As a consequence of the evolutionary processes that of our cultural background, the western world has associated with the primary colors with the following ideas and emotions:

  • Red: the color red represents vitality, energy, passion, and love. However, red can also be associated with aggression and anger.
  • Green: is the color of life and of nature, and evokes positive feelings in the observer, such as calm and hope. In addition, the color green represents generosity, security, harmony and growth.
  • Yellow: is the color of the sun. It inspires joy and happiness and symbolizes friendliness, openness and freedom. The color yellow is known for its ability to improve the mood of the observer.
  • Blue: blue is relaxing. Is the color of the sky and sea and symbolizes peace, trust and security.

The psychology of color in Web design

In the design of a web site, the usability and the structure of the site are certainly important elements, but they are not always sufficient to achieve a conversion rate optimal.

In fact, the color choices play a central role in the creation of a successful website. Generally, neutral colors such as black, white and beige are used as a background, while the more vibrant colors are used for the elements in the foreground. More recent trends, however, see the neutral colors assume a dominant character in the economy of the web page. Their function in this case is very similar to the function of the so-called white space, that is, allow the reader to pause, digest information that is read, and to prioritize the content of the page. In addition, the neutral colors, thanks to their character, minimalist, are considered to be stylish, and are often associated with high-quality, progress and new technologies.

The choice of combinations in web design: neutral colors

Example of a use prominent of neutral colors in a web site

The warm colors like red, yellow and arancionand have a strong character and can be used to attract the user’s attention on specific elements. However, if used too often on a single page, they lose their positive connotation, and may even evoke negative feelings, aggressiveness and compulsion.

On the contrary, a calming effect is obtained with the combination of different shades of green and blue. Also, the blue conveys loyalty and security, and for this reason is often used for websites of banks, insurance companies, and medical studies.

Web design and colour psychology: the effect of the color blue

Example of the use of the blue color in the website of a dentist

The perception of color also depends on what shade of the same is used. For example, the more delicate shades may not be used for the attention of users, however, can help to convey a sense of harmony and balance.

Design and Colors of a web site: the Buttons

A study published in the Journal of Business Research has revealed that there is a 15% chance that a customer will return at a store decorated in tones of blue than the orange, thus showing that the colors have an influence not only our thoughts and feelings, but also our actions. Consciously or unconsciously, all users are influenced by the colours used on a web page and often act on the basis of associations, unconscious that they cause. For this reason, change the color of the button of a call-to-action (CTA) can result in a significant improvement of the conversion rate.

A call-to-action button is made up of five elements, that is, in the best-case scenario, should coexist in harmony with each other and with the design of the site. These elements are:

  • form;
  • size;
  • call-to-action;
  • position;
  • color.

All five elements affect to a different extent, the conversion rate. However, several studies have shown that color plays a central role in the improvement of the KPIs. In a study from Maxymiser, for example, a company was able to increase clicks to checkout by 11% just by changing the colors on your web page.

The warm colors such as red, orange and yellow have the conversion rate better.

Web design: CTA red color

Example of the use of the colour red to highlight the CTA buttons in an e-commerce site

Also the green is a great alternative, as most users associate the green with the green light of the traffic light, and then with the feeling of doing the right thing.

Right colour combinations in web design: green color for the CTA

Example of the use of the green color to attract the user’s attention on CTAs

The darker colors such as black, grey and brown have, instead, conversion rate very low and are not suitable for buttons and CTAs.

In conclusion, considering the great influence that colors have on our psyche and on our decisions, the choice of colours reveals a fundamental step in the design of a professional website. Some notions derived from the theory of the psychology of color can help both designers that entrepreneurs not only to take the right decisions during the design phase of a new site, but also optimize an existing one.

What are the colors of your website?

Based on the psychological theory of the color you’ve shown in this post do you think you have made the right choice? Tell us your experience.