Tailwind CSS Theme Color Generator
Local ProcessingGenerate 3 to 11 step Tailwind CSS theme color configuration objects (100-900) from a single color.
How It Works & Processing Standards
Generate 3 to 11 step Tailwind CSS theme color configuration objects (100-900) from a single color.
Tool processing runs in your browser. If you create a calculator or conversion share link, its values are included in the URL. See the privacy policy for account, analytics and advertising data.
Current Limits
- Maximum input length: 100,000 characters
Set a name, base color and number of steps (3–11). Hue and saturation stay the same while lightness is spread evenly from 95% to 10%, named 100, 200, 300 and so on.
The base color itself is not placed in the scale. If you need it, replace the closest step with it.
What You Can Do
- Lightness steps
- Even lightness steps from light 100 to the darkest step.
- Config code
- Ready to paste as colors: { 'brand': { '100': … } }.
How to Use Tailwind CSS Theme Color Generator
- 1Name itEnter a name such as brand or primary.
- 2Set color and stepsPick the base color and step count.
- 3Copy the codePaste into theme.extend in tailwind.config.js.
Examples
Common Use Cases
- Quickly building a Tailwind scale from one brand color
- Drafting lightness steps for a design system
Frequently Asked Questions (FAQ)
Can I get 50–950 like Tailwind’s default palette?
Step names start at 100 and go up by 100; 11 steps give 100–1100. Rename them to 50, 100 … 950 if you prefer.