Color
Tailwind Color Generator
Generate Tailwind CSS color scales online from any base color. Create 50 to 950 color steps with HEX, RGB, HSL and copyable Tailwind config values.
Tool
Generate Tailwind CSS color scales online from any base color. Create 50 to 950 color steps with HEX, RGB, HSL and copyable Tailwind config values.
This tool runs in your browser. Your input is processed locally and is not uploaded.
About this Tool
Use this free Tailwind color generator to create a full Tailwind-style color scale from one base color. Generate 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 steps for themes, design systems and Tailwind CSS projects.
Examples
- #3b82f6
- #22c55e
- #ef4444
- #8b5cf6
Frequently Asked Questions
What is a Tailwind color scale?
A Tailwind color scale is a set of related color steps, usually from 50 as the lightest value to 950 as the darkest value.
Can I use the generated colors in tailwind.config.js?
Yes, the tool should provide copyable color values that can be used in a Tailwind configuration, CSS variables or design tokens.
Is the generated scale identical to official Tailwind colors?
No, it generates a Tailwind-style scale from your base color. Official Tailwind palettes are hand-tuned and may differ.
Which step should be my main brand color?
Step 500 or 600 is commonly used as the main color, but the best choice depends on contrast, theme brightness and usage.