Brew Digital's parent company Adaptavist, has a strong visual brand, and central 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 were three major issues: 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 a problem.
Companies that 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 left us in a situation where the colour we reserved for errors and faults is the same colour we use for our central identity. It wouldn’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?
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 hue, value, 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.
Value is how much dark or light is in the colour, and is the second, squaring dimension of colour.
Saturation is how brilliant or faded a colour is, and is the third, cubic dimension of colour.
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 about how to find a new red. Because we want our new colours to feel like they belong with the others, we should look for these patterns and explore 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!
There we have it. This is how the brand colour palette 2.0 was discovered.
There’s a whole bunch of interesting stuff I could say about colour use, gradients, contrast ratios, and all that good stuff. But they’ll have to wait for another blog post...
