This package provides a simple function to generate shades of a given color, which can be used to extend the color palette in your Tailwind CSS configuration. It allows you to create a consistent and customizable color scheme for your project.
This project is a Fork of tailwind-shades
- 🌈 Color shade generator [50 to 950]
- ✨ Include Half Shades [150, 250, 350, etc]
- ⚡ Zero dependencies
- ✅ Hex and RGB Output
- ✅ CSS Variables Setup
- ✅ Typescript Support
Use npm to install tw-shades.
npm install tw-shades
// tailwind.config.js
import { shadesOf } from 'tw-shades';
/* @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
accent: shadesOf('#913985'),
/* accent: {
'50': '#f4ebf3',
'100': '#e9d7e7',
'200': '#d3b0ce',
'300': '#bd88b6',
'400': '#a7619d',
'500': '#913985',
'600': '#742e6a',
'700': '#572250',
'800': '#3a1735',
'900': '#1d0b1b',
'950': '#0f060d'
}
*/
},
},
},
plugins: [],
};
You can pass a format property
import { shadesOf } from 'tw-shades';
const shades = shadesOf('#913985', { format: 'rgb' });
console.log(shades);
/* {
'50': '244 235 243',
'100': '233 215 231',
'200': '211 176 206',
'300': '189 136 182',
'400': '167 97 157',
'500': '145 57 133',
'600': '116 46 106',
'700': '87 34 80',
'800': '58 23 53',
'900': '29 11 27',
'950': '15 6 13'
} */
You can create or update CSS Variables with the applyShades function
import { shadesOf, applyShades } from 'tw-shades';
const shades = shadesOf('#913985', { format: 'rgb' }); // or hex
applyShades(shades, 'primary');
/*
:root {
--color-primary-50: '244 235 243'
--color-primary-100: '233 215 231'
--color-primary-200: '211 176 206'
...
}
*/
Also in you tailwind.config.js
// tailwind.config.js
import { shadesOf } from 'tw-shades';
/* @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
primary: {
50: 'rgb(var(--color-primary-50) / <alpha-value>)',
100: 'rgb(var(--color-primary-100) / <alpha-value>)',
200: 'rgb(var(--color-primary-200) / <alpha-value>)',
300: 'rgb(var(--color-primary-300) / <alpha-value>)',
400: 'rgb(var(--color-primary-400) / <alpha-value>)',
500: 'rgb(var(--color-primary-500) / <alpha-value>)',
600: 'rgb(var(--color-primary-600) / <alpha-value>)',
700: 'rgb(var(--color-primary-700) / <alpha-value>)',
800: 'rgb(var(--color-primary-800) / <alpha-value>)',
900: 'rgb(var(--color-primary-900) / <alpha-value>)',
950: 'rgb(var(--color-primary-950) / <alpha-value>)',
},
},
},
},
plugins: [],
};
💡 Tailwind classes are generated in build time. Using CSS variables you can set colors dynamically in run time, just override the CSS custom properties.
Take into account to use the shades format and tailwind config accordely. You don't want a rgb() function for hex colors, right?
Both shadesOf and applyShades are customizables by config object
const shadesOf: (hex: Hex, config?: ShadesConfig) => Shades;
type ShadesConfig = {
format?: 'hex' | 'rgb'; // default to hex
halfShades?: boolean; // generate halfshades, default to false
separator?: boolean; // if true, rgb colors will format as '102,6,0'
};
const applyShades: (shades: Shades, name: string, config?: { prefix: string }) => void;
type Shades = { [key: number]: string };
/*
name: The variable name. Required.
config: {
prefix: You can change this. Default to 'color'
}
--${prefix}-${name}-${shade}: value
--color-primary-100: '233 215 231'
*/
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (In conventional commit format, you can use 'cz')
- Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Please make sure to update tests as appropriate.
Distributed under the MIT License. See LICENSE.txt for more information.