Colours play a vital role in the world we live in. They are integral to every aspect of our existence. Colours can divert thinking, change actions, and cause reactions. They can irritate or soothe eyes, raise blood pressure or even suppress appetite. Hence it can be easily said that colours hold the power to impact our emotions. Ever imagined a black and white life? It’s hard to live in one, isn’t it?

Colours influence us on different levels and that’s why we all have our own favourites. The power that colours hold also impact our buying decisions as consumers. Brands are very well aware of this and make use of colours strategically to communicate with the audience.

The same principle applies to even digital design i.e a website or an app, where in you can impact your audience both positively as well as negatively by using right or wrong colours respectively. Hence it is very important to understand the psychology behind colours so that we can strategically use them to evoke the desirable emotions.
‍

Colours & emotions

There is no denying that colours are directly linked to our emotions. There are plenty of idioms to show what way each color can affect your mood. Few common ones, such as: Feeling blue? Green with envy? I just see red reading political news. This isn’t black-and-white for me. As these idioms suggest, some colours makes us happy, relaxed or calm, while others makes us hungry, angry, excited or energized. Hence, it’s crucial that we think through what colours we are going to use in our design. Colours largely dictate what emotions/message is sent out to the audience.

Let’s understand this concept with the help of a few examples: If we are designing a food app or workout app, we should choose warm colours such as red or orange because these colours evoke hunger & energetic emotions respectively. At the same time if we are working on a yoga or meditation app, blue or green would be your best choice to evoke relaxed & calm emotions. While designing our products we need to consider who is the target audience, understand what colours are going to impact them positively and then make a pick. Below we have compiled a color-emotion chart for your reference.

Colour wheel

We are all well aware of the concept of colour wheel. It basically consists of Primary, Secondary & Tertiary colours. Primary colours are the ones that cannot be generated by combining any other colours. Secondary colours are a mix of two primary colours whereas tertiary colours are a mix of primary & secondary.

The colour wheel has both warm & cool shades. Red, orange & yellow are on the warmer side whereas green, blue & purple are on the cooler side. Color combinations can be used top one’s advantage to achieve great results. Let's find out more about the colour combinations.
‍

Below are the different types of colour combinations

1. Complementary

Colours that fall on the opposite side of the colour wheel are called complementary colours. These provide high contrast in your design and are attention-grabbing.

‍
2. Monochromatic

These are tints/shades of one base colour. Such a combination is easy on the eye & brings harmony in your design, giving it a subtle feeling.

3. Analogous

Analogous combination is the one where three colours sit beside each other in the colour wheel. Here, we use one colour as our base/primary colour & the other two as secondary or accent colours.

4. Split complementary

Here one base colour is combined with its opposite’s analogous combination. This works similar to complementary colours, giving rise to a rich colour combination.

5. Triadic

Three colours that are equi-distant from each other are combined to create a triadic colour combination.

6. Tetradic

Here, we combine four equi-distant colours instead. This can also be called as two pairs of complementary colours that are equidistant from each other. This combination is difficult to implement since too many colours may bring imbalance in the design, but one can make it work with practice. However, it is very important to maintain balance so that your page doesn’t end up looking overwhelming.
‍

Contrast

The best indicator of a great user interface is when users find it easy to navigate and interact with. If there are any shortcomings in the interface, users are quick to abandon the product. Let’s understand why users abandon any products? 7 out of 10 times, it’s because of usability issues. An example of poor contrast is the text is not being legible or the content not being clear enough. Poor contrast of text ends up in poor readability that may prompt our users to leaving the website or app.

The good news is that we can fix a majority of usability issues simply by getting the contrast right. Take a look at the example below. Maintaining visual contrast & hierarchy is crucial because it motivates users to come back to your interface that eventually builds brand trust. When used correctly it also creates a brand recall value. Don’t we want our brand to stand out in the crowd?

The 6:3:1 rule

In the previous section we learnt how to create a color palette using primary, secondary and tertiary colours. To achieve proper balance in your design use the 6:3:1 principle, i.e., 60% of primary colour, 30% of secondary colour & 10% of the tertiary colour.

Many a times it’s possible to make mistakes when we have multiple colours in our brand palette. However, the 6:3:1 principle helps avoid this and provides balance to the design.

A note on Accessibility

Ever wondered how your website looks like to the visually impaired? According to the WHO, roughly 285 million people worldwide are visually impaired: either blind or suffering from other vision impairments. That’s a lot of people whom you shouldn’t ignore while designing your product. Today, we as designers should be sensitive to the needs of visually impaired and equip ourselves to design for accessibility.

Here are a few tips you should keep in mind to design products that can be accessed by all kinds of users.

• Use alt text for your images.
• Use proper contrast.
• Buttons for contradictory actions should be strikingly different.
• Make your CTA’s standout from the background.
• Use keyboard shortcuts wherever applicable.
• Don’t rely only on colours, use supporting text for all important actions.

Conclusion

So far we learnt how colours affect our emotions, how each colour represents a multitude of emotions & what should be considered while picking colours for our product. A simple tip: choose your colours smartly & wisely to build users’ trust. However, don’t get overwhelmed with colours, consider your target audience before designing. Use a colour combination that works best for your product. Test it out with users to capture their real-time feedback. Find out what emotions your users feel.

Thanks for reading this blog. Happy Designing!

‍