Color Mixer

Pick two colors, slide the ratio, and get the blended color — with a copyable hex and the steps in between.

⚡ Runs entirely in your browser
50% A · 50% B
Color A Color B

Enter two valid colors to see the blend.

Steps between them

Tap any step to copy its hex.

How the color mixer works

No button to press — the blend updates the moment you change a color or the ratio.

1

Pick two colors

Use the color squares or type a hex like #2563EB for each side.

2

Set the ratio

Slide toward whichever color should dominate the mix — from all A to all B.

3

Copy the result

Grab the blended hex, RGB or HSL, or copy any of the in-between steps.

How colors are blended

Each color is broken into its three channels — red, green and blue — on a 0–255 scale. The mixer takes a weighted average of each channel: at a 50/50 ratio it lands exactly halfway between the two, while sliding toward Color A or Color B pulls every channel proportionally in that direction. This is a straight linear interpolation in RGB space, the same math a paint-mixing preview or a gradient uses.

The steps row shows evenly spaced blends from Color A on the left to Color B on the right, which is handy for building a quick gradient, a set of tints, or a matched palette. Results are shown as hex, RGB and HSL so you can paste straight into CSS, a design tool or your code.

🔒

Private by design. Your colors never leave your device. Every blend is calculated right here in your browser — nothing is uploaded or stored.

Frequently Asked Questions

How does the mixer blend two colors? ▼
It takes a weighted average of the red, green and blue channels of your two colors. At a 50/50 ratio the result lands exactly halfway between them; sliding the ratio pulls the blend proportionally toward one color or the other.
What does the mix ratio slider do? ▼
It controls how much each color contributes. Slide toward Color A or Color B to make that color dominate — from 100% A on one end to 100% B on the other.
What are the steps between the two colors? ▼
They're a row of evenly spaced blends from Color A to Color B. It's handy for building a quick gradient, a set of tints, or a matched palette. Tap any step to copy its hex.
What color formats can I enter and copy? ▼
You can type a hex value like #2563EB or use the color squares for each side. The blended result is shown as hex, RGB and HSL, each with its own copy button.
Does this mix colors like paint? ▼
It blends colors the way a screen does — a straight average of the red, green and blue light, the same math a gradient uses. That can differ from physically mixing paint pigments, which behave differently.
Is my data uploaded anywhere? ▼
No. Your colors never leave your device. Every blend is calculated right here in your browser — nothing is uploaded or stored.

Related tools

Color ConverterGradient GeneratorContrast CheckerPalette GeneratorColor Blindness SimulatorImage Color Picker