Color Shades Generator
Turn one color into a Tailwind-style 50–950 scale.
Runs on your machine. Nothing you paste is uploaded.
Get Color Shades Generator and 121 other tools. Free for 7 days, no account needed.
What it does
Pick one color and get a full 50–950 scale in the style of Tailwind's palettes. The shades are computed in OKLCH, so lightness steps look even and the hue stays true from the lightest tint to the darkest shade. Your color lands exactly on the step closest to it.
Click a swatch to copy it, then export the scale as a Tailwind v4 @theme block, a Tailwind v3 config object, CSS custom properties or JSON, with OKLCH or hex values and the name you choose.
When you would reach for it
- Build a brand color scale for a Tailwind project from a single hex code.
- Get matching hover, border and background tints for a button color.
- Create design tokens for a new accent color.
- Convert a palette to OKLCH for a Tailwind v4 theme.
Also found by searching
- color
- shades
- tints
- palette
- scale
- tailwind
- 50
- 950
- oklch
- theme
- design tokens