Tailwind CSS Color Shades Generator
FreeGenerate a custom color scale for Tailwind CSS. Get 50–950 shade values and a ready-to-paste tailwind.config.js snippet. Free, browser-based.
What's next
Settings guide
Tailwind color step reference:
| Step | Typical lightness | Primary use |
|---|---|---|
| 50 | ~97% | Page backgrounds |
| 100 | ~94% | Card backgrounds, subtle fills |
| 200 | ~88% | Dividers, subtle borders |
| 300 | ~76% | Disabled states, placeholder text |
| 400 | ~62% | Muted icons, secondary text |
| 500 | ~50% | Brand color (most vivid) |
| 600 | ~42% | Hover state (buttons) |
| 700 | ~34% | Active/pressed state |
| 800 | ~26% | Dark body text |
| 900 | ~18% | Headings, dark theme surface |
| 950 | ~12% | Near-black |
Tailwind config output format (v3):
```js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#fff1f2',
// ... all steps
950: '#1c0005',
},
},
},
},
}
`
CSS custom properties output (Tailwind v4 / any project):
```css
:root {
--color-brand-50: #fff1f2;
/* ... */
}
`
Format comparison
Custom scale vs Tailwind's built-in palette: Tailwind's palette uses colors designed for general use — they're not brand-specific. Generating a custom scale for your brand color gives you semantic utility classes (bg-brand-500, text-brand-800) that document intent and integrate with Tailwind's JIT engine. Don't use arbitrary values like bg-[#FF5733] throughout your codebase — a named scale is more maintainable.
Tailwind v3 vs v4 configuration: Tailwind v4 moves away from tailwind.config.js in favor of CSS-first configuration. Custom colors are defined as CSS custom properties in your stylesheet. This generator can output both formats. Check your Tailwind version before choosing the output format.
Using the scale vs Tailwind's color finder: The color finder tool tells you which existing Tailwind color is closest to your input — useful for projects using only the built-in palette. The shades generator creates a NEW scale for your specific brand color — necessary when no built-in Tailwind color is close enough.
How it works
Enter brand color
Input your primary brand color in any format — HEX, RGB, or HSL.
Generate scale
The tool creates an 11-step scale (50–950) calibrated to Tailwind's visual weight distribution, placing your color near step 500.
Copy config
Copy the complete tailwind.config.js colors object or CSS custom properties block, ready to paste.
About this format
Tailwind CSS ships with a built-in color palette covering 22 named colors across an 11-step scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). For most projects, you need to add your brand colors to this system so you can use utility classes like `bg-brand-500`, `text-brand-800`, and `border-brand-200` with the same convenience as Tailwind's built-ins.
This generator takes your brand color and produces a complete 11-step scale in the Tailwind naming convention, calibrated to match the visual weight and distribution of Tailwind's own palettes. The output is a ready-to-paste configuration object for `tailwind.config.js` (v3) or `tailwind.config.ts` (v4-compatible).
The scale is designed so that step 500 is near your input color, with lighter steps (50–400) as backgrounds, borders, and disabled states, and darker steps (600–950) as hover states, active states, and text. The distribution follows Tailwind's internal lightness curve — not a linear HSL step — so the results visually integrate with Tailwind's existing palette.