Color Mixer

Mix two colors and get the exact blend

Pick two colors, drag the slider to set how much of each goes into the mix, and read the resulting hex code instantly. The slider runs from 0% (all of color A) to 100% (all of color B); the midpoint gives an even 50/50 blend. The large swatch updates live as you adjust, and the Copy button puts the hex value on your clipboard so you can paste it straight into your CSS, design tool, or palette.

The blend is computed with simple per-channel linear interpolation in RGB space: each of the red, green, and blue channels is averaged according to the chosen ratio and rounded to the nearest integer. This is the same math most design software uses for a basic two-color mix, so the output matches what you would expect when overlaying a solid color at a given opacity. Everything happens locally in your browser — no colors, values, or anything else is ever uploaded.

FAQ

What does the ratio slider do? It sets how much of color B is blended into color A. At 0% you get color A exactly, at 100% you get color B, and at 50% you get an equal mix of the two.

How are the colors mixed? Each RGB channel is linearly interpolated between the two colors at the chosen ratio and rounded, so the result is a straight average of the two colors weighted by the slider.

Why does mixing red and blue give purple instead of brown? This tool mixes light (additive RGB), like screens do, so red and blue average to purple. Physical paint mixing is subtractive and would behave differently.