Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
30 lines (17 sloc) 1.82 KB

 Material Design Palette Generator

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.


  • Most of this is copyright Google Inc. If you do anything with their code, please maintain the licenses they indicate at the top of the large files.
  • You can use any of our modifications without credit, except...
  • Favicon image courtesy of Roundicons and pulled from If you reuse it, please continue to credit the creator.


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

You can’t perform that action at this time.