Colour Mixer — Blend Two Colours in Even Steps

In short: the Colour Mixer interpolates two colours into an even staircase of blends — the quickest way to find the exact middle tone between two brand colours, or the stops of a two-colour gradient.

Designers constantly need "halfway between these two". This mixer walks the straight RGB path between your colours in equal steps and labels every stop.

Colour one

Colour two

Steps (including both ends)

Generated CSS / values — copy and paste into your project

Private by design: everything in this tool happens 100% in your browser with JavaScript. Your data, photos and designs are never uploaded to a server, never stored and never seen by us - close the tab and everything is gone.

How to use the Colour Mixer

Pick the two end colours.
Choose how many steps (including both ends).
Click any middle swatch to copy it — or copy the full list for gradient stops.

How it works

Each channel (red, green, blue) is interpolated linearly: step i of n sits at fraction i ÷ (n − 1) along the straight line between the two colours in RGB space.

Worked example

A poster needs a five-step background from deep teal to gold. The mixer’s middle stop becomes the exact tone the designer had pictured but could not name.

Frequently Asked Questions

Mixing here vs mixing paint?

This is screen (light) mixing in RGB — the right model for web and app colours. Physical paint mixes differently (subtractively).

Can I get the exact midpoint?

Choose 3 steps — the middle swatch is the exact 50% blend.

How do I use these in a gradient?

Copy the stops into the CSS Gradient Generator on this site for a ready-made multi-stop gradient.

Is it free?

Yes — instant, private and free.

More Colour & CSS Generators

Shades & Tints Colour Harmony Colour Converter CSS Gradient Box Shadow Glassmorphism CSS Button Spinner

The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).