Generate a complete shade scale (50 to 950) from any color. Tailwind CSS style, perceptually balanced. Export as CSS variables, Tailwind, SCSS or JSON.
| HEX | RGB | HSL |
|---|
The scale uses perceptual HSL interpolation. The tool creates 11 steps by varying lightness non-linearly and slightly adjusting saturation for natural perception. Compatible with Tailwind CSS conventions (50, 100…950).
Import the CSS variables or Tailwind config into your project. Shade 500 matches your primary color, 50-200 for backgrounds and hover states, 600-900 for text and active states. Convention used by Tailwind, Material Design and most modern design systems.