Color Luminance

A certain color can be defined by hue (0° - 360°), saturation (0% - 100%) and lightness (0% - 100%). Luminance on the other hand is a measure to describe the perceived brightness of a color (Encyclopædia Britannica: "luminance, or visually perceived brightness"). You can lighten or darken a color by adjusting its lightness value, but lightness is not the only dimension to consider for luminance. That is because each hue naturally has an individual luminance value.

In HSL color space pure hue is defined at a saturation level of 100% and a lightness level of 50%. To visualize the individual luminance of hue, let's have a look at the main hues of a color wheel with constant saturation and lightness levels converted to grayscale. This way three dimensions of a color are mapped to one dimension, i.e. light(ness), with a reference to white = 100%.

You can see that blue has the lowest and yellow has the highest luminance value. Yellow is actually just six percentage steps away from white. It's good advice to roughly remember the luminance values of the main hues, as it helps to work more intuitively with color.

If luminance is dependent on hue, it's also dependent on saturation. Reducing the saturation level of any pure hue to 0% results in a 50%-gray and a 50% value in luminance respectively. So for hues with natural luminance above 50%, luminance decreases when the saturation level decreases. For hues with natural luminance below 50%, luminance increases when the saturation level decreases.

In conclusion, luminance is dependent on all three dimensions of color. Now you also get a good idea of how color information is handled in grayscale images.

Luminance improves your color choices

When you know luminance values, you also know the amount of contrast between two colors. Contrast as in the distance of luminance between two colors. For one color you always know the contrast value in relation to any grayscale value.

Color decisions need to consider luminance / contrast because it is key to usability. It's the most powerful visual information - before hue and saturation - and therefore best capable of guiding attention. Furthermore, it's much more effective to counteract color deficiency confusion by testing for contrast, than trying to choose the "right" color hue.

What does that mean in practice? Test for contrast from how people experience a composition. Starting from a single element, to other elements, sectionwise, levelwise, finally to the overall composition and then the other way round. Compositions in this context can be everything from what you wear to a website, or product packaging.

To test a composition for contrast, make a screenshot or take a picture and convert it to grayscale (the Black and White Picture Converter can handle .jpg and .png files). When you are about to make color choices, tools like the HSL Color Picker let you monitor luminance values to manage contrast from the beginning.