Skip to main content
Trim Marks

Colour Blend Generator

Smooth ramps between two colours that keep their saturation.

Two colours

Including both ends.

Blend

Interpolated in OKLCH, not sRGB. Blending hex values directly drains the saturation out of the middle — two vivid colours meet in something muddy. OKLCH is perceptually uniform, so the midpoint looks like a midpoint.

Generate a ramp of three to twenty steps between two colours. Interpolated in OKLCH rather than sRGB, which is the difference between a blend that stays vivid and one that sags into grey halfway across — the failure every hex-interpolated ramp has.

01

Why use this tool?

No muddy middle

OKLCH interpolation holds chroma through the transition. Blending hex values directly drops it by about a third at the midpoint.

Three to twenty steps

Enough for a two-tone chart or a full tonal ramp for a design system.

Copy any step

Individually or the whole ramp at once.

Exact endpoints

The first and last swatches are precisely the colours you entered.

02

How this colour blend generator works

Both ends are converted to OKLCH, then lightness, chroma and hue are interpolated separately and each step converted back. Because OKLCH's lightness axis tracks perception, the steps come out evenly spaced to the eye rather than evenly spaced in a number that does not correspond to brightness.

Hue takes the shorter way round the wheel. Blending a red at 29° to a magenta at 350° travels the 39° directly rather than the 321° through green, yellow and blue. Getting that wrong is a common bug and produces ramps with an inexplicable rainbow in the middle.

The endpoints are exact. Step one and step N are precisely the colours you entered, not near-misses produced by rounding through an intermediate space — which matters when the ramp has to sit alongside the original brand colour it was derived from.

03

How to use it

  1. Step 1: Set both ends

    Pick or paste your two colours.

  2. Step 2: Choose how many steps

    Including both ends.

  3. Step 3: Copy what you need

    One swatch, or the whole ramp as a list.

04

Example usage

A chart scale
Seven steps between two brand colours for a heat map, where the middle needs to stay readable rather than washing out.
Design system ramps
A tonal ramp from a base colour, generated once and pasted into the token file.
Component states
Three steps between a resting and a pressed colour, giving a hover state that sits properly between the two.
05

Choosing how many steps a ramp needs

Step count is a design decision rather than a detail. An odd number gives you a true middle value, which is what a diverging scale needs — a heat map running from negative through neutral to positive is unreadable without one, because the neutral point has to land on a swatch rather than between two. An even number has no centre and is better for a sequential scale where no value is special.

For design system ramps, somewhere between nine and eleven steps has become the common answer, and the reason is practical rather than aesthetic. It gives enough room to place text, borders, hover states and disabled states on distinct rungs while still being small enough that a person can hold the whole ramp in their head. Beyond about thirteen, adjacent steps stop being reliably distinguishable and the extra values just make the choice harder.

One caveat specific to OKLCH: if your endpoints sit near the edge of sRGB, some intermediate steps may want a chroma that cannot be displayed. Those get clipped to the nearest displayable colour, which can make a ramp look very slightly uneven at one end despite the maths being right. Pulling the endpoints in a little usually resolves it.

06

Frequently asked questions

Why does my gradient look grey in the middle?

Because it is interpolating in sRGB, where the red, green and blue channels move independently and none of them tracks perception. Between two saturated hues that produces a desaturated midpoint. OKLCH interpolation avoids it.

What can I use a blend for?

Chart scales, tonal ramps for a design system, state variations for a component, or step values for a gradient you want more control over than CSS gives you.

Does hue take the short way round?

Yes. Blending red to magenta goes directly rather than the long way through green, which is what you would expect and what a naive implementation gets wrong.

How many steps should a ramp have?

Nine to eleven for a design system ramp, which leaves room for text, border, hover and disabled values on distinct rungs. Use an odd count for a diverging scale so the neutral midpoint lands on an actual swatch, and an even count for a sequential scale where no value needs to be central.

Why do my steps look slightly uneven even in OKLCH?

Most likely gamut clipping. If the endpoints sit near the edge of sRGB, some middle steps want a chroma that cannot be displayed and get clipped to the nearest colour that can. The arithmetic is even; the display is not. Easing the endpoints slightly away from maximum saturation usually fixes it.

Can I blend more than two colours?

Not in this tool. For a three-colour scale, run two blends that share the middle colour as an endpoint and drop the duplicate — that gives a continuous ramp through all three, and it also forces you to decide deliberately how many steps sit either side of the midpoint.

07

Related tools

Browse every tool in Colour Tools.