Color palette generation library for TailwindCSS.
npm install tailwindcss-palette-generatorbash
using pnpm
pnpm add -D tailwindcss-palette-generator@latest
using yarn
yarn add --dev tailwindcss-palette-generator@latest
using npm
npm i --save-dev tailwindcss-palette-generator@latest
`

!NPM
!GitHub Repo stars
!node-current
!GitHub last commit
!npm
!GitHub top language
👀 Basic Usage
Easily define the extension in your CSS file and specify your base colors:
`css
@import "tailwindcss";
@plugin "tailwindcss-palette-generator" {
primary: #FFBD00;
secondary: #FF6F00;
}
`
With this definition, you can now use your color palettes with shade levels from 50 to 900:
`html
Primary color
Secondary color (dark shade)
`
💡 Advanced Usage
$3
You can also generate color palettes programmatically:
`ts
import { getPalette } from 'tailwindcss-palette-generator/getPalette';
// Create palette with custom options
const palette = getPalette([
{
color: "rgb(255, 189, 0)", // required
name: "primary", // required
shade: 400
},
{
color: "rgba(255, 189, 0, 1)", // required
name: "secondary", // required
shade: 500
},
{
color: "hsl(44, 100%, 50%)", // required
name: "tertiary", // required
shade: 600
},
{
color: "#FFBD00", // required
name: "quaternary", // required
shade: 300, // you will set shades is mandatory
shades: [100, 200, 300, 400, 500]
}
]);
console.log(palette);
`
$3
`js
import { getPalette } from 'tailwindcss-palette-generator/getPalette';
const palette = getPalette({
color: "#FFBD00", // required
name: "primary", // required
shade: 300, // you will set shaders is mandatory
shades: [100, 200, 300, 400, 500]
});
export default {
// ...other configurations
theme: {
extend: {
colors: palette
}
}
}
``