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.

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.