Mixing Colours of Equal Luminance — Part 2

How to mix colours of equal brightness for your colour palette

In this two-part series, I show you how to create colours for your palette that are of equal luminance. In Part 1 I explained exactly what luminance (perceived brightness) and relative luminance (relative to solid white or black) actually are. The way in which screen pixels and subpixels emit light, and the way in which the eye perceives it, makes matching luminance of different colours problematic.

The conundrum for designers is, say, how to match the luminance of an orange colour with a purple colour. How do I make this purple as purple as that orange is orange?

A not insignificant spanner in the works is that sRGB is not designed for humans — it is designed for screens. So although the human eye has red, green and blue cones to detect colour, that is where the similarity ends. The hues on the RGB colour wheel are equidistant, but they are not perceived as equidistant — some are very much brighter than others. If you look at the image below — which shows the three primary and three secondary colours of sRGB, together with their greyscale equivalents — it is obvious that yellow is perceived as the brightest colour and blue is perceived as the darkest.

In other words, the sRGB colour space is not perceptually uniform. It was not built for humans. To take this a step further and visualise the individual luminance of hues relative to each other, let’s look at the 12 main hues of the RGB colour wheel, plotted in a brightness graph, shown below.

You can immediately appreciate why yellow is so very close to white, and why blue is so much darker than yellow. Certainly, the graph above explains why the RGB colour wheel looks so awful.

This is a quirk of the sRGB colourspace. You cannot change it. But you can get around it. Or, more accurately, design your way around it.

If You Enjoy Pain…

For the mathematically minded, there is a formula to calculate the perceived brightness (luminance) of a given RGB colour, as published by W3C:

luminance = ((299*R2) + (587*G2) + (114*B2)) / 1000

Additionally, W3C states how you can calculate the difference in brightness between two colours:

difference = ∆R + ∆G + ∆B

Theoretically, you could use these calculations in your colour mixing (indeed, TV and data visualisation applications tend to do exactly that, as do accessibility contrast checkers). But using mathematics in your colour design is impractical, to say the least, and ridiculously complicated.

You may also have heard of the CIE Lab* colourspace, and possibly of the HCL (Hue, Chroma, Lightness) mathematical transformation of it. These exist specifically to deal with perceived brightness. But colour mixing tools that support HCL are few and far between (Sketch, Figma and Photoshop certainly do not) which leaves you largely hamstrung.

So instead, I shall show you a trick — a cheat, more like — for mixing colours that are perceived as equally bright.

Luminance Matching Process

The best way to demonstrate how to create colours to be of matching luminance is to walk through the process of mixing colours using the HSL (Hue, Saturation, Lightness) colour model. Virtually every colour mixing and palette tool supports HSL, including Sketch (HSL is also supported in the CSS standard published by W3C).

As an aside, you may often see HSL described as Hue, Saturation and Luminance, or that luminance and lightness are the same thing. They are not. The L component in HSL only controls how light or dark a colour is. Although this affects luminance (as do the H and S components) it is not luminance in itself.

For any given client or project you will probably be handed brand colours that are immovable objects — you will be required to design around them. So let’s start with a blue. Twitter blue, in fact, and say we want to create a red and a green that are the same luminance, but not so saturated that they detract from the brand. As our starting point, here’s the blue swatch that we are not allowed to change:

So how do we go about this? The trick is to constantly monitor the greyscale equivalents of our colours as we mix them. The easiest way to do this on macOS is to open up Preferences > Accessibility and then the Display tab. There, you’ll find the greyscale toggle. Keep the Preferences window open and toggle regularly and check the grey values with a colour picker off the screen. Trust me: that is not anywhere near as clunky as it sounds.

In the images below, I have used HSL to mix the colours. HSL really is the best method available for mixing colours, and if you are not using it already I recommend you make the switch (you’ll thank me). Note that the HSL sliders in these images pertain to the second colour (on the bottom) since we are not allowed to change the brand colour (on the top). I have also shown the equivalent grey for each colour as we mix it, together with its Hex code. When the two greys match, we have two colours of equal luminance.

Let’s get started. Red fist, so we’ll begin with a pure red:

That is obviously too red — way too vibrant. Remember that all three HSL components impact on luminance, so we’ll decrease S and increase L slightly:

As you can see from the grey equivalents above, we are now very close to a match. So we can increase S slowly until we get this:

Well it is not a perfect match (#838383 plays #828282) but at a difference of just 0.4% it is close enough for the eye to barely perceive it.

Keep in mind that there is a lot of mathematics going on, here. The HSL transformation from RGB, the contrast calculation itself, back to RGB for the Hex value – and all using floating-point maths – means that there will be variations in the numbers returned. That’s why you may see some online colour pickers returning different Hex codes for the same HSL values. There are times when a very precise match is simply not possible in the sRGB colourspace.

So although we have a match, our red is too vibrant and competes with the brand blue. So we can decrease S to tone down the colour, and take L down a little as well:

And there we have it. A muddy, desaturated red that is the same brightness as our blue swatch, but that is subordinate to it. Now we want to do the same for the green, so we move up the H sider into that region of the spectrum and push L up from the 50% default midpoint:

Again, that is too vibrant and much brighter than the blue swatch. Just look at how brighter the grey equivalent is. We need our green to be less saturated and much darker, so we decrease S to the same percentage as we had for the red (35%) and take L way down until we get this:

A perfect match. So here’s our original blue swatch, together with our red and green mixes:

What we have done is create a red and a green that are both desaturated — and therefore do not compete with the original blue — and that are of equal luminance. That is to say:

• The red is as red as the blue is blue.
• The green is as green as the blue is blue.
• The green is as green as the red is red.

To prove the point, we can convert those three swatches to greyscale:

There are actually three swatches in the image above. Left and right is #838383 and the one in the middle (our red) is #828282. Give yourself a pat on the back if you can see the difference.

What we have shown is that hue, saturation and lightness each have an impact on luminance. And that adjusting them with a little care and attention means we can match the luminance of any colour. This is very powerful in user interface design.

Have a play with this system for yourself. It works.

Colin Shanley has been a designer and author for more than 30 years. This article is abstracted from his book Colour in User Interface Design, available on Amazon or for direct purchase of the ePUB.