Deciphering Lightness in Color Theory

Question

I’m working on a UI right now and there is again something related to color that I’m struggling with: The perceived lightness/value of color in a UI.

It's possible to create hierarchy by using color with different lightness. Be it in a painting or in a UI this principle is applicable. (recommend this video for that topic btw: https://www.youtube.com/watch?v=gJ2HOj22gDo&ab_channel=MarcoBucci)

My challenge:

I have to define a color palette for a digital product. I defined the neutral colors (grays) for the UI „scaffolding“ and the primary & secondary color that are used in the UI to draw focus (e.g. on buttons). So far so good.

The last step for me consists in defining a color palette for the „content“ in the UI, e.g. the avatars for user profiles (when no picture is uploaded yet). My approach for these colors is to desaturate them a bit, so that they don’t compete directly with the primary color used in the UI. (the primary color is much more „important“ in the color hierarchy because I use it to draw attention to interactive elements)

I have chosen a broad range of hues and was wondering whether I now should adjust all of them to have the same lightness. My thinking was that for user avatars there is no need to create a hierarchy by using colors with different lightness. For this reason I went into Photoshop and brought all colors for the „content“ to the same lightness. After a while of tweaking I got a good result but now I’m unsure if this step was even necessary …

- Do you think it makes sense to adjust all „content“ colors to have the same lightness?

- In other words: Does it make sense to „flatten“ the hierachy for these colors by adjusting their lightness to be similar?

I‘m really struggling finding an expert which I could ask these questions …

Hope that a color wizard stumbles upon this post and shares his take on the issue.

---

I attached a few screenshots to give some context where these „content“ colors will be used and the work I did in Photoshop. The last row in the grayscale image shows the colors from above adjusted by lightness.

Three variants of color palettes (1st one defined by sight, 2nd just a variant, 3rd is the variant adjusted by lightness, can be seen in grayscale below)

In the 3rd row one can see the adjusted lightnesses of the colors above

MS Teams is a perfect example of my situation

Answer 1

The problem this kind of solution usually carry is that they tend to think that a numerical change, in this case an equivalence, applied to a color, offers the best result.

The dimensions through which the color moves are not linear, as stated in the question. In fact, color measurements can be taken in three ways: optics, physics, and perception.

The proposed solution is an optical change: modifying one of the visual variables of color, brightness. This completely dismisses a relevant element in the use of color: perception. The color variables hue, brightness and saturation are not absolute at the perceptual level. If we reduce the brightness of the yellow color we get a mustard color, affecting both the hue and the saturation. Just like what happens in the captured image, the color of the first avatar (HR) seems to be from a totally different range than the rest. The same goes for the CN avatar. The general user will never see the avatars have brightness exactly equal to XX% but probably will see a couple of avatars that stand out for their color.

---

Personally, I would not use an optical change, on the contrary, I would go towards the other two paths: physics/perceptual. In this answer there's a mix of complementary colors to black and white. The right column is called off-white colors. Columns 2 and 3 on the right I think are the ones that best approach what is sought in the question. An extreme change in tone and saturation is not perceived, but on the contrary, they maintain a good balance, offering a wide range of colors, without the certainty of sharing the same XX% luminosity.