1

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.

enter image description here 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)

enter image description here In the 3rd row one can see the adjusted lightnesses of the colors above

enter image description here MS Teams is a perfect example of my situation

Improve this question

1 Answer 1

Reset to default
2

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.

Improve this answer
2
  • Thanks so much for your answer! I'm really breaking my brain on this topic ... It sounds like you would suggest me to go back to defining the palette trusting my perception of the colors? (this would then be the 2nd row btw, need to redo the orange & yellow there tones, they are dirt ugly)
    – Unknown User
    Oct 4, 2022 at 20:42
  • And btw, yes you're right. The avatars for HR & CN in the MS Teams picture definitely look more saturated than the others. This could probably easily be adjusted by decreasing the saturation.
    – Unknown User
    Oct 4, 2022 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.