material-design-color-palette-generator

Generates color palettes that feel like material design.

Install

npm:

npm i material-design-color-palette-generator

yarn:

yarn add material-design-color-palette-generator

pnpm:

pnpm i material-design-color-palette-generator

Usage

index.ts

// generate a new color palette with a hue of 180 (cyan) and a saturation of 100%
let palette = new hslPalette(180, 100);
// set the css variables on the document element (corresponds to the :root selector in css)
palette.setMaterialCssVars("color-cyan", document.documentElement);

index.html

<div class="colored-element-light">
    <p>lighter colored box</p>
</div>
<div class="colored-element-medium">
    <p>medium colored box</p>
</div>
<div class="colored-element-dark">
    <p>darker colored box</p>
</div>

index.css

div.colored-element-light {
    background-color: var(--color-cyan-100);
}

div.colored-element-medium {
    background-color: var(--color-cyan-500);
}

div.colored-element-dark {
    background-color: var(--color-cyan-900);
}