material-color-tool

Material Color Tool

Procedurally generate a spec-compliant Material Design color palette based on an original source color. While there is not an official spec, Google has published a tool (linked below) which serves as a model for the conversions here.

Quickstart

const { makePalette } = require('material-color-tool')

makePalette('#E82127') // returns an array of hex codes representing your palette

Motivation

The conversion here is not simply adjusting lightness or other color attributes to generate a close approximation. While this produces pretty good results when the shades are close to the original color, as you get toward either end of the light or dark range this can produce an outcome where the shades no longer look like the original source.

As an example, below is a comparison of procedurally generating a palette for the Material "Blue" color (#2196F3) using the Material.io methodology opposed to a simple lighten/darken that you'll find in most community implementations:

How this works

Once again, I need to acknowledge that credit for this method goes entirely to the original authors of the Material.io tool.

When a source color is provided, it is converted to a CIELAB and HCL color space. First the color is compared to the existing Material design palettes to find the closest comparable palette using the CIEDE2000 algorithm. These palettes are the closest thing we have to a true "spec" and have been generated by hand.

If any of these palettes are close enough optically to the original source color, the palette is used instead. Otherwise, the closest match is pulled and the entire palette color adjusted to the source color by changing the HCL values.

Acknowledgements

All authorship credit to original Google Material color palette generator: https://material.io/inline-tools/color/