Blend two colors and get the exact result
This calculator mixes two colors at a ratio you choose and returns the precise resulting color as RGB and hex. It is useful for finding a midpoint between two brand colors, building tints and shades, or generating intermediate steps for a gradient or color scale.
How it works
Naively, mixing two colors means averaging their red, green, and blue channels. But sRGB values are gamma-encoded — they are not proportional to actual light intensity — so a plain average of vivid colors produces a dull, too-dark midpoint. To blend the way light really combines, each channel is first linearized with linear = (value / 255) ^ 2.2, the linear values are averaged using the chosen weights, and the result is re-encoded with value = (blend ^ (1 / 2.2)) * 255.
The mix ratio sets the weights: a value of r (from 0 to 1) gives color B a weight of r and color A a weight of 1 - r. So a 50% mix uses 0.5 for each. The tool shows this gamma-correct result as the main answer and also displays the simple linear average for comparison, so you can see how much difference gamma correction makes for your specific colors.
Why gamma matters for color mixing
Most image editors and the CSS color-mix() function perform blending in perceptual (gamma-encoded) space by default because that is what sRGB values represent. However, browsers and graphics standards have been moving toward linear-light blending for gradients and color interpolation because it produces more perceptually even results for vivid saturated colors.
The key insight: sRGB was designed so that the displayed brightness roughly corresponds to the encoded value on typical monitors. But “equal-step-in-encoding” is not the same as “equal-step-in-brightness.” Mixing two bright complementary colors in sRGB space produces a muddy midpoint because the non-linearity compresses the middle of the scale. In linear light, the energies actually average, and the result appears brighter and more accurate.
The CSS Color 4 specification supports color-mix(in srgb-linear, ...) and color-mix(in oklab, ...) for exactly this reason. This calculator shows both the linear-light (gamma-correct) result and the naive sRGB average so you can choose the one that matches your rendering context.
Common use cases
- Brand color midpoints — find a transition color between a primary and secondary brand color that looks smooth rather than muddy.
- Tint generation — mix a saturated hue with white at 80%, 60%, 40%, 20% to build a tint stack for a design system.
- Shade generation — mix a hue with black at the same steps for a shade stack.
- Gradient stops — when a two-stop CSS gradient looks too dark in the middle, add an intermediate stop computed with gamma-correct blending.
Tips and example
Mixing pure red #ff0000 with pure blue #0000ff at 50% gives a gamma-correct purple around #bc00bc, noticeably brighter than the naive #800080 you get from a plain RGB average. The live swatch updates as you drag the slider, so you can dial in exactly the blend you want before copying the hex value.