Ramp builder

How to use it

1. Pick a color, or type any CSS color the browser understands: a designer's hex value, oklch(), even color(display-p3 …). The scale keeps its hue and spaces its lightness evenly in OKLCH, from 97% for step 50 to 17% for step 950.
2. Read each step: its oklch() value, the contrast of white and black text on it, and which of them reaches 4.5:1. The step nearest your color is marked.
3. Watch for steps marked outside sRGB. They are too colorful for an ordinary screen, which will map them in its own way. "Keep every step inside sRGB" lowers the chroma of just those steps to the most sRGB allows.
4. Name the token and export. "Fixed values" writes eleven oklch() custom properties for a build step. "Derived from one token" writes the same values as a fallback, then derives every step from one --name token with relative color syntax inside @supports, so changing one value changes the whole scale. Copy the result from the box.

A scale is raw material, not a palette. Give its steps roles, such as text, surface and border, and check the pairs those roles form, which the Contrast lab does one pair at a time.

Learn more

• Deriving color: how the scale is computed with relative color syntax, and the trade-off between deriving at run time and at build time.
• Choosing and pairing: tonal scales in design systems, and turning steps into roles.
• The Color section.