How to use
- Pick a base color (your brand main = typically the 500 shade).
- Enter a name key (e.g.,
brand,primary). - 50, 100, 200, ... 900, 950 shades are auto-generated.
- Copy as tailwind.config.js or CSS variables.
- Use the lightness adjust slider for fine-tuning.
Key features
- Tailwind v3/v4-compatible 11 stops (50/100/200/300/400/500/600/700/800/900/950)
- OKLCH-based perceptually uniform lightness distribution
- Dual export:
tailwind.config.js+ CSS variables - Auto chroma curve (lower at dark stops, higher at light stops)
- One-click copy
Use cases
- Design system setup — one brand color → full palette
- Tailwind customization — paste straight into config.js extend.colors
- Consistent hover/active — bg-brand-500 → hover:bg-brand-600 feels natural
- Dark mode pairing — light 100/200 ↔ dark 800/900
- Figma design tokens — import CSS variables directly
Tailwind shade system explained
Tailwind CSS uses a standard 50 (lightest) to 950 (darkest) 11-stop system. 500 is typically the brand main; 400/600 for hover/active states; 50/100 for backgrounds; 900/950 for dark mode backgrounds. Tailwind v4 transitioned to OKLCH-based colors giving perceptually uniform jumps between stops. This tool also uses OKLCH internally.
FAQ
Are these identical to Tailwind's official colors?
Not exactly. Tailwind uses hand-tuned values per color. This tool generates algorithmically. Differences are small but useful for fast brand-color expansion.
Is 500 exactly my base?
Yes, the 500 stop uses your base color verbatim. Other stops adjust the OKLCH L value.
950 looks too dark.
Move the lightness adjust slider positive to brighten the whole scale. Or use 900 instead of 950 for dark mode backgrounds.
Is it free?
Yes, all processing in your browser, unlimited use, no sign-up.