Tailwind CSS color palette generator
Instantly generate a ready to use color palette for your Tailwind project.Custom Tailwind color palette
This color palette is generated using your selected color as the 500 level color.
Using custom Tailwind palettes
To use your custom Tailwind palette you will need to add it to your Tailwind config file.
- Create a Tailwind config file:
Ensure your project has a
tailwind.config.jsfile; create one if it doesn't exist. - Adding your palette:
- Extend Default Palette: To add your new palette alongside Tailwind's default colors, add it to the
theme.extend.colorssection of yourtailwind.config.jsfile. - Replace Default Palette: If you want to use only your custom colors, add your palette to the
theme.colorssection instead.
- Extend Default Palette: To add your new palette alongside Tailwind's default colors, add it to the
- Further information:
For more detailed instructions and examples, visit the official Tailwind CSS documentation page on Customizing Colors
Related Tailwind color palettes
These related color palettes are generated by taking the HSV of the selected color and shifting it into multiple different colors. They would be a good jumping off point for generating all of the color palettes you will need.