Color Mixer

How it works

Mixing is done in linear-light RGB rather than gamma-encoded sRGB: each color's sRGB channels are first gamma-decoded to linear light, blended by simple linear interpolation at your chosen ratio, then gamma-encoded back to sRGB for display. Mixing directly in sRGB space (skipping the gamma-decode step, a common shortcut in naive implementations) produces a midpoint that's noticeably darker than it should be, because sRGB's gamma curve isn't linear with actual light intensity — the linear-light approach here matches how light genuinely combines, which is closer to how two overlapping colored lights would blend than to how two paints would. This distinction matters more than it might seem: many popular online 'color mixer' tools and even some design-software blend modes skip the gamma step entirely and average sRGB values directly, which is computationally simpler but physically wrong — the darkening artifact is subtle enough at small mix ratios to go unnoticed but becomes visibly obvious exactly at the 50/50 midpoint, which is the ratio most people actually check when comparing two mixing tools against each other.

Worked example

Mixing pure red (#FF0000) and pure blue (#0000FF) at a 50/50 ratio in linear-light space gives roughly #B900B9 — notice it's brighter/more vivid than the flat #800080 you'd get from naively averaging sRGB values directly (128, 0, 128), because linear-light mixing avoids the darkening artifact that a naive sRGB average introduces. A more subtle case shows the same effect at a smaller scale: mixing a mid-gray #808080 with white #FFFFFF at 50/50 gives approximately #BCBCBC in linear-light space versus a flatter #BFBFBF from naive sRGB averaging — a small numeric difference in this particular case, but one that compounds visibly across a full multi-stop gradient or a repeated series of blend operations, which is exactly the scenario (animation keyframes, layered gradient stops) where the linear-light approach's advantage becomes most noticeable in practice.

When to use this tool

Use this when you need a genuinely accurate midpoint or in-between color between two known values — for an animation keyframe, a gradient stop you want to place manually rather than let CSS interpolate automatically, or matching a color that's described as 'between X and Y' in a design brief. It's also useful for building a custom-ratio blend that isn't a clean 50/50 split — mixing a brand color with white at a 20% ratio to get a subtle tinted background, for instance, is a common real design task that a fixed five-step tint ladder (see the Shades/Tints/Tones tool) might not land on exactly, where a continuously adjustable ratio gets you the precise value a design spec calls for. For a full five-color harmony rather than a single blended point between two colors, the Palette Generator or Color Harmonies tool is the better fit.

Precision & accuracy

The linear-light gamma decode/encode uses the standard sRGB transfer function (not a simplified gamma-2.2 approximation, which is close but measurably different near black), so the mixed result matches what a color-managed image-editing application would produce, not just a visually-close approximation — this is a meaningfully more accurate approach than the naive sRGB-average shortcut many simpler online color-mixing tools use. It's worth being explicit that 'accurate' here specifically means physically accurate to how light mixes additively, which is the right model for screen-based color work but is a genuinely different result from how two real paints would mix subtractively on a canvas — a designer coming from a traditional painting background and expecting red-plus-blue-equals-a-duller-purple should expect this tool's brighter, more saturated linear-light result instead, since the two mixing models are answering physically different questions.

FAQ