2

I sincerely apologise for the duplicate question. I'm not sure how to add to the discussion on the original, and I don't have enough reputation to leave comments.

Here is the original question: How to choose the right color shades/tints for branding?

The favourite answer says that tints and shades maintain the same hue value as the base colour. The problem is Material Design tints and shades don't do that, and I would take a guess that they are using the HSL model for their S/B levels:

enter image description here

There is quite a big difference and the Material Design colors have a much more pleasant range.

I want to gain a deeper understanding of just exactly the process they have to get these results? I presume they must have some kind of tooling to achieve the correct perceived color.

Improve this question
2
  • It is ok to make a second question and referencing the original :o)
    – Rafael
    Commented Aug 12, 2017 at 17:36
  • 2
    Please explore the "Real Color Wheel" described at realcolorwheel.com/. The RCW demonstrates the correct appearance of pigments when shades and tints are rendered realistically. Also, the work of Faber Birren on colour perception deals specifically with the non-linear appearance of linear gradients and the linear appearance of non-linear gradients! Look for his Color Equation.
    – Stan
    Commented Aug 18, 2017 at 2:47

1 Answer 1

Reset to default
1

In my opinion, you should not use only the HUE to make a color gradient.

Take a look at this answer.

How can I make the color white look as white as possible?

Some colors look dirty when they are graded to white or black, at least we perceive it like that.

In my opinion, this approach of making a gradient based only on arithmetical operations is wrong, or at least, not optimal.

In fact, you can read how they shifted the HUE making these compensations of hue.

Our eye perceives colors in a bit different way. For example, in this gradient you posted, our eyes perceive more the differences on the bright side than the dark one.

Take a look at this other question, where I put an example of this logarithmic perception: Highlights and Shadows with Equal Weight

Other related posts: How can I make the color white look as white as possible?

And here is a practical example on how this gradients shifts make a object look better. Inkscape: realistic lighting and shading

Improve this answer
2
  • Thanks, the problem is I know from my experience in the printing industry that choosing the "correct" color is very subjective and results can vary depending on multiple factors such as environmental lighting and the medium being used. We eliminate the subjectivity by using tools like Spectrometers for calibration, and Pantone color charts for reference. Ultimately it's not something that can be done objectively with the naked eye. So your answer is correct as a principled guideline, but I want to know if Google designers have a process/tool they use to come to an objective conclusion.
    – IOIIOOIO
    Commented Aug 16, 2017 at 10:42
  • Actually, I've read over your answers to the other questions again and I guess it really does just boil down to having a calibrated screen and simply eye-balling it from there. I imagine there are more technical methods available, but probably not entirely necessary unless perfect accuracy is absolutely crucial.
    – IOIIOOIO
    Commented Aug 16, 2017 at 21:19

Your Answer

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

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