Design Token & Component Previewer

Naive tint/shade ramps (mixing with white/black in RGB) go muddy in the middle and lose saturation unevenly. This tool converts each brand color to OKLCH — a perceptual color space where equal steps in lightness look equal — then:

• Tonal scales: holds the brand hue, steps lightness through 11 fixed perceptual targets (50 → 950), and shapes chroma with a bell curve that peaks near the brand color's own chroma, clamping each stop back into the sRGB gamut.
• Semantic colors: starts from canonical hues (green / amber / red / blue in OKLCH), then borrows the brand palette's chroma and nudges each hue slightly toward the primary so the whole system feels related.
• Neutrals: a gray ramp carrying a small dose (~8%) of the primary's chroma so grays don't feel foreign next to the brand color.
• Text pairings: each stop's WCAG 2.1 contrast is computed against white and against the scale's 950 shade; the badge shows the best passing level (AAA ≥ 7, AA ≥ 4.5).

Click any swatch to copy its hex. The mock UI's light/dark toggle re-maps the same ramps onto dark surfaces (dark mode uses lighter stops for accents and the 900/950 stops for surfaces).