Color Mixer

Blend two HEX colors at any ratio and copy the result.

Color A: #FF0000Color B: #0000FFMix Ratio: 50% / 50%Mixed Result: #800080

Presets

Color A

Color B

Mix ratio (50% A · 50% B)

Mixed Color

#800080

Blend steps (A → B)

#ff0000

#df0020

#bf0040

#9f0060

#800080

#60009f

#4000bf

#2000df

#0000ff

How colors are mixed

This mixer does a straight linear interpolation in RGB: each red, green, and blue channel moves from color A toward color B by the ratio you set, then the result is rounded back to a HEX code. A 50/50 mix sits exactly halfway between the two. It's the same math design tools use for gradients and tweening, and it all runs in your browser.

More color tools: the color shades generator, the all-in-one color converter, and HEX to RGB.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing an intermediate colour between two brand colours.
Getting a tint by mixing a colour with white at a chosen ratio.
Building a gradient's midpoint as a solid colour.
Comparing several mix ratios at once to find the step that reads best.
Producing a hover shade derived from a base colour.

Frequently Asked Questions

How are two colours mixed?: By linear interpolation per channel at the ratio you set — 50% mix averages each of R, G and B. It is simple and predictable, and it is also why mixing complementary colours in RGB yields grey rather than the muddy brown that mixing paint produces.
Why does mixing blue and yellow give grey rather than green?: Because RGB is additive — it models mixing light, where blue and yellow light sum to white. Paint is subtractive: each pigment removes wavelengths, so blue and yellow both leave green. Neither model is wrong; they describe physically different processes.
Does the mix go through gamma correction?: Not in a plain sRGB interpolation, and that is the usual source of a dull midpoint. sRGB values are gamma-encoded, so averaging them is not averaging light. Mixing in linear RGB or in OKLab gives a brighter, more expected midpoint — visibly so between saturated colours.
What does CSS color-mix() do?: The same operation natively, with a choice of colour space: `color-mix(in oklab, red 50%, blue)`. Specifying the space is the important part — the same two colours mixed in sRGB and in OKLab give noticeably different midpoints, and OKLab is the one that matches expectation.
How does alpha affect a mix?: Correct alpha compositing weights each colour by its own alpha, which is not the same as interpolating the alpha channel alongside the colour channels. Mixing a transparent colour naively pulls the result toward black, because the RGB values behind a zero alpha are usually zeros.

Common errors and gotchas

Mixing in sRGB and getting a muddy midpoint, where a perceptual space is cleaner.
Assuming the 50% mix looks like the visual midpoint, which depends on the space.
Losing contrast compliance, since a mix can fail a ratio both inputs passed.
Mixing with a transparent colour and getting an alpha change rather than a tint.
Building a scale by repeated mixing, which compounds rounding error.