Color Mixer

Blend two colors and read every step between them as HEX values.

About the Color Mixer

Blend two colors and read every step between them as HEX values. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.

How to use

Step 1

Pick two colors

Choose a start and end color using the pickers or HEX inputs.

Step 2

Set the steps

Use the slider to decide how many blend steps to generate.

Step 3

View the blend

A row of swatches shows the gradient of mixed colors.

Step 4

Copy a step

Click any swatch to copy that exact blended HEX value.

Benefits

Find in-between colors

Discover the exact midpoints between two brand colors.

Build smooth scales

Generate even steps for charts, states or gradients.

Copy any step

Every blended color is one click away from your clipboard.

Features & supported formats

Features

Two color inputs
Adjustable step count
Channel-wise RGB blending
Click-to-copy swatches
Live preview

Supported formats

HEXRGB

Accuracy & limitations

Blending happens by straight-line interpolation in sRGB — the same method CSS gradients use — which is why the midpoint between two opposite hues can look duller than either end.

Blending is linear interpolation in sRGB, channel by channel — the same method CSS gradients use by default.
That means midpoints between opposing hues can look duller than either endpoint, because the straight line between them passes near gray. This is expected behaviour, not an error.
Mixing is not a simulation of physical paint. Real pigments mix subtractively and behave differently.
Each step is rounded to whole RGB channels, so very large step counts will contain repeated values.

Frequently asked questions

How does the mixing work?

Colors are interpolated channel by channel in RGB space across the number of steps you choose, giving an even blend.

How many steps can I create?

You can generate a range of steps with the slider, enough for most UI states and gradient stops.

Can I mix more than two colors?

This tool blends two at a time; chain mixes or use the gradient generator for multi-stop blends.

Why are my midpoints slightly gray?

RGB interpolation can dull midpoints between opposite hues; mixing closer hues keeps results vivid.

Are the blended colors accurate?

Yes, each step is calculated precisely, so copied values match what you see.