UX/UI Tips: The impact of colour theory on user experience

In this article, I have unpacked some basics around colour theory and, in particular, UI and UX colour theory. Colour is an incredibly powerful tool. In some cases, it can be associated with physical reactions such as increased blood pressure.?

Below we are looking to explore aspects of colour theory, including psychology and cultural differences. For screen design, we use RGB colour. Colours are displayed by combining RED, GREEN, and BLUE light. For UI design, we code our colours using hexadecimal values. Colours are specified with codes between 00 and FF. These specify the intensity of the colour.

?

1. Colour terminology

To begin, I have looked to explore some of the terminologies you may come across when working with colour:

RGB: Colours used for screen design; these colours are displayed by combining RED, GREEN, and BLUE light

CMYK: Refers to colours used in printing cyan, magenta, yellow, and key (black). Be careful not to create any screen designs that use CMYK. You will find that some colours will look dull; this is because CMYK uses ink to create colours, and RGB used light.

Primary colours: These are colours that can be combined to make other colours.

Tertiary colours: A tertiary colour or intermediate colour is a colour made by mixing the full saturation of one primary colour with half saturation of another primary colour.

Pure colour: This refers to primary, secondary and tertiary colours.

Tint: A tint is a pure colour with white added.?

Shade: A shade is a pure colour with black added.?

Tone: A shade is a pure colour with grey added.

?

2. The psychology of colour

Colour psychology is the study of how certain colours can impact upon human behaviour. When designing digital products and services, it’s critically important to consider the emotions users may associate with certain colours. For example, red is associated with a warning or danger due to its colour relating to the colour of blood. Other colours can be more subjective and may only have an emotional significance to a certain type of user.

The chart below outlines some examples of this:

3. Cultural differences in colour

As I have mentioned, colour is a powerful tool and will be perceived differently by different user groups. An important consideration is around how different cultures interpret data, a good example is the colour red; in Western culture, this can be an indicator of danger, but in Indian culture, it can meet beauty or wealth.

I have created the chart below to highlight some differences:

4. The 60-30-10 rule

The rule is pretty simple and will help create balance in your designs. 60% of the design should use the dominant colour, 30% should use the secondary colour, and an accent colour of 10% should be used.

Accent colours are often the most powerful of the three and can be used to highlight key UI elements?such as primary style buttons, links, and section headings.

?

5. Accessibility and colour

To continue reading this article, please visit our website

?

If you need support, drop my company a line

We’d love to talk to you about how Make it Clear can support your organisation. Book a call?here.