palettey
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

Palettey GitHub license npm GitHub Workflow Status

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

Package Sidebar

Install

npm i palettey

Weekly Downloads

1,292

Version

1.0.4

License

MIT

Unpacked Size

18.3 kB

Total Files

12

Last publish

Collaborators

  • bartbergmans