How many steps does a product ramp need?

Most UI systems ship 10–11 stops (50–950). Fewer is fine for brand accents; more helps dense data products.

Should every stop share the same chroma?

No. Midtones usually carry more C; 50/950 often need less to stay in gamut and readable.

Numeric scale or semantic tokens first?

Build the numeric ramp as the source, then alias semantics (accent, surface, danger) on top so roles survive hue shifts.

How to Build OKLCH Color Scales (50–950 Tokens)

Building OKLCH color scales

Build even 50–950 token ramps in OKLCH — lightness steps, chroma discipline, and naming that ships to Tailwind and design systems.

Start from L, not from HEX

A usable 50–950 ramp is mostly a lightness ladder. Fix hue (and a chroma envelope), then step L so each stop feels evenly spaced — not equally spaced in RGB or HSL. HEX is an export format, not a design space.

Keep chroma honest

Midtones (400–600) can carry the most chroma; extremes often need less to stay in gamut and readable.
Don’t force the same C across the whole ramp — push only where the brand needs punch.
Check sRGB (and P3 if you ship wide-gamut) before you lock tokens — see Gamut mapping & sRGB.

Name for product, not for science

Engineers consume blue-500, not oklch(0.62 0.14 250). Keep semantic aliases (accent, surface, danger) on top of the numeric scale so roles stay stable when the brand hue shifts.

Contrast before you commit

Pair likely text roles against surfaces early. Use the Contrast Checker (WCAG + APCA) so you don’t discover a failed 600-on-50 after the design system ships.

Ship from one source

Generate the ramp in Colorise Pro Studio or Picker, verify contrast on real type, then export Tailwind @theme, CSS variables, or DTCG. One OKLCH source — many formats. Browse ready-made systems in Explore when you need a starting point.

FAQ

How many steps does a product ramp need?: Most UI systems ship 10–11 stops (50–950). Fewer is fine for brand accents; more helps dense data products.
Should every stop share the same chroma?: No. Midtones usually carry more C; 50/950 often need less to stay in gamut and readable.
Numeric scale or semantic tokens first?: Build the numeric ramp as the source, then alias semantics (accent, surface, danger) on top so roles survive hue shifts.