Generate shades from any color
Enter a base color and instantly get a full range of shades. Switch between a Tailwind-style numbered scale and classic tints, shades and tones.
Scale (50–950)
The scale uses OKLCH lightness so each step is perceptually even, with chroma tapering at the light and dark ends. This produces balanced design tokens like the ones in modern UI frameworks.
Tints, shades and tones
- Tints mix your color toward white — lighter and softer.
- Shades mix toward black — darker and deeper.
- Tones mix toward gray — muted and calmer.
How to use it
- Pick a base color or type a HEX, RGB, HSL or OKLCH value.
- Choose the Scale or Tints / Shades / Tones tab.
- Click any swatch to copy its HEX value.
