How to use colours on the website? -

The colours on the website matter!

Colour affects not only our emotions, but even our behaviour. Each person has a subconsciously coded colour palette that evokes specific reactions and associations. They are often closely related to previous experiences and very individual memories. If in the family home the walls were painted yellow and, in our memory, dominate extremely positive reminiscences from adolescence, then the colour yellow will always be associated with something pleasant.

The psychology of colour deals with the influence of colours on humans. It is hard to believe, but even a relatively small change in the shade or saturation of a given colour may result in completely different feelings for the recipients. What’s more, as a result of cultural differences one colour can cause completely different connotations. While white in our culture is associated with innocence, in India it symbolizes death. It is worth remembering such differences when designing websites, but first of all take advantage of the achievements of colour psychology. Despite some discrepancies in the perception of individual colours, their strength is so strong that it would be a mistake to give up the knowledge provided by colour psychology.

Thanks to well-chosen colours, you can gently influence the reaction of recipients and shape positive opinions about services, products or the entire website in general. Depending on your needs, it’s easy to inspire the user, evoke specific feelings, but also strengthen confidence in the company. Therefore, it is better not to underestimate the role of colours on the website. You must approach this issue very consciously and choose the colour palette to strengthen specific communication goals. And here an important emphasis – it is important to discover what colours will affect the recipients of the website, and not the owner of the company.

Red colour

It evokes by far the biggest emotions among all the colours used on the website. That is why design elements in this colour are so readily used when creating websites for food and restaurant producers, but also for companies producing toys for children. In red it pays to present all types of promotions, key content or other important details. All this in order to make a given element stand out, arouse the will to act or fascination. The red button with the words “add to cart” will not escape your attention and will also increase the conversion.

