Color Mixer

What this tool does

Sometimes you have two colours and you want the colours that sit between them. Working those out by eye is fiddly, because each in-between colour is a careful blend of the two ends, and getting an even run of them by hand is harder still.

That is what this does. You give it two colours, and it produces the steps that run from one to the other, and you choose how many. Each step is shown as a swatch with its codes, so you get a whole smooth progression from the first colour to the second, ready to copy, rather than just a single mixed colour.

How to use it

1. Set your two colours. Enter colour 1 and colour 2 as hex, use the random button, or pick each with the colour picker.
2. Choose how many blends. Use the slider to set how many steps you want between them.
3. Read and copy the steps. The blends appear as swatches; click one to copy its value, in hex, RGB, HSL, or HSV.

Set the two colours, use the slider for how many steps, and copy the blends you want from the row it produces.

How it works

The tool lays out a row of colours evenly spaced between your two, with the number of steps set by the slider. Each step is a point along the blend, calculated by moving a set fraction of the way from the first colour to the second, so the colours shift smoothly across the row. The values are handled with TinyColor.

The two ends of the row are your original colours, and everything between them is a mix. Because the steps are spaced evenly, the change from one swatch to the next is regular rather than jumping, which is what makes the result read as a smooth transition. Adjusting the slider simply adds or removes steps along that same path between the two colours.

What mixing produces

The key thing to understand is that this gives you a range, not a single colour. Where you might expect one blended result, the tool hands you the whole run from one colour to the other, a series of steps that ease from the first into the second. That progression is the point of it.

If all you want is the one colour halfway between two others, you can read it off the middle of the row. But the tool is built to show the entire scale, which is more useful more often: it lets you see how the two colours meet, pick the exact in-between shade you like, and take a smooth set rather than guessing a single midpoint.

Choosing how many steps

The slider decides how many blends sit between your two colours, from just a few up to around twenty. Fewer steps give you a handful of key stops along the way, which is enough when you want, say, one or two colours between two brand shades. More steps give you a finer, smoother gradient.

Which you want depends on the job. For a gradient that needs to look seamless, more steps make the change between neighbours smaller and the blend smoother. For picking a single in-between colour, fewer steps keep the choices clear. The slider lets you dial that in, so you get exactly as much of the progression as the task calls for.

Why mix two colours

Mixing two colours is what you do whenever you need the middle ground between them. Gradients are the obvious case: a smooth run of steps between two colours is exactly what a gradient is made of. Transitions between two states, or a shade that sits partway between two brand colours, come from the same place.

It is also a quick way to build a small scale. If you have a light colour and a dark one and want a few evenly spaced tones between them, mixing gives you that set in one go. Designers use it to create gradients, to find a colour that bridges two others, and to generate even steps between two points, all of which are far easier with the whole run in front of you than worked out one blend at a time.

Using the steps you get

Each blend in the row is a real colour you can take, and clicking a swatch copies its value so you can drop it straight into your work. The two ends are the colours you started with, and the ones in between are the mixes, so you can pick whichever point along the blend suits you.

How you use them depends on what you are after. For a gradient, you might take the whole set of steps in order. For a single bridging colour, you might copy just one from the middle. Either way, having every step shown with its codes means you can see the full transition and lift exactly the colours you need from it, rather than settling for one blend and hoping it is right.

Questions people ask

What does the mixer give me?

A row of colours evenly spaced between your two, with the count set by the slider, each shown with its hex, RGB, HSL, and HSV values.

Can I choose how many steps?

Yes. The slider sets how many blends sit between your two colours, from just a few up to around twenty, for anything from a couple of stops to a smooth gradient.

Is it just the middle colour?

No. It gives the whole run from one colour to the other, with a true midpoint available if you want it, not only a single blended result.

How do I copy a step?

Click a swatch to copy its value. The ends of the row are your two colours, and the swatches between them are the blends.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Color mixing, blending colours together. Wikipedia. https://en.wikipedia.org/wiki/Color_mixing
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor