Tailwind-style 50-900 scale from any base color. Copy as HEX, RGB, HSL or CSS variables.
The base color sits at 500. Tints (50-400) are generated by interpolating toward white in HSL space (raising lightness). Shades (600-900) toward black (lowering lightness). The exact lightness steps are based on Tailwind's defaults.
| Step | Typical use |
|---|---|
| 50 / 100 | Backgrounds, hover states on light themes |
| 200 / 300 | Borders, dividers, disabled state |
| 400 | Secondary text, icon strokes |
| 500 (base) | Primary action color, brand |
| 600 / 700 | Hover states on the base, link visited |
| 800 / 900 | Text on light backgrounds, dark mode primary |
Color math runs in your browser. Nothing is uploaded.