What is the difference between the gamma-correct and linear mix?

The gamma-correct mix converts colors to linear light, averages, then converts back, which matches how light physically blends. The simple linear mix averages the raw sRGB values and can look muddy for vivid colors.

Which result should I use?

For most realistic blending, especially mixing bright colors, use the gamma-correct result. The simple linear result is shown for comparison and matches what naive RGB averaging produces.

What input formats does it accept?

Each color can be a 3- or 6-digit hex code with or without a leading hash, or three comma- or space-separated numbers from 0 to 255. Invalid input is reported rather than guessed.

What does a 50 percent mix mean?

At 50% the blend uses equal parts of both colors. Moving the slider toward 100% weights the result toward color B, and toward 0% weights it toward color A.

Is the output an exact value?

Yes. Each channel is computed and rounded to the nearest integer, then shown as both an rgb() triple and a hex code so you can paste it directly into CSS or a design tool.

Color Mix Calculator

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.

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.