Colour is everywhere. It has an enormous deal of effect on our perception and decision-making. Think about it. There is a reason why McDonald’s has bright yellow arches as their logo, and we seem to stop immediately when the traffic light blinks red. Colour psychology is an intriguing topic and is something UI designers should dive deep into when designing interfaces.
It is all about understanding emotions behind how we perceive each color
UI Bucket
Yep, you read it right. Even you may have felt it at some point. Now, let’s take a minute to understand what each colour signifies. It might sound like a generalization, but has a known impact on interface designs.
So, what does each colour signify?
Red: Passion, Excitement, Power, and Danger
Blue: Calmness, Trust, and Confidence
Yellow: Happiness, Warmth, and Optimism
Orange: Success, Creativity, and Enthusiasm
Green: Nature, Growth, and Money
Purple: Royalty, Spirituality, and Wisdom
Pink: Compassion, Love, and Sexuality
Brown: Rugged, Dependable, and Natural
Black: Elegance, Mystery, and Formality
White: Purity, Peace, and Luxury
By this time you must be having flashbacks of some of the mobile apps or websites you use and how they follow this simple rule. Now that we are done with the colours, it’s time we pal up with the almighty Colour Wheel and see how designers use it to create a unique colour palette every time. It might look overwhelming at first but trust me, it’s just basic maths.
Creating the correct (and meaningful) colour cominations – the Pro way
Let us understand the basics of creating an eye-catching colour palette to make likeable designs
Blue, Red, and Yellow (yes, not Green) are Primary Colours. Mixing two primary colours make up a Secondary Colour. And mixing one of the secondary colours with another primary colour makes a Tertiary Colour. When the primary, secondary, and tertiary colours are stacked together, they form a Colour Wheel.
The colour wheel can be a reference tool to get new ideas on your dashboard. It can be divided into Cool Colours such as Blue, Green, Purple and Warm Colours such as Red, Yellow, and Orange.
Let us get to know a few more basic terminologies before we get into the interesting stuff…
Hue is the purest form of any colour in the colour wheel.
When White is added to any of the colours to add some brightness, they form a Tint.
When Black is added to any of the colours to add some darkness, they form a Shade.
When Neutral Grey gets added to any colour, they become Tones.
The intensity of the colour is called Saturation. The higher the Saturation, the more vivid it looks.
Now that we have gone through some of the basics, here is a few colour combination techniques you can try to give your design a great look:
Complementary Colours
They are two colours at the opposite ends of the colour wheel that complement each other. Example: Orange and Blue. Avoid the 50-50 split and ensure one colour is dominant over the other.
Split-Complementary Colours
This scheme utilizes three colours. Like complementary colours, one colour finds its complement and then uses two colours on either side of that complement. Example: Red, blue-green, and yellow-green.
Analogous Colours
These are sets of colours that are close to each other on the colour wheel. Example: using warm colours such as red, orange, and yellow.
Triadic Colours
These are three colours from the colour wheel equally distanced in a triangular shape. It can be two sets of warm colours paired with one cooler colour or vice-versa. Example: Purple, orange, and dark green.
Monochromatic colours
This scheme uses only one colour from the colour wheel and uses its different shades, tints, and tones in the design. It is fascinating how one colour’s shades and tints can make a rich design.
Square colours
It involves four colours equally distanced from each other in the colour wheel in a square shape. Example: blue, orange, yellow-green, and violet. Ensure one of the colours is dominated over the other three to give a pleasant design.
Tips for beginners when using colour psychology
Since we have learnt some new colour combination tricks, here are a few points to consider when using colour in UI design.
The 60/30/10 Rule
If you have not heard of this one before, you have stumbled upon a great tactic. You use one dominant colour and apply it in 60% of the space, utilize 30% for a secondary colour and the remaining 10% to apply one accent colour. It gives users a pleasant view when using the interface to move their eyeballs comfortably around the screen.
Preferences in Age
Different age groups have distinct preferences. Children are fond of yellow. And as we grow older, we lose interest in warmer colours and favour cool colours. It is why senior citizens find blue more favourable. Blue is regarded as the most liked colour across every age group.
Preferences in Gender
There are subtle preferences between men and women. Women find purple attractive and orange least favourable whereas men least prefer purple. However, they both share a common interest in the colour blue.
Learning from brands, we can understand why Barbie and Victoria’s Secret pink colour appeals to many girls and young women.
Take Note of Cultural Differences
Different countries have different cultures, and their colour preferences vary from each other. In Western countries, white is seen as peaceful and symbolizes weddings but, in Eastern countries, white depicts sorrow and symbolizes funerals.
And it may sound surprising to some that blue is seen as feminine in Far Eastern countries. It is crucial to understand colour preferences when you are targeting a specific group.
Consider Dominant Colours for Call-To-Action (CTA)
Colours make an impact if you want to see those conversation rates. According to HubSpot, they measured the effect between green and red buttons. We may think that green would grab our attention more because green means Go in the traffic light but not really.
Red grabs our attention immediately compared to green. Think about it. We show more urgency when we see the stop sign displayed in red. Red is more eye-catching. It is best to put dominant colours like red for call-to-action buttons.
Some Colors Suit a Particular Industry
Some colours go well with some industries. You see warmer colours displayed in fast-food restaurants to make customers spend less time in their restaurant. Cool colours are adopted in bars to make customers more relaxed and spend more time there.
In the corporate world, blue is seen as the most favoured colour as it denotes trust and loyalty. Hence why Facebook adopts the colour blue in their brand and interface. Consider which industry you are in and adopt colours that go well with it.
Start experimenting with color in your design…
Colour psychology is a fascinating topic in UI design. It has a huge impact on the decision-making of users and the correct implementation of color psychology practices in UI designs ensure user retainability to a great extent. After all, we all love to get back to someone (or something) that understands us.
Use your creativity and your colour palette to design your eye-catching interface.