COLOR MIXER · 3 SPACES
Color Mixer / Blender
Mix two colors at any ratio in three color spaces — sRGB, OKLab, OKLCH. The side-by-side strip shows you exactly why OKLab and OKLCH avoid the muddy midpoint that breaks sRGB blending.
A · 50%
#3B82F6
Mix
#D45FC2
B · 50%
#F97316
Compare the three spaces
All three strips use the same A and B. The middle band is where sRGB drops in saturation and where OKLab / OKLCH stay clean — this is the "mud zone" you have heard about.
Our take
Stop blending in sRGB. The math has been wrong since 1996.
When you average two colors in sRGB by lerping the R, G, B channels, you are computing the arithmetic mean of three numbers that bear no direct relation to how the eye perceives brightness. The result is always darker than you expect — and at the 50% mark of a vivid blue/yellow pair, the "mix" is a dirty gray that exists in neither parent color.
OKLab fixes this by interpolating in a space that does match human perception. The same 50% mix in OKLab keeps the saturation alive: blue plus yellow goes through a clean teal-ish green, not gray. OKLCH does the same but interpolates the hue angle on the shortest arc, which means red plus pink stays in the warm hues instead of wandering through cyan.
Use OKLCH for hue mixes (warm/cool pairs, brand color transitions). Use OKLab when one color is near-gray and you want to avoid hue artifacts. Only fall back to sRGB when you need to match a system that already mixes that way — for example, simulating how older CSS gradients render in unsupporting browsers.
Three color spaces, three different results
Same A, same B, same ratio — different math.
sRGB
Channel-wise lerp on raw R, G, B values. Fast but perceptually wrong. The mix at 50% is typically darker and less saturated than either parent.
OKLab
Lerp in a perceptually uniform Cartesian space. Excellent for "blend smoothly through any midpoint" — saturation stays alive, brightness matches the average of the inputs.
OKLCH
Same as OKLab but with explicit hue control. The hue is interpolated along the shortest arc, so warm + cool stays in the right half of the wheel. Best default for most mixing tasks.