Ramp

Build even colour ramps from your brand colours. Perceptual steps in OKLCH, ready for CSS, Tailwind or tokens. Paste or drop your colours.

WCAG 2 APCA

Your colours

History

Ramp

Click a ramp on the canvas to edit it.

Hue

Chroma

How colourful the ramp gets at its peak. 100 is as vivid as OKLCH goes.

Hue shift

Turns the hue gradually from the light end to the dark end, the way paint does.

Steps

Lightest

Darkest

OKLCH lightness of the first and last steps. Every step in between is evenly spaced, so the ramps line up across hues.

Chroma shape

Arc calms the lightest and darkest steps. Even keeps the colour strong everywhere, so more steps may need taming to display.

Copy as

Result code

Base colours