Gradient Color Picker

Generate evenly spaced intermediate colours between two or more colours, in RGB, HSL or perceptual OKLCH space.

Runs in your browser. Your input is processed on your device and is not uploaded to our server.

Start colour

Middle colour (optional)

End colour

Steps

Interpolate in

CSS custom properties

How to use the Gradient Color Picker

Choose the start and end colours (and optional middle colour).
Choose the number of steps and the interpolation space.
Click a swatch to copy it, or copy the whole scale as CSS variables.

Interpolating in OKLCH or OKLab produces smoother, more even-looking steps than plain RGB, which can pass through dull greys. This is useful for building colour scales for charts, maps and design systems.

Frequently asked questions

Which space should I use?

OKLab for even lightness steps, OKLCH to keep colours vivid, RGB to match what simple CSS gradients do.