Web Design Colours: Emotions and Associations
Colour determines the user’s emotional reaction to a website, even if they are not aware of it.
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 , read below.
Throughout human history, master artists have received universal recognition due to 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 scheme, 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, so we will not take it in its entirety 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 greatest 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, awaken 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, to strengthen his excited state.
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 around the world 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, the purpose of which is 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, try to use red moderately and choose lighter shades of red.
Orange
Emotions and associations: friendliness, energy, uniqueness.
As the most calm of warm tones, orange can evoke a whole range of diverse emotions.
As the primary colour, it can arouse interest and cheer up, and as a secondary colour, it can preserve these properties but in a more unobtrusive manner.
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 but without the sharpness and sharpness that is present in red.
Medium shades of yellow cause a feeling of comfort, although they are still invigorating.
Dark shades (including gold) provide a sense of antiquity, 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 in terms of 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.
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, hints at luxury.
Purple shades reflect generosity and wealth in general, 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 of the neutral colours — black, appears 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, a grey is a powerful tool in the right hands.
And in combination 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 colour itself is rather dull and expressionless, but it has one remarkable property: beige takes on the character of the colours that surround 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 colour 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, evoke 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, which is why 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 it can be a great solution. Four colours are used: two contrasting and two additional.
Analogs (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, the combination of red, orange, and yellow colours emphasises energy and vitality.
It is effortless to use such scales, but it is challenging to choose which colours will be included in the combination.
The effect of them 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 , performs specific actions: scrolls down, clicks on the buttons that prompt action, or, conversely, does not notice them. Colour plays a massive role in all this.
The author’s bio : Alicia Burmeister is a digital designer and contributor to Essayassistant.org . She is also passionate about innovation and social media marketing.
