Colours Evoke Emotions. You Must Learn to Use Them in Your Website

Posted: July 10, 2015 in web design, web designing

Colour – the most overlooked aspect, and arguably, the most important feature of a website, indeed, MATTERS A LOT!

Yes, a designer crafts a site and makes its responsive. A developer works on the back end and front end to run the website without a glitch. A writer brings it to life by incorporating awesome content. And, an optimizer pulls it to visibility on every search engine.

However, to kindle emotions in the hearts of the site’s target audience, there has to be applied the right colour. So, every web professional with websites in his laboratory must put to use his knowledge of COLOUR THEORY. After all, it’s largely about the UX of sites now.

Let’s go back to good, old school days…

Because that’s where we learnt about the colour basics, about the terms and terminology, about what’s elemental and what’s not. Here’s the colour wheel yet again. Do you remember it?

colour in web design

And, do you remember sorting out:

  • What’s primary? – red, blue and yellow
  • What’s secondary? – orange, purple and green.
  • What’s tertiary? – yellow-green, blue-green, etcetera.

Further, when we grew up, we learnt about some more complex terms. We were taught how complementary colours are located on the colour wheel opposite of each other, and how they complement each other perfectly.

We were also taught about analogous colours, which sit next to each other on the wheel, match each other to some extent, but never contrast.

color therapy

And then came an interesting topic – the colour groups based on human emotions. We now had warm tones, cool tones and neutral tones.

Warm tones like red, orange, and yellow, we were told, evoke warmth. Cool tones like blue, green, and purple make us imagine something which is chilly and soft. Neutral tones like white, brown and grey, on the other hand, evoke no emotions.

And then some of us landed up in web design:

And in an instant, our lessons learnt in school paid off! However, this time, we learnt about two colour systems – RGB (Red Green Blue) and CMYK (Cyan Magenta Yellow and Key). We were told that we shall be using the former system for web designs.

web design color

There was colour theory in the next chapter:

We learnt how to manipulate colours to drive an amazing sensory experience for viewers. The motive was obvious – to induce the right emotions in customers and attract them.

Now, every colour has a meaning of its own. Web designers should not use colours just for the heck of it. There should be a purpose which is apt for the target audience, and which can convey your message clearly.

For instance, if you are using warm colours, you are deliberately trying to give rise to a sense of happiness within your viewer’s mind.

Fact: Did you know that there was a huge surge of eCommerce websites in yellow in the year 2009? Well, it was also the time when the world’s economy was in doldrums. A nice way to let your customers see the sunny side online, right?

Cool colours, on the other hand, are downright professional; they suit the corporate world best, and convey a sense of authority and trust. Can anybody ever imagine any other colour for Facebook? Well, it’s kind of, the safest social networking site till date, don’t you think?

Well, this is the colour theory in brief. However, it is more than just a garnish on websites. And, when used smartly, it can be a game-changer for a business.

color theory

The deep bond between colours and emotions:

Picking the ‘right colours for the right mood’ is a difficult job, given that different shades are perceived differently by the myriad of cultures around the world. However, in general, here’s is a brief idea about how the many shades speak about very distinct emotions:

  • Red: Importance, Passion, Hunger, Youth

“Red is a stop sign,

Red is a rose,

Red is an apple,

And a funny clown’s nose.”

Red is a powerful colour and a big stimulator of hunger. It’s for passion and it’s for energy. It’s the colour of your blood. And nothing calls a viewer’s attention like this colour. It’s common in food websites.

Brand inspiration – Coca Cola!

  • Orange: Vibrancy, Friendliness, Relaxation, Joy

“Orange is the pumpkin,

Orange is a cat,

Sleeping in the sun,

On an orange mat.”

Yes, the cat’s relaxed. And that’s what this colour does – it eases you! It urges you to be stylish, cheerful, creative and light-hearted.

Brand inspiration – Fanta!

  • Yellow: Enthusiasm, Inspiration, Happiness, Optimism

“Yellow is a star,

Yellow is the sun,

Yellow is the moon,

When the day is done.”

Yellow is full of energy. It provides the perceiver with a sense of comfort. The colour suggests wisdom and curiosity, happiness and positivity.

Brand inspiration – McDonald’s!

  • Green: Growth, Prosperity, Environment, Healing

“Green is the garden,

Green is the grass,

Green is money,

And a lady of class.”

Green symbolises Mother Nature. This colour is a great trust builder and suggests growth. People feel safe when they see green. It is also a sign of prosperity and financial stability.

Brand inspiration – Starbucks Coffee!

  • Blue: Safety, Calm, Reliability, Expertise

“Blue is the cold ice,

Blue is the vast sky,

Blue is the ocean,

And the cute boy’s eye.”

Blue has a calming effect on the person who perceives it. Blue suggests dependability and stability. It suggests vastness and hence, trust.

Brand inspiration – Facebook!

  • Purple: Sophistication, Royalty, Luxury, Fashion

“Purple is for love,

Purple is for passion,

Purple is for dreams,

And for rich sensation.”

Purple is a colour of lavishness. It is considered to be the most romantic of all colours. It also speaks about spirituality and a blissful, magical feeling.

Brand inspiration – Cadbury!

  • Black: Power, Class, Elegance, Depth

“Black is for the deep,

Black is for the dark,

Black is for the night sky,

Shining on the barque.”

The colour is not a part of the wheel. But, black is where technology is. In a sense, black, too depicts sophistication. You feel a sense of edginess when you perceive black. It’s a shade of timelessness.

Brand inspiration – Apple!

  • White: Peace, Vastness, Simplicity, Virtue

“White is for the dove,

And white is for the love,

White is for a diamond,

And a new bride’s glove.”

Nothing can beat the power of this colour. And, it is a must-have in websites who want to keep things minimal.

Brand inspiration – Google!

Now, why should the colour theory be applied to websites?

According to a recent report, you just have a minute and a half to impress a customer with a website. And, when it comes to eCommerce websites, especially, about 60-90% interactions happen by dint of colours alone.

Yes, shades are critical, and the success of your business depends on how smart you are with colours. The trick lies in using colours:

  • In the right manner.
  • At the right time.
  • For the right audience.
  • To serve the right purpose.

Simple tips to help you with colours:

  • Women fall for blues, purples and greens. They do not prefer greys, oranges and browns.
  • Men detest purples, oranges and browns. Instead, they like blues, blacks and greens.
  • Use more of blue if your website is new. It will help in building trust.
  • Use yellow wisely. Too much of it can cause trouble.
  • If you are selling furniture, opt for green.
  • If you are selling gadgets, use a combination of white, blue and black.
  • For call to action buttons, use bright colours.
  • Never neglect white.

Make use of the wonderful lessons learnt in school. Your web design should speak about your knowledge of the colour theory. Yes, it really should!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s