Dustin Boston

I've always been a fan of the2014 Material Design color palettes. But these types of comprehensive color systems only seem to be present in either big-name component libraries or by large brands. You can make your own, of course, but it's not as easy you'd think.

To make a workable color system you need to incorporate a broad range of colors including: your primary and secondary brand colors; functional colors such as those for success and error messages; neutral colors for surfaces and dividers. You'll also need to consider color contrast, color blindness, and other technical aspects such as formats. Lastly, to make your color scheme truly usable, you'll need to equip it with design tokens that clearly indicate the intention for each color.

So I decided to make my own. All you have to do is pop in your primary brand color and hit submit. The result is a full color system usable across a wide range of products.