HSLuv/HPLuv color space for TailwindCSS
npm install tailwind-hsluvbash
npm i tailwind-hsluv
or
yarn add tailwind-hsluv
`
Color names
The generateColors function accepts colors as string or array:
* hex color like "#RRGGBB" or "#CCC"
named color like "Eastern Blue" or "Seaweed", etc. (1)*
* RGB color array like: [255, 0, 0]
(1) The color name lookup is case-insensitive. You can find the color names in the source or you can pick one via the Name that color website.
Plugin usage
`javascript
// tailwind.config.js
const { hsluv } = require('tailwind-hsluv');
module.exports = {
// ...your other config...
plugins: [
hsluv({
superred: '#ff0000', // 6 digit hex color
grayscale: '#ccc', // / 3 digit hex color
blue: [ 0, 0, 255 ], // rgb array
green: 'green', // simple named color
mypurple: 'Jacksons Purple' // specific named color
}, {
step: 50, // default 100
hpluv: false, // use the HPLuv color space, default: false
}),
// ...your other plugins...
]
};
`
Generate colors directly
generateColors(colorMap, options): generates the colors for TailwindCSS.
Options:
| name | default | description |
| ----- | ------- | ------------------------------------------ |
| step | 100 | steps between the lightness values |
| hpluv | false | use the HPLuv color space (less saturated) |
Full example:
`javascript
// tailwind.config.js
const { generateColors } = require('tailwind-hsluv');
module.exports = {
theme: {
extend: {
colors: generateColors({
superred: '#ff0000', // 6 digit hex color
grayscale: '#ccc', /// 3 digit hex color
blue: [0, 0, 255], // rgb array
green: 'green', // simple named color
mypurple: 'Jacksons Purple' // specific named color
}, {
step: 100, // steps between lightness variants, default: 100
hpluv: false // use the HPLuv color space, default: false
})
}
}
};
`
It will generate an object which usable for tailwind config, like this:
`javascript
{
"red": {
"100": "#FFDADA",
"200": "#FFB3B3",
"300": "#FF8888",
"400": "#FF5353",
"500": "#EF0000",
"600": "#C00000",
"700": "#930000",
"800": "#690000",
"900": "#410000",
"default": "#FF0000"
},
"blue": {
// ...
},
// another colors...
}
`
Comparison between the color palettes
The "text" texts are colored with grayscale hsl(0, 0%, 10%-90%)` and each of the boxes have a background color lightness variant from 100 to 900.