Color Scale Generator

The job of a color scale is to give a design system a shared, predictable vocabulary: when a component says text-brand-700 on bg-brand-50, that pairing should mean the same relative contrast for every color in the system. The moment you build the ramp in HSL, that promise breaks — HSL lightness is a blunt average, so a yellow 500 and a blue 500 land at wildly different perceived brightness, and the steps between stops feel uneven, bunching in the mids and gapping at the ends.

OKLCH fixes this because its lightness axis is perceptual: a 500 looks like a mid-tone for any hue, and equal lightness steps look equally spaced to the eye. That's why this generator reads your color into OKLab, holds the hue, and walks the lightness across eleven stops. The one subtlety is chroma at the extremes — a near-white physically can't carry much saturation, and forcing it clips out of the sRGB gamut into flat, wrong colors. So the lightest and darkest stops taper their chroma; the mid-range carries your brand's full intensity, which is also exactly where interactive elements and primary fills want it.

A scale gives you an even visual range, but it does not guarantee accessibility — that's a property of specific pairings, not the ramp. As a rule, dark stops (700–950) on light stops (50–200) clear WCAG AA for text and vice-versa, while mid-on-mid often fails. That's why every stop here shows its contrast against white and black, and why the honest workflow is: build the ramp, then validate the actual combinations you intend to ship.

Copy the scale straight out as CSS custom properties and drop it into your tokens or Tailwind config. Then convert and inspect any individual stop in the Multi-Format Converter, and confirm your text pairs in the Accessibility Checker.