Mixing Colours of Equal Luminance — Part 1
How to mix colours of equal brightness for your colour palette
Many designers I meet, especially fledgling or middleweight ones, do not have a genuine understanding of luminance. They know that some colours are brighter than others, that high contrast is necessary for accessibility, and that low contrast can be used for subtlety and aesthetic effect.
But I see relatively few who use luminance properly when creating a palette. They tend to mix Hex/RGB values using some tool or other, largely by eye. This gets them there are thereabouts but will always lose out to a correctly formulated palette based on luminance.
Luminance is incredibly — incredibly — important in colour design. It is not that complicated, I promise you. So in this two-part series, I shall explain how to create colours for your palette that are of equal luminance. For example, a red that is the same brightness as a yellow. But first, we have to understand what luminance actually is.
Not All Colours Are Equal
Obviously. But neither are they equal in the way we perceive them. Our eyes’ sensitivity to colour varies according to the wavelength of the light. To make matters worse, RGB is not designed for humans — it is designed for electronic screens. One glance at the RGB colour wheel and you can immediately see that yellow is much brighter than blue, and that red is somewhere in between. The reason for this is that RGB was designed such that maximum values of red, green and blue produces white (known as the additive model).
To better illustrate this, take a look at the image below, showing the full RGB colour spectrum compared with the variations in brightness when the spectrum is converted to greyscale.
So why does this happen? It is all about pixels. Well, subpixels, actually.
Put rather crudely, a pixel on a screen is actually made up of three subpixels — one each for red, green and blue (meaning any colour can be displayed by mixing the RGB components). So when displaying primary colours, only one of these subpixels is activated at any given time, as shown in the figure below (remember that black means no light at all in the additive model, and the pixel is off).
Now look what happens when we display the secondary colours (yellow, cyan and magenta). Red and green makes yellow, so now those two subpixels are activated — twice the amount of light than pure red. The same principle obviously applies for the other secondary colours, cyan and magenta.
And so on, for all 16.7m colours in sRGB. This is why the RGB colour wheel looks as it does and why, as designers, we need to understand these variations in brightness and design our colours to compensate.
What is Luminance?
Luminance is a measure to describe the perceived brightness of a colour. In other words, how bright is the colour from a reflected surface. Relative luminance, on the other hand, is defined as the relative brightness of any point in a colourspace, normalised to 0% for black and normalised to 100% for white. Don’t let the ‘normalised’ bit confuse you. We already know — because we are working with additive colour — that zero RGB colour values produces black, but maximum RGB colour values add up to white.
A pure hue in the HSL colour model pure has a saturation of 100% and a lightness of 50%. In the HSV model, both saturation and value are 100%. You can lighten or darken a colour by adjusting its lightness/value.
That’s fine. But hue itself also has an individual luminance value. To illustrate this, back to our RGB colour wheel (which are pure colours, remember, saturated at 100%). Most designers will already appreciate that the greens are so very green, when compared with blue and purple. That is because they have different levels of luminance. Take a look at the comparison below.
The familiar 12-step RGB colour wheel of saturated colours is shown on the left. When you convert those colours to greyscale, you get the wheel on the right. The percentages are mapped to — relative to — white.
It’s easy to see that yellow has the highest luminance — at 94%, it is only 6% away from pure white. And blue (44%) has under half the luminance of yellow.
This is why designers that try to mix colours from the RGB colour wheel at full saturation finish up with a poor palette where some selections are far too bright against others and harmony suffers.
So luminance is dependent on hue. But changing the saturation and lightness/value changes the intensity and brightness of the colour. This means that luminance is also dependent on saturation and lightness/value — all three dimensions of the HSL and HSV colour models (remembering that tinkering with Hex or the RGB triplet is an appalling method of changing saturation and brightness).
What does this all mean? Contrast.
Contrast is the distance of luminance between two colours. When you know luminance values, you also know the amount of contrast between two colours. This is extremely important, and actually the basis for calculating the contrast ratios required for accessibility compliance.
But supposing you want yellow and blue in your palette that are of equal brightness, where one does not dominate the other? The only way of achieving that with any accuracy is by understanding luminance.
We can visualise the 12 main hues of the RGB colour wheel, with their individual luminance relative to each other, as a plot line on a graph, shown below. These are actually the greyscale values from the figure further above.
Now, if we wanted to mix all those colours so that they are of equal luminance then that plot line would be absolutely flat.
And that is precisely what I will show you how to do in Part 2, published shortly.
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.
