DEVELOPER TOOL · CLIENT-SIDE
Color to Tailwind CSS Config
Generate a complete Tailwind CSS color config with all shades (50-950) from a HEX color value. Runs entirely in your browser — nothing is uploaded.
Input
Config Code
How Tailwind Color Shades Work
Tailwind uses a 10-shade scale from 50 (lightest) to 950 (darkest). The base color maps to shade 500. Lighter shades are created by mixing with white, darker shades by reducing lightness and increasing saturation.
10 shades
50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 for complete design flexibility.
Copy-paste ready
The output is a valid Tailwind config object you can paste directly into tailwind.config.js.
Any color
Works with any HEX color. Use the color picker or type a hex value directly.
Frequently Asked Questions
What is a Tailwind color config?
A Tailwind color config defines a palette of color shades (50-950) that can be used throughout your project with utility classes like bg-brand-500, text-brand-700, etc. Each shade is a different lightness/darkness of the base color.
How are Tailwind color shades generated?
Shades are generated by adjusting the lightness and saturation of the base color. Shade 50 is the lightest, 500 is the base, and 950 is the darkest. This tool generates all shades from your HEX input.
Can I use this with Tailwind CSS v4?
Yes. The generated config object can be used in Tailwind CSS v3 (tailwind.config.js) or adapted for v4 (CSS-based config). The color values work across all Tailwind versions.