Web Design Colours: Emotions and Associations

Web Design Colours: Emotions and Associations

Colour determines the user’s emotional reaction to a website, even if they are unaware of it. 

Read below for what colours to use for the background and different elements of the site to evoke certain sensations and how to combine colours correctly in web design.

Throughout history, master artists have received universal recognition for their ability to work with colour. 

In the modern world, specialists who can combine colours for commercial and business purposes in advertising and web design — are no less recognised.

You can pump the ability to use colours indefinitely. This is an absolute abyss of opportunities for influencing a person.

We will talk about the basics of colour theory and colour schemes, and then we will talk about the emotional impact of some web design colours.

Colour theory

You can devote an entire book to the topic of colour. We will not take it entirely but limit ourselves to helpful information for developing the interface design.

You can divide the theory of colour into three parts:

1 – Contrast

Each shade has its opposite, so to speak, its “sworn enemy”, which makes up the most significant contrast with this colour. 

To find such a colour, you can use the colour wheel. Just select the colour on the opposite side of the circle.

2 – Addition

These colours do not always conflict with each other. Complementary colours emphasise each other, unlike contrasting ones. 

In the colour circle, such colours follow each other, for example, purple-blue and pink.

3 – Resonance

Each colour evokes a specific mood. 

Bright warm colours (red, orange, yellow) fill a person with energy, awakening him, and cold dark shades (green, blue, purple), on the contrary, relax and calm.

For example, BBC News uses the red navigation bar to awaken the reader and strengthen his excitement. 

Given the specifics of the site-sensational news-the red colour looks like a logical solution.

Colour theory in web design is more than just decoration. Colour can change the perception of your site and play a crucial role in your business.

Emotional perception of colour

No one will deny the close correlation between colour and emotions. 

And, of course, any web designer wants to use this influence to create the right atmosphere for each site.

Based on several studies: an analysis published on the Vandelay Design website and a post about web design colours in Smash Magazine — we will explain how colours affect emotions and help create UX design.

It is important to remember that different cultures worldwide perceive colours differently. We will describe emotional associations that are characteristic only of Western culture.

Red

Emotions and associations: power, importance, youth.

The most stimulating colour, so energetically charged that it could even increase blood pressure. 

Red represents passion and power, it attracts attention more than other colours, so it is often used for important warnings and announcements.

For example, the red colour is very suitable for the NSA’s No Way website, which aims to warn about alleged threats.

At the same time, people tend to quickly leave the “danger zone” of red colour and scroll down. 

Using red web design colours at the top of the page is a great solution, as it draws attention to important information in the message. And this, in turn, allows you to show the user more content.

But this colour can also work against you because it can cause aggression or overstimulation. 

If you want to create a more relaxing atmosphere, use red moderately and choose lighter shades.

Orange

Emotions and associations: friendliness, energy, uniqueness.

As the calmest of warm tones, orange can evoke a whole range of diverse emotions. 

As the primary colour, it can arouse interest and cheer up; as a secondary colour, it can preserve these properties more unobtrusively.

In addition, orange web design colours help to create a sense of movement and energy. For example, it looks great on the cartoon website of the company Fanta, which suggests thoughts of youth and movement. 

Colour is associated with creativity while maintaining the feeling of a familiar brand.

Yellow

Emotions and associations: happiness, enthusiasm, archaism (darker tones).

This is one of the most versatile colours, and the emotions that it causes depend more on the shade.

The bright yellow colour adds energy without the sharpness and sharpness in red. 

Medium shades of yellow cause comfort, although they are still invigorating. 

Dark shades (including gold) provide a sense of antiquity and fill the space with timelessness, wisdom, and curiosity.

This colour is great for companies that earn money from consultations and want to emphasise their professionalism.

Green 

Emotions and associations: growth, stability, financial topics, environmental topics.

Green is a bridge between warm and cold shades, although it tends to be colder. This means that green has the relaxing effect of blue and has a bit of energy from yellow.

As a result, it creates a very balanced and stable atmosphere. 

Darker shades of green create an impression of wealth and abundance, as on the Ameritrade website.

Blue 

Emotions and associations: calmness, security, openness (lighter shades), reliability (darker shades).

As in the case of yellow, the influence of blue strongly depends on the shade. 

All shades of blue are universal regarding relaxation and security, but light colours are associated with friendliness, and dark colours are associated with sadness.

Social media sites like Twitter and Facebook use lighter and medium shades of blue, and corporate sites prefer darker shades of strength and reliability. There's also the option of a site writing about a specific brand, like WPDean is writing about WordPress topics and uses a shade of blue, as WordPress does.

An excellent example is the event design agency Van Vliet & Trap. Using blue flowers as a background, they visually hinted at their knowledge and skills in floristry and created a sense of reliability and trust.

