The TailwindCSS color generator takes any hex color value and produces a complete 11-shade palette from 50 to 950, along with ready-to-paste tailwind.config.ts configuration code. It also matches your input against Tailwind's built-in color palette to tell you if an existing color is close enough to use directly.
What the output looks like
Enter #3b82f6 (a mid-blue) and the tool generates:
colors: {
primary: {
'50': '#eff6ff',
'100': '#dbeafe',
'200': '#bfdbfe',
'300': '#93c5fd',
'400': '#60a5fa',
'500': '#3b82f6',
'600': '#2563eb',
'700': '#1d4ed8',
'800': '#1e40af',
'900': '#1e3a8a',
'950': '#172554',
}
}
The 500 shade is the one closest to your input. Shades 50–400 are lighter variations used for backgrounds, hover states, and borders; shades 600–950 are darker and suit text, active states, and deep shadows.
Where to put the config code
Paste the generated object into theme.extend.colors in your tailwind.config.ts to add the palette alongside Tailwind's built-in colors. If you put it into theme.colors (without extend), it replaces all built-in colors including gray, slate, white, and black — you would lose those utility classes entirely.
When the color name matcher suggests a built-in color
The tool compares your input to Tailwind's built-in palette and displays the closest match (for example "closest match: blue-500"). If the distance is small, it is worth using the built-in name directly in your config instead of generating custom shades — one fewer custom palette to maintain.
Input format
Only hex values are accepted. The # prefix is optional. Three-digit shorthand (#f00) is supported and expands to six digits. CSS named colors (red, cornflowerblue) and HSL or RGB formats are not accepted and will return a validation error.