HSB to the rescue!

Luckily there is a fantastic colour system, an alternative representation of RGB, that’s never really talked about (why?!) — HSB, which stands for Hue, Saturation and Brightness. Those three values make it really easy to adjust colours and create subtle variations, necessary for designing interfaces like different button states for example.

The hue is measured in degrees and therefore the settings range from 0 to 360. With the hue you are navigating your way around the colour wheel. It is easy to guess once you know the main signposts (red 0 or 360, yellow 60, green 120, etc.).

Saturation tells you how rich the colour is. It describes how much of the hue you are injecting into it and can range from 0 to 100%.

Lastly, the brightness describes how light or dark the colour is. The lower the value, the more it turns into black. It’s also measured from 0 to 100%.

Interestingly, the brighter the colour, the less saturation you need to see the hue. This means, for darker versions of the same hue, you’d not only decrease the brightness but increase the saturation accordingly.

But why is this? If you look at the graph, you can see that white is only present in the top left corner, but black claims the whole bottom.

Creating lighter versions of a colour is easy enough — you can just add a white layer on top and adjust the opacity. The way the system creates the resulting colour is by moving the colour picker towards the white corner on the chart.

Adding black in the same way, however, only moves the colour picker only straight down towards the bottom, decreasing the brightness. What you end up with is a colour that’s just a bit flat.

To get a darker variation of the colour that is still rich, we need to do both — decrease the brightness and increase the saturation correspondingly. We’re basically moving the colour picker to the bottom right corner instead of just down.

Once we are aware of this, creating sensible colour variations is like a walk in the park. We don’t need to rely on adding black (or white) elements on top, but can adjust the value directly in the HSB colour panel, moving the colour picker diagonally.

But wait! There’s one more thing!

In addition to hue, brightness and saturation, there is a fourth property of colour that we need to consider: Luminosity — the perceived brightness. Wait, what? Didn’t we cover brightness already? Yes. But let me explain.

You can adjust your colours to have 100% brightness, but if you compare a yellow and a blue for example, the blue will always look darker than the yellow, even though their brightness might be the same.

Here is proof — which one do you think is brighter?

The brightness setting of the colours are the same, they are both set to 100. To check the difference of the perceived brightness of colours, you can use the blend mode ‘luminosity’:

Luminosity is important to create contrast between colours. Two completely different hues might end up with a similar luminosity and little contrast, depending on their saturation and brightness settings. As a result, the design might even look blurry where the colours meet directly.

To adjust this, we can manipulate the other three properties of the HSB colour model. As for the hue, it’s good to know that pure red (0º or 360º), green (120º) and blue (240º) are luminosity low points, so any change would result in a slightly higher luminosity. The opposite is true for yellow, cyan and magenta.

In the following example, to increase the contrast, the hue of the blue was shifted towards the low point, from 187 to 194, whereas the yellow was adjusted towards its high point.

The brightness was modified in opposite directions as well and the saturation was adjusted accordingly.

There you have it — with this information as the basis, using HSB is a rather simple way to create colour variations that make sense. No messing around in RGB necessary. 📣 Spread the word!