The psychology and relationship of colour and design

Monday, August 20, 2018

It’s something most of us have heard about – the ‘psychology’ of colour has been a buzz word in the world of design for decades. But what does this actually mean? Clicky’s design team have been doing some research into how colour can make us feel, and how that can be leveraged by designers to improve user experience.


It’s not magic, it’s science.

So let’s start with the basics. Colour theory is much more complex than yellow = happy and blue = sad. Colours can have several meanings, and can encourage an audience to feel or act in certain ways depending on when and how they are used.

There are plenty of generalisations to be made. Yellow can invoke optimism, blue makes you feel calm, red signifies danger. Whilst there is a basis of truth and evidence to back these generalisations up, it’s not enough to simply depend on these sweeping ideas when relying on colour theory in design work. In reality, colour preferences are incredibly personal, and the way someone reacts to a particular colour will likely depend on their unique experiences.

With this said, there are several key pieces of research that have shown us the effect of using colour in marketing to obtain desired results. Investigations into the way control groups react to colour can provide us with more accurate information that can be put to use when producing designs.

In the Impact of color on marketing study conducted by the University of Winnipeg, Canada, researchers found that

people make up their minds within 90 seconds of their initial interactions with either people or products and that about 62-90% of the assessment is based on colours alone

From statistics like this we can see why colour plays such an important role in how brands communicate with their customers. Colour is a tool that can be used to differentiate a business or product from its competitors, and influence how an audience will form an attitude towards it. 

Studies such as The Interactive Effects of Colours, documented in a journal by Bottomley and Doyle in 2006, further back up this notion. The results of their experiments show that

the relationship between brands and colour hinges on the perceived appropriateness of the colour being used Color Psychology: How Colors Influence the Mind

 In other words, is the colour used related to, and appropriate for, the business or product being promoted? A disconnect between subject matter and the brand’s visual representation will likely result in disengagement between your brand and your audience; a recipe for failure. Colour should be used to tell a story and to showcase your brand’s personality in order to positively influence user behaviour and public perception.

But how important is colour really?

If you want to be iconic, there are several areas of design you need to delve into before you do anything. Designers like David Airey have created sets of rules and ideals to follow in order to create memorable logos. We’re going to focus on the importance of colour, but it is definitely worth reading Airey’s book, Logo Design Love, for more help and advice on branding.

Airey’s Famous logos drawn from memory study in 2017 sought to find out just how memorable 10 well-known logos were among the American public, by getting a group of over 150 participants to draw the logos from memory. The results show that although a lot of the participants didn’t recall the correct shapes and symbols that made up the logo, 80% selected the correct colour palette before drawing the logo.

Airey states that “this highlights how beneficial it can be to assign logos with colours that are clearly different from competitors

From studies such as these we can see how important colour is in defining a brand’s identity. In addition to this, further research has shown that our brains actually respond better to recognisable brands, thus further strengthening the importance of colour in branding. In 2006 Science Daily published an article from the Radiological Society of North America that found that

strong brands elicit strong activity in our brains

The study used MRI scanners to investigate the physical and chemical changes in our brain function when we are presented with branded products and imagery. This new concept called “brain branding”, seeks to understand the way in which the “mind perceives and processes brands”. The results showed that “strong brands were processed with less effort”, whilst weaker brands required access to the brain’s working memory and tended to result in a “negative emotional response”. Read more about the study here.

Colour Theory for Designers – A Guide to Colour Palettes.

Okay, a lot of what we’ve covered so far has been pretty technical. Studies, research, results and findings are all very interesting, but they mean little if we can’t apply that to practical use. It’s worth covering some colour basics. Colours are split into three standard groups:

  • primary

  • secondary

  • tertiary

Combining primary colours results in a secondary colour, and combining a primary with a secondary colour will result in a tertiary colour. Using these colours to create colour palettes can improve the aesthetics of your project.

Monochromatic palettes use various shades and tones of one single colour to build up a colour palette. They are tasteful, easy to create and use, and are therefore popular, but can often become restrictive and require the introduction of an accompanying secondary colour palette to break up the ‘sameness’ (more on the importance of contrast later).

