Generate 11 shades (50, 100, 200 ... 900) from a base color. Tailwind CSS compatible.
How to use
- Pick a base color (becomes shade 500).
- 11 shades are auto-generated with adjusted lightness.
- Click any shade to copy its HEX, or copy all as CSS variables.
- Paste into your CSS as design tokens.
Shade scale
- 50, 100 — very light, for backgrounds and chips
- 200, 300, 400 — light, for hover states and dividers
- 500 — primary color, default for buttons
- 600, 700 — darker, for pressed/active states
- 800, 900 — very dark, for text on light backgrounds
FAQ
How are shades calculated?
HSL Lightness is adjusted while keeping Hue and Saturation constant. Lightness goes from ~97% (shade 50) down to ~14% (shade 900).
Match Tailwind exactly?
Approximates Tailwind's official palette. Designers may tweak individual shades for brand precision.
Dark mode usage?
Use 200-300 as primary on dark backgrounds, 800-900 for backgrounds.
Commercial use?
Yes, free for any use.