Tailwindcss Palette Generator
Quickly generate tailwindcss color palettes from a base color or colors.
Demo • Key Features • Installation • Usage • Examples
Demo
Interactive demo generating tailwindcss palettes
Key Features
- Generate color palette with as little as a hex value ( See Example )
- Generate multiple color palettes ( See Example )
- Customize the palette shade names & lightnesses ( See Example )
- Default color naming applied automatically or can be overwritten ( See Example )
- Zero (0) dependencies
- Typescript support
- Preserve Supplied Color
Installation
npm i @bobthered/tailwindcss-palette-generator
Usage
Example - Basic
// tailwind.config.js
const {
tailwindcssPaletteGenerator,
} = require("@bobthered/tailwindcss-palette-generator");
module.exports = {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {
colors: tailwindcssPaletteGenerator("#FF0040"),
},
},
plugins: [],
};Example - Multiple Colors
// tailwind.config.js
const {
tailwindcssPaletteGenerator,
} = require("@bobthered/tailwindcss-palette-generator");
module.exports = {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {
colors: tailwindcssPaletteGenerator(["#FF0040", "#FFBB00"]),
},
},
plugins: [],
};Example - Custom Shades and Lightness
// tailwind.config.js
const {
tailwindcssPaletteGenerator,
} = require("@bobthered/tailwindcss-palette-generator");
module.exports = {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {
colors: tailwindcssPaletteGenerator({
colors: ["#FF0040"],
shades: [
{ name: "light", lightness: 95 },
{ name: "normal", lightness: 46 },
{ name: "dark", lightness: 7 },
],
}),
},
},
plugins: [],
};Example - Override color names
// tailwind.config.js
const {
tailwindcssPaletteGenerator,
} = require("@bobthered/tailwindcss-palette-generator");
module.exports = {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {
colors: tailwindcssPaletteGenerator({
colors: ["#FF0040", "#FFBB00"],
names: ["red", "yellow"],
}),
},
},
plugins: [],
};