It is no accident that red appears not only in the logo, but also on the website of brands such as Coca-Cola, KFC or Lay`s. Interesting fact – as much as 29% of the 100 largest global brands are red. It is also important that both women and men like red.

Blue colour

In a sense, it can be considered the opposite of red, because it cools emotions rather than fuel them. That is why this colour is so willingly used by companies that want to be associated with security, trust and reliability. If the basic issue you want to communicate to your clients is trust, then the best solution is to use blue shades. The automotive (Ford, Volkswagen), financial and B2B industries reach for them, but also technology-related brands such as IBM, Dell, Hewlet-Packard or social media tunes such as Facebook, Twitter and LinkedIn – the most, as many as 33% of the top of brands is blue, which definitely dominates among other colours on websites.

What’s more, due to the fact that this colour is also the colour of water and sky, and thus has a lot in common with nature, blue is ideally suited as a website element for companies in the hydraulic, medical, pharmaceutical, electrical or energy industries. Do you run a food business? Then avoid this colour on your website.

Green colour

It is associated with nature, ecology, but also health, harmony and money. It shows a calming, soothing effect. It is not surprising, therefore, that this colour is eagerly used by companies emphasizing action in harmony with nature. The green colours of websites are therefore used by brands associated with the word “eco”, but also with healthy nutrition, dietary supplements, agriculture and gardening. This colour shows attachment to the environment, it can even be considered a symbol of nature. Green is associated with Starbucks, Subway and BP. What’s more, some tones of green enhance creativity, so you can use CTA buttons in this colour, as long as there are no other green elements on the page. This is extremely important, because otherwise the green will not be visible, and this will translate into a significant decrease in the level of conversion.

Yellow colour

It is associated with joy, optimism and warmth, but at the same time it catches the eye the most – it is no coincidence that warning road signs have a yellow background. On the website, it contrasts strongly with white, but also with black. It works perfectly as the colour of buttons used by recipients to make key decisions, e.g. purchasing – it is often seen on the McDonald’s website. It is worth noting that 13% of the world’s largest brands are yellow. If we want to specifically highlight one element on the page, then spectacular effects are achieved by using yellow on a white background.

Orange colour

It is highly correlated with its component colours, i.e. yellow and red. It is an extremely energetic colour, immediately engaging to action. It’s no wonder that the CTA buttons on the Allegro are just that colour – after all, they are supposed to encourage you to make a purchase and indeed orange can be used to increase conversion on the page. Orange also stimulates activity and competition, but also trust. It is willingly used on websites of products for children or for athletes. Interestingly, in many cases marking a given product or service in this colour means that it is perceived as cheaper than others. Maybe that’s why it’s worth highlighting all promotional offers in orange.

Pink colour

It is associated with love, romanticism and woman. Probably not many people are aware of the fact that it was only in the 70s of the last century that it began to be associated with the female sex (previously light blue served this function). The colourful elements in pink are often used on the websites of cosmetics companies, beauty salons and products for ladies of virtually all ages. However, all this argument applies only to the classic pink, because the company T-Mobile even conjured up one of its shades, namely magenta. It is already an extremely energetic and creative colour dedicated in principle to everyone, including men. It is therefore not surprising that the Essex company also used the benefits of magenta on its website (and in the logo of course).

Violet colour

The colour is markedly with royal dignity and splendour (after all willingly used at courts), so cosmetic companies reach for it. It is also innovation and creativity, which strongly emphasizes the Play network. Chocolate producers, including Malka, cannot be omitted, as they are eager to use purple in the logo and on websites.

White colour

It’s a universal complementary colour that blends in perfectly with everyone else. Works great as a background. It is much easier to read dark text on a white background than vice versa, because your eyesight is less tired. White is associated with simplicity, purity and neutrality, so it is simply reliable on websites that are to be transparent and legible. At the same time, it gives the impression of spaciousness and elegance. Fantastically these features are used by Apple, but also by cosmetic brands.

Black colour

In addition to the obvious association with mourning (the funeral industry bows), black should also be considered a symbol of luxury, high standards and sophistication. Certainly, arouses respect and some respect. That is why it is the colour of business, but also of exclusive high-end brands. Just look at the websites of Karl Lagerfeld, Yves Saint Laurent or Chanel. The use of black in their case is very clear – it’s top-class clothing or cosmetics. However, sportswear manufacturers and the automotive industry are equally eager to reach for this colour. 18% of the hundred largest global brands have just black.

Brown colour

This is an interesting case. On the one hand, this colour symbolizes security and stability (hence its presence in the logo and elements located on the Nest Bank or UPS website) and tradition (winery sites), but at the same time brown is one of the least liked colours, both by ladies and by gentlemen. Of course, this does not mean that you should give up bronze completely, but it is worth remembering this kind of reluctance to remember when designing a page.

Colour perception and the website

Each graphic designer should consider the colour preferences of the target group while working on the colourful design of the website. Research clearly confirms that it is gender that determines them significantly, but also age. The first issue, women, as a rule, do not have problems with determining the nuances of shades and they can perfectly see the differences between magenta, episcopal and magenta. For most men, it will simply be pink. The second issue, if ladies prefer pastel colours (with less saturation), gentlemen are clear, strong, even contrasting. This can be seen even in the combination of white and black. White, which means purity and delicacy, defines fair sex. In turn, personifying strength and confidence, black is more preferred by male sex. Not only that, gentlemen are in favour of all shades of grey, up to such falling into black. Women also prefer lighter shades than men.

What’s more, the older the person, the lower his tolerance for bright and contrasting colours, which just start to irritate. Thus, they become unattractive. The above aspects should not be forgotten when creating or modernizing a website if it is to be targeted at a specific gender or age group. It is also worth mentioning any deviations from the rule resulting not only from individual preferences, but also from cultural factors. In Western civilization, black symbolizes mourning, but in India, white is such a colour. It is similar with the colour chosen by brides. While for Western culture this colour is traditionally white, it is red for Chinese. It is worth considering such issues if the company addresses its offer, among others, to the local market.

Colour on the website – basic issues

There are fewer and fewer pages in the Internet space – colour monsters that attack with a riot of colours, it’s hard to find or read anything. The awareness that the site should be as readable and transparent as possible is slowly becoming the norm. Each colour element should therefore be well thought out. The right colour is worth emphasizing especially a few details, especially:

  • Footer
  • Navigation
  • CTA buttons calling for a specific action (purchase, subscription, contact, etc.)
  • Branding elements, including the logo
  • Links
  • Adjacent sections
  • Important information

In any case, it’s worth highlighting the key areas or content on the page with colours. A colourful frame or text in a contrasting shade immediately catches the eye if the background remains white or very bright. This is extremely important for buttons.

It is also very important not to overdo it with colour saturation, but also with bright colours. The more diverse, bright colours, the harder it is to focus on content. If we want a call to action or any other activation of the recipient, then you should use expressive colours, such as yellow, red or orange, and rather in their lighter tone. Practice shows that darker colours reduce the conversion rate.

It is also worth remembering that a black or dark uniform background makes the page quickly tire the user’s eyes, and even becomes hardly readable. If we want a black background, it is best not to give it to the whole page, but only on some selected fragment. In any case, the neutral background is most effective, i.e. in white or light grey.

Choosing the optimal colour scheme is certainly not an easy matter. Colours affect the recipient and one can calm down but activate and encourage others to buy or warn. It cannot be concealed that the graphic designer has a difficult task of matching colours that fulfil their psychological functions and at the same time correspond to the intended use of a given website. Therefore, when choosing, you should carefully analyse many elements, and above all:

  • The specificity of a given industry – what works on websites dedicated to hydraulic services will not necessarily apply in the outdoor industry
  • A specific type of website – slightly different rules apply to a blog than to an information portal, online store or company website
  • Target, and therefore the target group – the colours depend on gender, age, but also social group
  • Motto and message – green for a company selling organic food is not accidental
  • Willingness to evoke a specific mood or reaction of the recipient

Rules for choosing colours on the website

When choosing the right colours for your site, it’s a good idea to use the colour wheel. The history of this concept dates to the end of the 17th century – a specific colour is assigned to each degree of the circle, so the sum of 360 degrees covers the entire range of visible colours. The shade of a given colour is lighter, the closer to the centre of this circle. By using this wheel, you can easily create both harmonious and contrasting combinations.

The principle of colour triad

In this case, choose three colours evenly spaced around the circle, every 120 degrees. Thanks to this, it is easy to get extremely harmonious, but very lively compositions. The triad is something intermediate between extremely contrasting complementary colours and similar analogous colours. If the combination seems a bit too flashy, then the solution is to combine shades closer to the centre that have a little whiter. It is very important to balance the colours exactly – preferably when one dominates and the other two emphasize it accordingly.

The principle of complementary colours

This time we are dealing with a pair of colours located opposite each other, with one dominant. This allows you to get contrast, so it works to emphasize particularly important information, e.g. CTA buttons or to separate important details from dominant elements, e.g. photos. The perfect choice for modern, very bold projects. However, it is worth remembering not to overdo it, because complementary connections tire your eyes quite quickly – they are certainly not suitable if the website is directed primarily at older people. A variation of this combination is the dividing-complementary colour principle, which consists in matching two complementary colours to the base colour. In this way, a slightly less saturated visual contrast is obtained.

The principle of analogous colours

These are adjacent colours, so you can achieve amazing harmony and a very calm, eye-pleasing composition. It’s important to keep the right contrast difference and limit yourself to 3, maximum 5 colours.

The principle of monochrome

As the name suggests, only one colour shades are selected located on the line from the centre to the edge of the circle. This creates a very visually subdued design.

Rectangle Rule

Four colours are used, arranged in two complementary pairs. Maintaining a balance between warm and cold colours turns out to be crucial. Preferably one colour dominates.

The principle of a square

It is associated with the previous one, except that the colours are evenly distributed on the wheel. Similarly, pay attention to the balance between warm and cool colours, as well as to bet on one dominant colour.

The colours on the website cannot be accidental!

Finally, it is worth emphasizing once again that skilful use of colours on a website is one of the most difficult elements of designing a visually interesting website. Colours must have their justification in the context of not only the readability and transparency of the entire composition, but also the industry in which you specialize and the recipient you want to refer to. No matter what colours you prefer – if they are completely unsuitable for the design of your site, then there is no point in risking and insisting on using them.

Remember that what matters above all is how your website will be received by the user and whether it will be a good testimony for your business. Therefore, trust our experience and take advantage of our help, and your website will positively surprise your current and future customers.