I've searched a lot and did not find the expected result.

Another Question here says that google palettes are monochromatic, but one single palette contains colors with different hue(though only small difference).

So does anyone know how exactly are Material Design Palettes generated? What is the pattern behind them? To be clearer, given a 500 primary color, how is the rest colors generated?

  • I think this question is a duplicate of the question you've linked and you'll find your answer there.
    – mawcsco
    Commented Jun 10, 2015 at 16:04
  • The answers in the linked question do not give exact pattern of generating the palette. For example 'Red 500' is '#f44336'(Hue: 3), but 'Red 400' is '#EF5350'(Hue: 1). It is not even monochromatic. So the answers in the linked question do not actually answer this question.
    – LotAbout
    Commented Jun 11, 2015 at 1:14

2 Answers 2


There's no published algorithm, but it's latent in the code in the Material Design page Color. More specifically it's in the JS file bundle.js. The code is wildly obfuscated, likely the result of some kind of transpilation, but the algorithm is there.

There's a StackOverflow question, Material design color pallet, that discusses the same thing. The correct answer in that question comes from aytek.


Take a look at Hammwerk / material-color-palette.

It's a Java lib created by me to create such color palettes. The algorithm is reverse engineered from Googles Color Palette Tool.

First it calculates the difference between your custom color and each color in the "golden palettes" (the ones you can see on googles material color website). After that it takes the golden palette that contains the closest color to your custom one.

With this golden palette and the difference of your custom color to the one that is the closest one in the golden palette, it calculates each custom palette color.

  • Hi and welcome to GDSE! It seems you are linking to a tool created by yourself. Please edit your question so your affiliation with the tool is clear. It's mentioned here. It would be nice if you could also explain the principle here on the site, but it might be too complicated or code related?
    – Wolff
    Commented May 20, 2021 at 19:28

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.