Gradient Interpolator

The gradient interpolator generates a fixed number of evenly spaced colors between two endpoints, returning them as discrete swatches rather than a continuous gradient.

What is Gradient Interpolator?

• The gradient interpolator takes two colours and a step count and returns a row of swatches, with From and To set by colour fields.
• A Steps slider runs from three to fifteen — seven by default — and the row lays out one column per step, so the palette fills the width at any count.
• Every swatch carries its hex value and a copy button, and the whole row recalculates as either colour changes.

The distinction between this and a gradient builder is the whole point of the tool, and it is easy to miss. A gradient produces a continuous ramp that the browser paints; what you get here is a list of individual colours that happen to be evenly spaced along the path between the two endpoints. That matters because a great many things cannot accept a gradient at all — chart series, heatmap scales, categorical legends, colour swatches in a design file, an array in a script. A ramp is useless for any of those, and a set of discrete steps is exactly what is needed.

The Steps slider sets the count including both endpoints, so seven steps yields the two endpoints plus five colours between them. The spacing is calculated as an even fraction along the interpolation, which means the steps are equally spaced in value but not necessarily in perceived difference — the human eye is more sensitive to change in some parts of the colour space than others, so the middle of the row can look like it moves more slowly than the ends.

That leads to the one behaviour worth knowing before you use the result. The interpolation is a straight line in the red, green and blue channels, which is the simplest possible blend and not the one that looks best. Blending a mid blue into a red runs through a muted purple in the middle — the halfway point between those two defaults lands at roughly a desaturated violet, and it is noticeably duller than either end. A perceptual interpolation through a colour space designed around how we see would keep the middle more vivid, and some tooling offers that as an option. Here, the straight line is the behaviour, and knowing it explains why some pairs seem to sag in the middle while others stay lively.

In practice, some pairs interpolate well and others do not. Colours that already sit near each other — a teal into a blue, two neighbouring greens — come out with a smooth, convincing scale. Complementary pairs, where the two endpoints are opposite on the wheel, are the ones that turn muddy in the middle, because the straight line passes near the neutral axis. If a scale looks wrong, changing an endpoint slightly usually improves it more than changing the step count.

• The set is not exported as CSS, a design token document or a chart configuration — the copy buttons take individual values, and assembling an array is a manual step.
• There is no interpolation-space option and no reversed order.
• As a way to blend two colors evenly into a usable number of steps, it does one job cleanly: ask for color steps between two colors and this is what you get, laid out and numbered — and it is the fastest way to generate color scale values when interpolate between two colors is the actual requirement rather than a smooth wash.

How to use Gradient Interpolator

1. Set the From and To colours.
2. Choose a step count with the slider — the endpoints are included in the total.
3. Copy individual hex values from the swatches, or read the row as a scale.
4. Adjust an endpoint rather than the step count if the middle of the scale looks dull.

When to use Gradient Interpolator vs related tools

Use this when you need a fixed number of discrete colours between two values — a chart scale, a legend, a heatmap ramp. Use a gradient generator when you want a continuous painted ramp instead of steps. The continuous version of the same maths is the linear gradient generator, and a ramp that has to pass through a third colour rather than straight between two is what the multi-stop gradient builder builds.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Gradient Interpolator