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.
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
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.
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
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.
Related Tools
Color Palette Generator
Generate color palettes for websites, apps, designs and brand concepts.
TOOLColor Harmony Generator
Create harmonious color schemes from a single base color.
TOOLColor Shades Generator
Generate shades, tints and tones from a base color.
TOOLGradient Generator
Create gradients with custom colors, directions and color stops.
TOOLCSS Gradient Generator
Generate copyable CSS gradient code with live preview.
TOOLTailwind Palette Generator
Generate Tailwind-style palettes for UI themes and design systems.
TOOL