Color Mixer

What does mixing colors mean?

Mixing two colors blends them along a straight line in some color space, producing every intermediate shade between them. The choice of space matters: blending in raw sRGB (the values you see in a hex code) feels intuitive but produces dull, gray midpoints — because sRGB is gamma-encoded, not linear. Blending in linear-light RGB — which is what this tool does by default — gives brighter, more accurate midpoints that match how light actually adds in the physical world. The difference is most visible when mixing a saturated color with white or with another saturated color: linear mixing keeps the midpoint vivid, while naive sRGB mixing flattens it.

How to use this mixer

Pick two colors with the pickers (or paste hex codes), then drag the ratio slider to choose how much of B to blend into A. The result block updates live, showing hex, RGB and HSL values. Tick Show 11 mid-stops to render an 11-step gradient strip between the two — handy for picking interpolated colors for chart axes or animation frames. Click any stop to copy its hex.

When to use what

Use this mixer to blend brand colors for hover/active states, derive interpolated chart series at custom positions, build data-binding gradients (heatmap from cool to warm), or quickly check whether two colors will produce a muddy midpoint before committing to a gradient. For UI states, mid-stops at 25%, 50% and 75% give you a coherent ramp without visual gaps. For dataviz, 11 stops match a typical 0-100 scale (every 10%) — no extra math required.

How the mix is computed

Each input color is gamma-decoded to linear sRGB: values below 0.04045 are divided by 12.92, the rest go through ((c + 0.055) / 1.055)2.4. The two linear values are then linearly interpolated per channel: out = A·(1−t) + B·t where t is the slider position. Finally the result is gamma-encoded back to sRGB and mapped to the 0-255 byte range. This is the same pipeline modern image editors use for accurate gradient rendering.

Mixing in different color spaces

Naive sRGB: fast, intuitive, but produces dark/muddy midpoints — avoid for vivid blends. Linear sRGB (what we use): physically accurate light addition; midpoints stay bright. HSL: good for hue ramps but interpolates poorly through low-saturation regions. OKLCH: perceptually uniform; the gold standard for design tokens but more complex to compute. For everyday color blending, linear sRGB strikes the right balance between accuracy and simplicity.

Frequently asked questions