Material Design Palette Generator

Figma Material Design UI kit and code

Premium Material Design UI templates for Figma.

Easy to customize. Code files available.

What is this?

This is a (slightly modified) clone of the official Material Design palette generator. It does a couple things:

  1. Builds you a full color palette from a given hex color
  2. Provides you with complementary colors based off your primary color

Both are based on Material Design standards, and use Google's algorithm for color derivation.

Why is this?

Google's official palette generator is embedded and buried deep within the Material docs. Since it's an inline tool, it's also hidden from search engines, making it difficult to discover or bookmark.

To make it a little easier to access and to preserve it for my own future use, I grabbed the obfuscated code (the original scripts do not appear to be public anywhere) and added some small interface improvements. I did not change the way colors are derived.

The color output matches that produced in the Material Theme Editor for Sketch, so it's a good companion for that.

Support this project

This tool will always be free but your support is greatly appreciated.

Sponsor

If you like this tool, be sure to check out the Figma Material Design UI Kit and other design assets from SaaS Design. Figma Material Design desktop kit

Feedback and contributing

If you notice a problem or want a feature added please file an issue on GitHub. You can also just email me the details.

If you're a developer and want to help with the project, please comment on open issues or create a new one. Once we agree on a path forward you can just make a pull request and take it to the finish line. No big whoop.

Credits

Tech

It's just HTML, CSS, and JavaScript. Run it locally on your favorite server.