Evolving a colour palette – Colour Palette 2.0

Choosing the perfect colour palette

March 11, 2021 | Daniel Sturman

Brew Digital’s parent company – Adaptavist – has a strong visual brand, and core to that brand is its bold orange logo. For many years, they had a very simple brand colour palette consisting of five basic colours.

As we continued to evolve our product design system and other aspects of our visual identity, it became more and more apparent that using the same five colours (and occasionally a couple of ‘extended’ colours’) wasn’t cutting it. There are three major issues that have been glaring for some time – the lack of a true blue, the lack of uniformity around using lower opacity shades of colours, and most importantly, the lack of a red. In fact, the investigation that led to the Colour Palette 2.0 began with investigating what our brand red should be, and this proved itself a problem.

Companies who build or make use of user interfaces need a red. Red is the universal colour of “something important needs your attention”. Until now Adaptavist had used the base HTML red. The out-of-the-box red. But the red problem isn’t solved by just using a basic red, because a., all true reds are very close to our brand orange, and b., on less colour rich or vibrant screens, our brand orange is near red anyway. This leaves us in a situation where the colour we reserve for errors and faults is the same colour we use for our central identity. It won’t do. We needed a new red. A red as far away from the brand orange as possible!

But how far? And what does far mean when you are talking about colour anyway?

Well, when we are talking about additive colour (colour produced by light rather than the subtractive colour produced from ink) there are three dimensions to consider. These are huevalue and saturation.

Hue is the baseline, default, or ‘colour’ of a colour. It’s pigment. If you imagine a colour as occupying a three-dimensional space, this is the flat first dimension.

An image explaining what the hue of a colour is.

Value is how much dark or light is in the colour, and is the second, squaring dimension of colour.

An image explaining what the value of a colour is when combined with the hue.

Saturation is how brilliant or faded a colour is, and is the third, cubic dimension of colour.

An image explaining what the saturation of a colour is.

So when considering hue, value, and saturation, one colour can be ‘far’ from another in any or all of these three dimensions. To take our lead on where to go we need only to look at our existing brand palette. As we have no intention of changing the original colours, then whatever has to come next must be born of, and make sense of, those original five.

If we take the original five, then look at their hue and saturation we can learn a little about how they work together (or don’t).

It looks like, with the exception of a rather unruly purple, the colours are at 100% saturation, with some variability around values. That’s okay. That tells us that the dimension we want to work within finding new colours is along the hue dimension. We can worry about the value dimension later. 

So let’s look at the position of the brand colours, in their pure hue, on the spectrum. This time the middle of the spectrum has been shifted to put our brand orange right in the middle.

What you notice right away is that the colours are not equally spaced, which is not really a surprise. You might also notice that the space between the two greens is about half the space between the orange and the leftmost green. This is also about the same space between the blue and purple, and the rightmost green and blue. Again, that’s not really a revelation of anything, but it might be a hint on how to find a new red. Because we want our new colours to feel like they belong with the others, we should be looking for these patterns and exploring them whenever possible.

If we take the space between the greens as the closest thing to a segmentary unit, there are five more new points between the originals – including a red!

Now if we break these colours into a palette…

…you can see a nice set of colours that have been put together by building on the position and spatial relationships of our original colours. Lovely stuff!

So that’s the hues in good shape. But we discovered earlier that with the exception of the light blue, the colours have different dark/light values. If we add some values increments to the hues we can see the challenge in two dimensions.

It would be really neat if we could standardise all the levels of dark or light to, say, 20% increments. We can’t technically achieve this if we stick to only using pure hue as each colour’s baseline. Fortunately there is no reason why we can’t nudge the baseline colours here and there to be a little duller or a little darker to ‘make them fit’ if we need to. So let’s do that.

By fiddling with the hues for the greens and taking the saturation of the purple down a little, the five original brand colours can be expressed in a numerically satisfying, vigesimal increments. And, as if it were meant to be, we can now join up the value-jumping brand colours by filling the vertical space with the new colours.

Look at our hue and value balanced, saturation corrected palette now…

Wooo! So there was a full colour palette, including a fine red, hidden in the spaces between our original full colours all this time!

So there we are – this is how the brand palette 2.0 was discovered.

And there are a whole bunch of interesting stuff I should be saying about colour use, gradients, contrast ratios and all that good stuff. But they will have to wait for another blog post…

See all the posts about Design.