This is of great importance because they work with events for which the visual part is essential, for example, weddings.

Purple

Emotions and associations: luxury, romance (light shades), mysticism, and mystery (dark shades).

Purple is historically associated with royal grandeur and hints at luxury. 

Purple shades reflect generosity and wealth, making them an excellent choice for fashion goods and luxury items (even for chocolate, for example, Cadbury, which chose it as the brand’s colour).

Lighter shades, such as lavender (purple with pink), evoke thoughts of romance, while dark shades seem more chic and mysterious.

Black

Emotions and associations: power, sophistication, tragedy.

The strongest neutral colours — black- appear on almost any site. 

It can cause different associations depending on the accompanying web design colours or dominate them if you use it excessively.

The strength and neutrality of black make it an excellent choice for large blocks of text, but it can create a feeling of tension or even be associated with evil as the primary colour.

For most websites, black is used to create a sense of sophistication. 

The combination of black and white in a minimalistic design gives the impression of elegance and style, as on the BOSE Dream and Reach website.

White

Emotions and associations: purity, simplicity, virtue.

In Western culture, white is associated with purity, kindness, and innocence. This colour is often used for the background of minimalistic and simple websites.

In addition, no colour will allow you to pay as much attention to other web design colours like white. 

For example, on the website of the Awwwards winner Kloin Toshev, all his works are laid out on a white background, which only highlights the illustrations and creates the impression of an elegant gallery.

Grey 

Emotions and associations: neutrality, formality, melancholy.

Even though grey can create a gloomy atmosphere in some situations, professional designers still use many greys.

It’s all about the shades: alternating them, you can get all the emotions caused by both black and white. In general, grey is a powerful tool in the right hands.

And combined with brighter colours in the design, the grey background seems modern and not gloomy.

Beige

Emotions and associations convey the character of the other colours.

The beige is rather dull and expressionless, but it has one remarkable property: beige takes on the character of the colours surrounding it. 

Therefore, beige serves as a background or a second colour if it is not intended to express restraint.

Darker shades of beige create a sense of tradition and earthiness, give a sense of paper texture, and lighter shades seem fresher and more modern.

For example, on the Dishoom restaurant website, the light beige around the name and darker edges indicate that this restaurant is a fresh look at traditional cuisine.

Ivory 

Emotions and associations: comfort, elegance, simplicity.

The colour of ivory, as well as cream, evokes almost the same emotions as white. 

However, the ivory colour is warmer (or less sterile) than white, which creates a greater sense of comfort while maintaining minimalism.

You can use ivory instead of white to soften the contrast between it and darker web design colours. 

Colour scheme

Each site has a colour scheme in which the primary colours are used to fill more space. 

As we said earlier, using these web design colours affects the mind and mood of a person mainly subconsciously. So choose them carefully.

Even though there are many ways to combine colours, we will focus on the three most successful and often used.

Triad (triple harmony, triangle)

The triad is the central and most balanced system of three colours. 

It uses resonance and colour addition, but there is no complex contrast, so the triad is the most reliable scale.

On the colour wheel of 12 colours, select any three located 120 degrees from each other: one colour for the main background and two for the content and navigation bar.

Double complementary system

This range is more challenging to implement but can be a great solution. Four colours are used: two contrasting and two additional.

Analogues (sequential system)

The range of similar colours uses mainly complementary shades. This allows you to emphasise some qualities, especially vividly and cause certain emotions.

For example, combining red, orange, and yellow colours emphasises energy and vitality. 

Using such scales is effortless, but choosing which colours will be included in the combination is challenging. 

Their effect will be exaggerated, so you can not make mistakes.

For example, the use of blue, turquoise, and green colours in the design of the Blinksale website created an atmosphere of calm and tranquillity. 

These are just the basics of colour theory, which can help create an impressive user design, and there is no limit to how far you can go in terms of colour on your site.

Valuable tools for colour selection

Fortunately, several tools help to put colour theory into practice. 

Try these palettes so that you don’t have to start from scratch in creating your own:

Adobe Color CC, formerly known as Adobe Kuler. This is one of the most reliable tools in choosing a colour palette. 

If you need a simple tool for selecting colours as quickly as possible, Paletton is perfect.

Flat UI Color Picker. It is another excellent tool for choosing the colour of the user interface.

The direct relationship between colour and emotions

Remember: users rarely notice and evaluate the colour of the background, navigation bar, and individual details, but this does not mean that the colour does not affect them. It just happens subconsciously.

The user has some emotions, develops an attitude to the site or brand, and performs specific actions: scrolls down, clicks on the buttons that prompt action, or does not notice them. Colour plays a massive role in all this.