2

We see here the palette of material design:

https://material.io/guidelines/style/color.html#color-color-palette

We see colors are at "500" and then they have gradations at 50, 100, and then A100, A200, etc.

What is the formula to get from say 500 to 50? Is it desaturate by 50% and lighten it by 10%? Or spinning the hue? I am using the color modification functions here - https://github.com/bgrins/TinyColor#color-modification - which should match with w3 standards.

For instance Teal 500 is #009688 and Teal 100 is #B2DFDB. What is the formula to get from 500 to 100 here?

The reason I ask is because in my app users can set a custom app theme, the color can be any color. But I want to make the gradations respect material design, as everything except the color is material in the app.

Thanks

Improve this question
6
  • 1
    It's not exactly clear how to do this. There's a clue in this question graphicdesign.stackexchange.com/questions/43021/…
    – dennislees
    Feb 16, 2018 at 21:39
  • 1
    Ultimately it's easiest to use a tool to do the work for you material.io/color/#!/?view.left=0&view.right=0
    – dennislees
    Feb 16, 2018 at 21:39
  • Thanks @dennislees thats useful but not for my case. I explain why: The reason I ask is because in my app users can set a custom app theme, the color can be any color. But I want to make the gradations respect material design, as everything except the color is material in the app. Thanks also very much for the question link! I couldn't find that in my searches.
    – Noitidart
    Feb 16, 2018 at 22:48
  • I think there isn't a linear formula to calculate the palette. Theoretical calculated colors MUST be adjusted to compensate our perception, contrast and an average output media accuracy. In short: they calculated each palette and then adjusted manually. For simple use cases you may interpolate in the HSL color space but you won't get the same professional results.
    – Adriano Repetti
    Feb 17, 2018 at 10:40
  • @AdrianoRepetti Luckily enough we have non linear maths! And there are models about human perception of colour.
    – run_the_race
    Oct 9, 2020 at 19:09

1 Answer 1

Reset to default
3

This is extremely complex and convoluted. The most common way is to convert hex to hsl or hsv, get the value in that format and then convert back to hex. You can do it automatically using this script which includes the specific FORMULAS (it's not just one)

If you want the specific formulas (again, FORMULAS) in more readable formats, you can try HSV and HSL.

enter image description here

In short, to directly answer your question: first you convert your hex codes to hsl or hsv. Then you use the formula(s) you specifically need. For example, Teal500 is 0.4844, 1.0000, 0.5882 and Teal100 is 0.4852, 0.2018, 0.8745. As you can see, very tricky, so I suggest you use the linked script or something similar and develop from there

Improve this answer
1
  • 2
    Thanks Devin very very much. I can convert to hsv no problem. Its just once im there i dont know how to modify it get to the 100 shade. I tried two colors, Teal500 and Teal100, the difference between the HSV was: Teal500 - Teal100 = {h:-0.26,s:0.798,v:-0.286}. And from Red500 minus Red100 was: {h:-349.89,s:0.583,v:-0.043}. My reason for trying to figure out this calc is I allow my app to use custom non material color, but then i use material gradations. So was trying to figure out the calc to get from Any500 to Any100.
    – Noitidart
    Feb 16, 2018 at 23:00

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.