Generate a 10-color palette from a base color
npm install paletteyPackage to generate a 10-color palette based on a given color hex.
Useful to generate Tailwind CSS palettes.
npm install --save palettey
Usage
js
import { createPaletteFromColor } from "palettey";// Generate a luminance palette
createPaletteFromColor("primary", "#7953e0", {
useLightness: false,
})
// Generate a lightness palette
createPaletteFromColor("primary", "#7953e0", {})
`To create css variables for the generated palette you can use:
js
const palette = createPaletteFromColor("primary", "D20000", {});
Object.entries(palette.test).forEach((entry) => {
const [step, color] = entry;
document.documentElement.style.setProperty(
--color-primary-${step},
color
);
});
``Check out Palette Generator to try the generator online.