Color Shade Scale Generator

Generate a full 50–950 shade scale from a single base color — the way Tailwind, Radix, and Material build their color systems. Lightness stops are interpolated in OKLab (a perceptual color space) so the steps look even to the eye. Pick a base color and a lightness curve, then copy the CSS custom properties, SCSS variables, Tailwind config, or JSON. Pairs with the Color Converter and Palette Generator. Everything runs locally in your browser.

Base color

Hex

Palette name

Lightness curve

Base is stop

Lightness anchors use the OKLab L channel. Dark stops (700–950) keep the base hue and chroma; very light stops (50–100) nudge chroma down so pastels don't look neon. The base color's hue is preserved across the scale. Runs locally.