Color Mixer
Pick two colors and a mix ratio to blend them together. The result updates live as you move the slider, and a gradient strip below shows every step from Color A to Color B so you can see the full blend range at a glance.
Sponsors
How the Color Mixer Works
This tool blends two colors using linear interpolation of their red, green, and blue channels — the same math a browser or design tool uses when it fades one color into another. Moving the ratio slider changes how much weight each color gets in the result.
The Formula
Given Color A and Color B as RGB triples, and a mix ratio \( t \) between 0 and 1 (where \( t = 0 \) is 100% Color A and \( t = 1 \) is 100% Color B), each channel of the result is computed independently:
\[ R = R_A \times (1 - t) + R_B \times t \] \[ G = G_A \times (1 - t) + G_B \times t \] \[ B = B_A \times (1 - t) + B_B \times t \]
Each channel is then rounded and clamped to the 0–255 range and converted back to hex. For example, mixing white (#FFFFFF) and black (#000000) at \( t = 0.5 \) gives \( R = G = B = 255 \times 0.5 + 0 \times 0.5 = 127.5 \), which rounds to 128 — #808080, a mid-gray.
Reading the Blend Strip
The row of nine swatches below the main result shows the color at nine evenly-spaced values of \( t \) from 0 to 1, so you can see the entire path from Color A to Color B at once, not just the single ratio selected by the slider.
Frequently Asked Questions
Is this how mixing paint works?
No. This tool performs additive/digital mixing — averaging red, green, and blue light values, the way overlapping colored light behaves on a screen. Physical paint and ink mixing is subtractive/pigment-based: each pigment absorbs certain wavelengths, so combining pigments removes light rather than averaging it. That's why blue paint mixed with yellow paint gives green, a result that simple RGB averaging of blue and yellow would never produce (averaging #0000FF and #FFFF00 gives a gray, #808080-ish color, not green). If you need paint-like mixing behavior, look for a tool that models subtractive/pigment color specifically.
What ratio should I use for an even 50/50 blend?
Leave the slider at its default, 50. That applies \( t = 0.5 \) to both channels equally, giving each color exactly half the weight in the result.
Can I mix more than two colors at once?
Not directly with this tool — it's built for a two-color blend. To approximate mixing three or more colors, mix two of them first, then take that result as "Color A" and mix it again with your third color. For building a full multi-color set instead of a single blended result, try one of the palette generators.
Why does mixing red and green give a brownish/olive color instead of something vivid?
RGB channel averaging isn't perceptually uniform. The midpoint between two saturated, high-contrast hues (like pure red and pure green) often lands on a duller, lower-saturation color than either endpoint, because averaging pulls each channel toward the middle of its range rather than preserving vividness. This is expected behavior for linear RGB mixing, not a bug.
Does the order of Color A and Color B matter?
Only in which direction the ratio slider reads. Swapping A and B and flipping the ratio (e.g. 70% A/30% B becomes 30% A/70% B with colors swapped) produces the identical result color.