Color Mixer (blend two colors)
Blend two colors at any ratio and get the resulting hex, RGB, and HSL — with the full gradient between them.
Mixing colors
This mixer blends two colors by interpolating each RGB channel between them. At 0% you get the first color, at 100% the second, and at 50% the arithmetic midpoint of the two. The strip below the swatch shows the whole gradient in ten steps.
mixed = a + (b − a) × ratio, for each of R, G, B
Digital mixing isn't paint mixing
Worth knowing: this is additive mixing, how light combines, not how pigments do. Mix blue and yellow light and you get a pale grey, not the green you'd get from paint — because paint mixing is subtractive, with each pigment absorbing part of the spectrum. If you're matching physical paint or ink, the CMYK converter is the more relevant model.
Why midpoints can look muddy
Blending two saturated colors of different hues often passes through a dull middle, because the channels average toward grey on the way. Mixing inHSL by rotating the hue instead usually keeps the intermediate colors vivid — a useful trick when building a gradient that shouldn't sag in the middle.
Worked example
Blending blue #3B82F6 with amber #F59E0B at 50% averages each channel — (59+245)/2, (130+158)/2, (246+11)/2 — giving roughly#989080, a soft warm grey. That greying is exactly the effect described above, and it's why the endpoints of a two-color gradient often look better than its centre.
This mixes light, not paint
The blend here averages RGB channel values, which models mixinglight and not pigment. Real paint mixes subtractively: blue and yellow paint make green, while blue and yellow light make something close to white. Even for screen colours, averaging in sRGB is not perceptually even, because the encoding is gamma-corrected — the midpoint between two colours by number is not the midpoint your eye sees. For perceptually uniform blending you need a space such as Lab or Oklab.