Palettey

Package to generate a 10-color palette based on a given color hex. Useful to generate Tailwind CSS palettes.

Install

npm install --save palettey

Usage

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:

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.

Credits

Based on tailwind-css-palette-generator created by Simeon Griggs Contribution by George Ciesinski