CSS variablessRGB fallback + OKLCH
Perceptual design tokens
OKLCH Color Scale Generator
Turn one base color into a practical 11-step scale from 50 to 950. Control lightness, chroma, hue, and the spacing curve while Colorrow keeps every preview inside sRGB for dependable handoff.
500 is the base step. Lighter steps move toward white, darker steps move toward black, and chroma tapers toward the ends before a final sRGB gamut fit. That keeps the scale useful without silently changing hue.
Live scale
50 → 950
Select a swatch to copy its OKLCH value. HEX is shown as the generated sRGB fallback.
11 steps0 gamut-fitted
Production handoff
Export the scale
CSS includes HEX fallbacks and an OKLCH enhancement inside @supports. JSON includes both representations. Tailwind output is a ready-to-paste color object.
JSONHEX and OKLCH per step
Tailwind color objectOKLCH values keyed 50–950
Lightness, chroma, and hue are separated
OKLCH expresses color as perceptual lightness (L), chroma or colorfulness (C), and hue angle (H). That separation makes it easier to adjust brightness without also guessing at RGB channel values.
The “OK” comes from OKLab, the underlying perceptual color space. OKLCH is its cylindrical form, which is often more convenient when building scales and design tokens.
Why the steps feel more deliberate
Equal numeric changes in traditional RGB or HSL do not necessarily look equally large. OKLCH is designed so lightness and color-distance changes track human perception more closely, which makes systematic ramps easier to tune.
No color model makes every visual decision automatic. Surrounding colors, display conditions, contrast, and the role a token plays still affect whether a scale works in a real interface.
500 anchors the scale
The base color becomes step 500. Five lighter steps move toward white and five darker steps move toward black. Chroma gradually tapers toward both ends, because very light and very dark sRGB colors usually cannot carry the same chroma as a middle tone.
If a requested step falls outside sRGB, Colorrow lowers only that step’s chroma while preserving its lightness and hue. The interface reports how many steps needed that gamut fit.
Choose where the visual distance lives
Even spacing distributes lightness linearly. Gentle center keeps the steps around 500 closer together and pushes more change toward the ends. Strong center separates the middle steps more aggressively.
This changes lightness spacing only. Hue stays fixed and chroma continues to taper independently, so the scale remains predictable when you compare behaviors.
Ship fallbacks when your support range needs them
Modern CSS can use oklch() directly, but older engines may not. The CSS export therefore defines HEX tokens first and replaces them with OKLCH values only inside an @supports block.
Wide-gamut OKLCH can describe colors beyond sRGB. This tool intentionally fits previews and exported HEX fallbacks to sRGB, making the generated scale predictable on ordinary sRGB displays.
Numbers are tokens, not semantic roles
A 50–950 ramp is useful for borders, surfaces, text, interaction states, and data visualization, but do not wire every component directly to numeric steps. Map the scale into semantic tokens such as background, surface, text, primary, hover, and focus roles.
Then test those role pairings for contrast. A smooth perceptual ramp can still contain combinations that are unsuitable for text or interactive controls.