Color Shades

Turn one color into a consistent 50–950 scale, built in the OKLCH color space so steps look even.

Base color

HEX, rgb() or hsl()

NameUsed in CSS variables and JSON

On white

HOW IT WORKS

Pick a base color. It is kept exactly and placed on the step that best matches its lightness (vivid colors start at 200 or darker).
The other steps keep the hue and taper chroma toward the ends, so light tints stay clean and dark shades do not turn muddy. Dark yellows lean slightly amber instead of olive.
The previews show each step as text on white and on a dark background, with its contrast ratio.

KEEP GOING