Complimentary colour palettes use colours that are opposite each other on the colour wheel – yellow and purple, blue and orange, red and green. This is a quick and easy way to create all-important contrast in your design. Contrast directs the audience’s attention to key areas of a design, and using a complimentary colour palette makes this a lot easier to achieve without going overboard with the number of colours in your palette. You can achieve a split-complementary palette by adding two adjacent colours from the colour wheel to reduce the sharpness of the contrast if it is too stark in practice.

Triadic palettes are popular when more colours are required. Some products have a lot of functions that benefit from colour coding, and as such require a larger number of colours than a restrictive monochromatic or complementary palette can accommodate. They use three colours that are equidistant on the colour wheel, and to stop the palette from appearing too messy it is often advised to use one colour prominently and use the others as accent colours –  Colour Theory: Brief Guide for Designers.

This is all very interesting, but how can I actually use this stuff?

The results of the studies we’ve covered all point to colour being of great importance in influencing user behaviour, controlling public perception and thus the recall rate of your brand. Essentially, colour plays a huge role in user experience or UX design, we will focus on the role colour plays and more importantly, how you can utilise it.

By definition, design must have a purpose. Most of the time, design will aim to improve certain KPIs such as conversion in order to achieve business goals. Colour is a powerful tool in influencing conversions, in simple terms, if a button stands out, it will be clicked and if it blends in, it won’t be. Rather than the colour of the button influencing the click rate, it is about the contrast between the colour of the button and the colours on the rest of the page. This is known as the Von Restorff effect, or the Isolation effect.

It makes sense when you think about it – if something sticks out on a page, you will be drawn to it. So naturally, calls to action and key pieces of information should be designed in such a way as to utilise this knowledge. You can use colour to create a hierarchy of information on a page in the same way that you can use scale and weight.

Iconic twentieth century graphic designer, Paul Rand, listed colour as a considerable factor in

“the language of form (other inclusions are scale, texture, shape, tension and balance).” 

Learn more about the language of form here.

Every notable designer of the past century or more has highly valued colour, its potential to highlight important information and its ability to control where the eye of the audience is drawn. In terms of website design, your user will look to the hierarchy created by the visual elements on the page as a guide to instruct them on what to do and where to look. This kind of non-intrusive guidance can have a number of benefits, such as:

  • making your product easier to use, especially for first-time or novice users

  • improving the user experience and satisfaction rate

  • positively impacting conversion and bounce rates, as the user will not feel frustrated and lost when using your product.

Choosing the right colour will change the mindset of a user and compel them to take action. Some colours have specific uses that will benefit a design and its KPIs in a positive way. For example:

  • Red is a strong colour with both positive and negative connotations. It can symbolise love and passion but also anger and danger. Red will alert a user to a specific action, drawing them in to a specifc element of a design. However, it must be used sparingly so as not to invoke negativity from the user.

  • Yellow is thought to be “the easiest colour to visibly see”, and has great psychological meaning. It can symbolise inspiration and joy, but if used too much can bring about feelings of fear and anxiety. Like red, too much yellow can be overwhelming and cause the opposite of the intended effect.

  • Blue can be reliable but also relates to sadness.

  • Purple can invoke luxury but can be distracting when used in large quantities.

Almost every colour has positive and negative connotations, and so it is prudent to focus more on the relationships between them and how they are used in a design rather than on the emotions linked with the colours themselves.

In conclusion, contrast is key!

Here’s your cheat sheet:

  • Colour plays a massive roll in how memorable and recognisable a design is

  • Your brain favours brands that are more well-known and recognisable

  • Colour can be perceived positively or negatively and so you must consider colour psychology in your designs so as not to invoke negative feelings with your audience

  • Choose your colour palette carefully depending on the nature of your brand or project

  • When using colour to influence conversion the most important thing is contrast

  • Little bonus fact! Women and men commonly favour blue and dislike orange and brown – something to remember next time you’re working on a new project