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