Skip to content

Tools — 12

A brand is one colour. A system needs eleven.

An OKLCH ramp holds the hue while spacing lightness perceptually, so step 300 looks as far from 200 as 700 does from 600 — which HSL cannot guarantee. Every step arrives with its WCAG contrast already measured, and the whole ramp writes directly into the shared token schema that the rest of these tools read from.

Source colour

The midpoint the ramp is built around. Defaults to the Vantra primary.

Used as the prefix in exported tokens, e.g. --color-brand-500.

Palette presets

The ramp

Select a step to copy its hex. Badges show WCAG contrast against white and black.

W is contrast against white, B against black. Steps marked in the pass tone clear 4.5:1 (AA normal text).

Export

Export format

CSS custom properties
:root {
  --color-brand-50: #f0f5ff;
  --color-brand-100: #dde8ff;
  --color-brand-200: #bfd5ff;
  --color-brand-300: #93b6ff;
  --color-brand-400: #6293ff;
  --color-brand-500: #3e6fe1;
  --color-brand-600: #2552c4;
  --color-brand-700: #0d34a7;
  --color-brand-800: #001189;
  --color-brand-900: #000059;
  --color-brand-950: #000031;
}

Reference

An OKLCH colour ramp sets each step to a target lightness while holding hue and scaling chroma to stay in sRGB gamut. OKLCH produces perceptually even steps where HSL does not, because OKLAB models human colour perception rather than display hardware.

Why does an OKLCH ramp look more even than an HSL ramp?

HSL lightness is a measure of display output, not of how light a colour appears. An HSL step from 50% to 60% in a blue hue looks like a much larger jump than the same step in yellow, because human vision is unequally sensitive to different hues.

OKLCH lightness is perceptual: a 0.1 step looks roughly the same regardless of hue. The chroma axis is also perceptual, so reducing chroma at the extremes keeps the tints from going chalky and the shades from turning muddy.

What is gamut mapping and why does it matter for ramps?

Not every OKLCH combination fits inside the sRGB gamut that screens display. A high-chroma cyan at very high or very low lightness may require more saturation than sRGB can render.

This tool reduces chroma with a binary search until the colour fits. The alternative — clamping each RGB channel — shifts the hue, which is exactly what a ramp must not do.

How does the ramp connect to the token schema?

Each ramp step is saved as a colour primitive in the shared token schema, keyed as name-step (e.g. brand-500). Other tools — the focus-ring generator, the dark-mode previewer — read these primitives, so a ramp generated here feeds the rest of the system.

The schema also records the OKLCH values and contrast metadata per step, so downstream tools can make accessibility decisions without re-computing.

OKLCH ramp target lightness per step
StepTarget lightnessCharacter
500.97Near-white tint
1000.93Very pale tint
2000.87Pale tint
3000.78Light
4000.68Medium-light
5000.57Midpoint
6000.48Medium-dark
7000.39Dark
8000.30Deep shade
9000.21Very deep shade
9500.14Near-black shade

Common questions

What is the difference between this and the Shade & Tint Generator?
The Shade & Tint Generator uses HSL and produces a standalone palette. This tool uses OKLCH for perceptually even steps and saves the result into the shared token schema, where other tools can consume it.
How many steps does the ramp produce?
Eleven: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950. This matches the convention used by Tailwind and most design systems, with the addition of 950 for near-black.
Can I export the ramp without saving to the schema?
Yes. The CSS and Tailwind exports are always available. Saving to the schema is a separate action that makes the ramp available to other tools.

Sources