Tailwind Color Generator
Free Tailwind CSS color palette generator. Generate full 50-950 shade palettes from any base color. Copy-ready config for tailwind.config.js. All processing is local and private.
Click "Generate Palette" to create a color scale.
How to Use Tailwind Color Generator
Enter a Base Color
Type a HEX color code (like #3b82f6) as the base shade (typically 500). The tool generates a full 50-950 palette — 11 shades from lightest (50) to darkest (950).
Review the Generated Palette
The tool generates all 11 Tailwind shades automatically. Each shade is calculated by adjusting lightness from the base color. The palette follows Tailwind's consistent lightness curve.
Copy the Config
Copy the generated palette as a Tailwind config object. Paste it into tailwind.config.js under theme.extend.colors. The palette is ready to use as bg-custom-500, text-custom-700, etc.
Generated Palette Example
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
...
500: '#3b82f6',
...
950: '#172554'
}
}Frequently Asked Questions
How does the generator create shades?
The generator starts from your base color (usually the 500 shade) and adjusts lightness to produce 10 additional shades. Lighter shades (50-400) increase lightness and slightly reduce saturation. Darker shades (600-950) decrease lightness. The specific lightness values match Tailwind's built-in color scales, which were designed for consistent visual rhythm — the jump from 500 to 600 feels the same as from 600 to 700.
Can I customize individual shades?
The generator produces a mathematically consistent palette. If you need to tweak individual shades (e.g., making the 100 shade warmer), copy the generated config and manually adjust the specific HEX values. The generated palette is a starting point that follows Tailwind conventions, not a final design decision.
How do I use this in my Tailwind project?
Copy the generated config and add it to tailwind.config.js: theme: { extend: { colors: { brand: { 50: '#...', 100: '#...', ... 950: '#...' } } } }. Then use in HTML: class="bg-brand-500 text-brand-100". The color name (brand, primary, accent) is up to you — change the key in the config object.