Look at the image above. Don’t you feel some colors are brighter than others? For example, between the yellow and blue: which is brighter?

If you said yellow: congratulations. You have just discovered luminance!

Shine Bright Like a Diamond

First things first. In the HSB model (very popular in design software), each color can be defined by hue (0° — 360°), saturation (0% — 100%) and brightness (0% — 100%).

This model is pretty good:

• It aligns with how humans think about color attributes, making it very user-friendly;
• It models how color appears under light (unlike HSL).

However, there is a problem.

The brightness component of HSB is just a measure for the physical brightness of color, but not for the perceived brightness (or luminance).

In fact, in the image above, the six circles have the same brightness set on the HSB slider. All have 100% brightness. But our eyes tell us another story: some look clearly more “intense” than others. We quickly come to the conclusion that each color has its own luminance:

This is the same image we had at the start of this post. The only change is that it is now on a Luminosity blend mode, perfect to understand this concept.

And these are the luminance levels of each color, from 0 to 100. As we can see, there is an enormous difference in perceived brightness.

Why should we care

Okay, this is all very interesting, and certainly a cool fact to tell your friends.

But as designers, this helps us tremendously. Knowing luminance improves our color choices, because it is directly related to the amount of contrast between colors. And color decisions need to consider contrast, because it is key to a great user experience and usability.

A quick practical example: let’s normalize the colors in the starter image. The objective is to get the same perceived brightness throughout the color palette: therefore, we need to set the colors on the Luminosity blend mode first. Let’s aim for a value of 50%, a good middle ground

These are the same colors (or I should say, same hues) we had at the start. However, they are now normalized with a value of luminance of 50%, making them have the same perceived brightness to the human eye.

Ready to see the results?

Surprised? The color palette is looking a lot different from the one at the beginning. Especially the colors at luminosity extremes: yellow and blue.

Subjectively, we might not like the result. But objectively, we now have a consistent color palette, where every color “grabs” the user’s eye with the same intensity. This is vital to create a harmonious, perfectly balanced UI.

Enjoy color, responsibly

We could go on and on about color.

Perceived brightness is an essential, but often overlooked, concept in UI Design. It allows us to fine-tune our colors to perfection, and achieve good contrast, which is crucial for accessibility.

Next time we sit down to design, let’s take a closer look at colors: they deserve our attention.