Tailwind CSS Color Generator & Converter

Create custom color palettes for your Tailwind CSS projects, or find the nearest default color to any HEX code.

Generate Custom Palette

Color Name

Base Color (500)

Find Closest Tailwind Color

Enter any HEX Color

How This Tool Works

This tool offers two powerful functionalities for working with Tailwind CSS colors.

✔️ **Palette Generator:** Enter a name (e.g., "brand") and a base color. The tool generates a full 10-step palette (50-900) and provides the code to extend your `tailwind.config.js` file.
✔️ **Color Converter:** Enter any HEX code, and the tool will instantly find the closest matching color from Tailwind's default color palette, helping you stay consistent with the design system.
✔️ **Instant Previews:** All generated palettes are displayed visually, with automatic text color for contrast.
✔️ **One-Click Copy:** Copy the entire config for your project or click any individual color swatch to copy its HEX code.

FAQs about Tailwind Colors

How do I use the generated config code?

Copy the generated code block. Then, open your `tailwind.config.js` file and paste it inside the `theme.extend.colors` object. This will make your new color palette available as utility classes (e.g., `bg-primary-50`, `text-primary-500`).

How does the "Find Closest Color" feature work?

The tool calculates the "distance" between your chosen color and every color in the default Tailwind palette using the RGB color space. It then shows you the color with the smallest distance, which is the closest visual match.

Can I generate multiple color palettes?

Yes. You can generate a palette for "primary", copy the code, then change the name to "secondary", pick a new base color, and generate another palette. You can add as many as you need to your Tailwind config.