Material Design Palette Generator

Get perfect Material Design palettes from any hex color.

#5 Product of the DayJanuary 12, 2019
Featured Embed

Google's official palette generator is buried deep within the Material docs, and is hidden from search engines, making it difficult to discover.

To make it a little easier to use, Kuali forked it and added some minor improvements. We did not change the way colors are derived.

Now there's a proper app you can bookmark. Enjoy!

Reviews
Discussion
You need to become a Contributor to join the discussion.
Michael Edelstone
Michael EdelstoneMaker@edelstone · Designer + neat person
Hey all, Lately we've been tweaking the brand and product colors at my company, Kuali, with a focus on depth and accessibility. We admired the pre-programmed palettes Google offers in their theme editors and frameworks, but we already had some base colors that we liked – we just wanted to build palettes around them the way Google does. It turns out that it isn't easy to find a web app that does this precisely. We initially looked at http://mcg.mbitson.com, but this tool admittedly gets the calculation wrong on the shades, and it treats every input color as though it belongs in the 500 range. Then we realized that the official Material Sketch theme editor (https://material.io/tools/theme-...) has a color palette builder baked in. The colors would be perfect along Material guidelines, but that's a little clunky for documenting our process and not as universal as a web app. Eventually we found the official Google palette generator app buried deep in their docs here: https://material.io/design/color.... But again, that's kind of clunky to use and hard to discover for other people in my situation. I noticed that Google licenses it for free (thanks!) so I pulled out the code and made a little web app during my company's quarterly hack week. I also made it work on smaller devices and threw it on GitHub at https://github.com/KualiCo/mater.... Thanks for reading! 👋 -Michael