Tailcolor homeColorwaze logo

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.

  1. Create a Tailwind config file:

    Ensure your project has a tailwind.config.js file; create one if it doesn't exist.

  2. Adding your palette:
    • Extend Default Palette: To add your new palette alongside Tailwind's default colors, add it to the theme.extend.colors section of your tailwind.config.js file.
    • Replace Default Palette: If you want to use only your custom colors, add your palette to the theme.colors section instead.
  3. 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.