How many colours does it produce?

Five — the two endpoints plus three evenly spaced colours at 25, 50 and 75 percent of the blend. The spacing is fixed.

Can I change the number of steps?

Not on this page. The gradient interpolator offers between three and fifteen steps, and the stop editor allows hand-placed positions.

Why does the middle look dull for some pairs?

The blend is a straight line through the RGB channels. Complementary pairs pass close to neutral halfway along and lose saturation; neighbouring hues blend cleanly.

Is the output a gradient?

No, it is five discrete colours with copy buttons. That is the point — charts, legends and design files take individual values rather than a ramp.

Can the same two colours produce a dark-mode counterpart?

Not from here — there is no lightness inversion and the five steps are fixed to the two values you set. A dark version means choosing darker endpoints and letting the mixer fill the three steps between them.

Gradient Palette Mixer

From

#3b82f6

#6873ca

#95639d

#c25471

#ef4444

You Might Also Need

Color Array Generator

Generate a JavaScript color array

Gradient Interpolator

Interpolate discrete steps between two colors

LESS Variable Generator

Generate LESS @color variables

Color Mixer (3+ colors)

Mix three or more colors together

The gradient palette mixer blends two endpoint colors into a fixed five-swatch palette taken at even intervals, so the colours between them can be used as flat values.

What is Gradient Palette Mixer?

The gradient palette mixer takes a From colour and a To colour and lays out five swatches: the two endpoints and three colours evenly spaced between them.
Each swatch shows its hex value with a copy button, and the row recalculates as either colour changes.
That is the whole tool — two inputs, five outputs, no further settings.

The positions are the thing to notice, because they are fixed rather than adjustable. The five swatches sit at zero, twenty-five, fifty, seventy-five and a hundred percent of the distance from one endpoint to the other. That is a quarter-step ladder, which is why the set behaves like a small scale rather than a freeform blend: there is always a colour exactly halfway between the two ends, and always one a quarter of the way along. If you need a different number of steps or a different spacing, the gradient interpolator in this domain offers between three and fifteen, and the stop editor lets positions be placed by hand.

What the fixed quarter steps are good for is palette work in a design file. A five-swatch strip is small enough to read at a glance, large enough to give you a light, a mid and a dark option in a family, and consistent between projects because the spacing never changes. Adding a border, a hover state and a disabled state to a component usually means reaching for three related tones of one colour, and a quarter-step ladder supplies them without any decisions about where to put the intermediate values.

The blending itself is a straight line through the red, green and blue channels, which is the simplest interpolation and not always the most attractive. Neighbouring hues come out smooth — blending a teal into a blue gives a convincing family — while complementary pairs sag in the middle, because the straight line between them passes close to neutral. A mid blue and a red, for instance, meet at a muted violet that is noticeably duller than either endpoint. Knowing this is mostly about prediction: if a strip looks flat in the centre, the endpoints are probably too far apart on the wheel, and moving one slightly improves the result more than anything else.

There is no gradient in the output, and that is deliberate. The tool returns discrete colours with individual copy buttons, which is what a palette needs — chart series, category colours, tags and swatch libraries cannot accept a continuous ramp. If the goal is a painted ramp instead, that is a gradient tool; if the goal is five usable values that belong together, this is the shorter route.

Limits: exactly five swatches, no step control, no interpolation-space option, and no export beyond copying the hex values one at a time.

It also does not check contrast, so a pair that works as a palette may not work as text on a surface.
Used to mix two colors into a palette, though, it does the one thing quickly, and as a two color palette generator it produces a five color blend that is immediately usable as a color blend palette for an interface.

How to use Gradient Palette Mixer

Set the From colour — usually the darker or more neutral of the two.
Set the To colour and read the five swatches as a quarter-step ladder.
Copy the individual hex values into your palette, or use the endpoints as accents and the middle values as surfaces.

When to use Gradient Palette Mixer vs related tools

Use this when you need a small, fixed palette derived from two colours — component states, chart series, a swatch strip. Use the interpolator when the number of steps needs to vary, or a gradient generator when the output should be a painted ramp. For a ramp that has to pass through a third colour rather than straight between two, the multi-stop gradient builder extends the same interpolation with real stop positions, and a set built from one hue rather than a pair is what the monochromatic palette generator produces.

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.