How to pick the right colour palette

UI / By

How to pick the right colour palette

Let’s discuss colour theory

As a UX/UI designer, you must add to your responsibilities studying colour theory. If you are getting started on your professional career and you are looking for clear and concise information about this topic, this article is just for you.
Let’s go over some key concepts that you need to know to design a functional and aesthetic UI:

The number of colours

There is a solid trend regarding the number of colours present in a screen and how users interact with it. The more colours you use in your UI, the less complex the interaction. The more complex the interaction, the less colour your UI has. 

This is why we tend to see more colours and colour combinations in simpler formats like landing pages, where actions are not more than reading a brief piece of information or filling up a form. However, banking operation pages of a bank account or analytics tools like Google Analytics, Ahrefs or Facebook Ads are more complex, and we tend to see one or two analogous colours with hue variations; this is mainly because the interaction in these sites are way greater. The least thing we need is to get distracted by colours!

Light

By “light” we mean the small portion of the electromagnetic spectrum called the “visible spectrum”. It is a portion of the whole energy emitted by the sun that human eyes can perceive. All in all, it is the portion of colours that we get to see. 

Colour Wheel 

It is not just about how many colours our interface has. We must know how to combine them to get harmony. To do that, the first thing we need to know is to understand how colours are positioned on the colour wheel.

Colour Harmonies

This is the fun part! Colour harmonies are colour combinations that, according to their position and relation on the colour wheel, work well together. That is, that the combination is gentle to human eyes. There are three main combinations that are useful to create the chromatic palette of and interface:

  • Monochromatic Harmonies are solely composed of a single colour, but in different tones. For example, if we add black to pink it gets darker and it turns an old rose; if we add white to pink, it gets lighter and it turns baby pink. 
  • Analogous Harmonies are composed of a group of colours that are next to each other on the colour wheel. For example: yellow, orange, and red. We can also try out each colour tonality to get variations like brown or bordeaux.
  • Complementary harmonies are the opposite to the ones mentioned above. These harmonies are made from opposite colours, which are on the other side of the colour wheel. These combinations create a visual contrast. For example: purple and yellow, orange and turquoise. 

 

Colour Variations 

A good practice is to take as a base the dominant colour of the brand or project that you are working on and make variations by modifying the tone, try with white (lighter variations), or black (darker or deeper variations). 

Real-world images have natural colour variations, and we can extract them by using tools like PixelPerfect, an Android App. There is a useful Chrome extension called “Palette Creator” that generates a palette up to 32 colours by just clicking on an image. 

Here are two useful tools to create a palette by setting a colour base:

We can change the hue and value levels of the main colour to obtain different variations. How much, you may ask? Enough variations to use on an interface. If we add hue to the main colour, but we lower its value, we will get a dark variation. However, if we do the opposite, we will get a lighter variation.

We should not forget about grey tones. We can also apply the adding black or white technique to obtain a scale of grey to highlight the main colours. Grey tones help users focus their attention.

Total white, yes. Total black, not. Whereas we can include white colour to provide space and harmony to our design, we should avoid using total black. Black generates a strong and awkward contrast to the eye. Even dark modes use deep tones of grey, but not black!

Since we are discussing dark colours and grey tones, did you know that there are approximately 350 million colour-blind people in the world? I think the number is greater than you thought. It is very important to analyse the contrast level between the colours that we choose for our interface, and that we also run tests on grey scales. 

A fact about accessibility, related to UX, is that we can not base our design solely on colours. We cannot show error messages nor ask users to make decisions based only on colours. It is unethical.

 

 

I will take this opportunity to elaborate on this topic. These are five basic accessibility considerations in relation to colourimetry to make interfaces accessible to all people.

  1. The information on the site should have a colourless version available. E.g.: using the context or markers.
  2. Figure-background contrast: If a background has poor text or image contrast, it will not be perceived by colour-blind people or people with acute decreased vision.
  3. Background and foreground colours need to be highly contrasted to be perceived by black and white screens.
  4. The minimum text and image contrast is a 4,5:1 ratio.
  5. In terms of increased contrast, visual text and text on images must have at least a 7:1 contrast ratio.

Accessibility standards go beyond colourimetry aspects. Accessibility is an extremely important and delicate topic that is poorly discussed. To say “Making accessible interfaces is expensive and anaesthetic” is totally biassed. Accessibility is expensive if you do it at the end of the process as a final touch. To do so, people hire consulting companies or professional teams. This is incorrect, as it is also incorrect to apply UX in the end, three weeks after the product launch. UX and accessibility (that should be a unit) should be applied during the whole design and development process. Accessibility is not expensive if your team is qualified or familiar with good practices. Giving accessibility the attention it deserves is also a matter of ethics and how we choose to make technology. 

I could go on and on discussing accessibility… Should I write an article elaborating on it? Tell me what you think! 

You can read more about accessibility here: https://www.w3.org/WAI/standards-guidelines/wcag/es 

Before summing up, let me share with you an article about colour applied to UI:

https://material.io/design/color/the-color-system.html

I leave you with a final thought: good taste does not grow in trees. The best advice I could give you is to train your eye, explore projects on Behance, and Dribble, and get inspiration from Pinterest, save images, recycle ideas, analyse pictures and real-life compositions. The colour world is amazing!