Luminance amount brightness light definition colour theory

Luminance is the amount of brightness or light in a color. It describes the perceived brightness of a color and how bright the color appears on a reflected surface.

Update: October 19, 2023

Luminosity is very important for color design. I’ll explain how to include colors with the same luminance in your palette. For example, a red with the same luminance as a yellow. But first, we need to understand what luminance is.

Not all colors are equally bright

Not all colors are equally bright of course. But they are also not equal in the way we perceive them. The sensitivity of our eyes to colors depends on the wavelength of the light. Complicating matters further is the fact that RGB was not designed for humans, but for electronic displays. One need only look at the RGB color wheel to immediately see that yellow is much brighter than blue and that red is somewhere in between. The reason for this is that RGB is designed so that the maximum values of red, green and blue produce white (the so-called additive model).

What is luminance?

Luminance is a measurement that describes the perceived brightness of a color. In other words, how bright the color appears on a reflected surface. Relative luminance, on the other hand, is defined as the relative brightness of any point in a color space, normalized to 0% for black and 100% for white. Don’t be confused by the term “normalized.” Since we are working with additive colors, we already know that zero values of RGB colors add up to black, while maximum values of RGB colors add up to white.

A pure hue in the HSL color model has a saturation of 100% and a lightness of 50%. In the HSV model, both saturation and value are 100%. It is possible to lighten or darken a color by adjusting its brightness/value.

But the hue itself also has an individual luminance value. To illustrate this, let’s return to our RGB color wheel (which is pure colors that are 100% saturated). Most designers will notice that greens are very green compared to blues and purples. This is because they have different luminance values. Take a look at the comparison below.

colour wheel and relative luminance of colors shown in greyscale

The familiar 12-step RGB color wheel for saturated colors you can see above. If you convert these colors to shades of gray, you get the wheel on the right. The percentages are shown – relative to white.

It’s easy to see that yellow has the highest luminance, it’s only 6% away from pure white. And blue has less than half the luminance of yellow.
Therefore, designers who try to mix colors from the RGB color wheel with full saturation end up with a poor palette in which some colors are far too bright compared to others, and harmony suffers.

Thus, luminance depends on hue. However, if you change saturation and luminance/value, the intensity and brightness of the color changes. This means that luminance also depends on saturation and brightness/value – all three dimensions of the HSL and HSV color models (keeping in mind that playing with hexadecimal numbers or the RGB triplet is a terrible way to change saturation and brightness).

Contrast is very important for luminance

Contrast is the luminance difference between two colors. If you know the luminance values, you also know what the contrast is between two colors. This is extremely important and is the basis for calculating the contrast ratio required for accessibility compliance.

But let’s say you want yellow and blue to be equally bright in your palette, without one color dominating the other. The only way to achieve this is to understand the luminance.

More definitions like Luminance amount brightness light definition colour theory

More colour definitions and palettes like Luminance amount brightness light definition colour theory and Golden Ratio Colors: