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 Jun 10 '15 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 Jun 11 '15 at 1:14

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 https://github.com/Hammwerk/material-color-palette.

it's a java lib to create such color palettes. the algorithm is reverse engineered from Googles Color Palette Tool.

New contributor
David Hamm is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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