What a Color Mixer Does and How It Works
A colour mixer blends two or more colours at a ratio you choose and shows the result, but it does something most simple mixers skip: it computes the blend in three different colour spaces and shows all three, because they genuinely disagree and the difference teaches you something. Give it two hex codes and a ratio, and it returns a naive sRGB average, a gamma-corrected linear RGB blend, and a CIE Lab blend, each as its own swatch and code. Designers use it to find a midpoint colour between two palette entries, developers to compute a blended tint, and anyone curious about colour to understand why mixing on a screen often does not match the intuition they built from mixing paint. A ratio slider, support for more than two colours, and a gradient strip round out the everyday features.
The reason for three spaces is that a colour's stored numbers are not proportional to its light. sRGB values are gamma-encoded, a non-linear curve that packs more precision into darker tones to match human vision. The naive sRGB average simply takes the mean of each channel as stored, which is fast and is what many tools do, but it blends the encoded numbers rather than the actual light, so midpoints can come out darker or muddier than expected. The gamma-corrected linear RGB blend first removes the gamma to get true light intensities, averages those, then re-applies gamma; this matches how light actually adds and usually gives a brighter, more natural midpoint. The CIE Lab blend interpolates in a perceptually uniform space, so the steps between colours look evenly spaced to the eye, which is often closest to what people expect from a blend.
The classic demonstration is mixing blue and yellow. On screen, a naive sRGB average of a strong blue and a strong yellow does not give green as it would with paint; it gives a muddy grey, because the two lights are near-opposite in the encoded channels and their averages cancel toward the middle. In linear RGB the result is brighter but still not the green paint would give, since screens mix light additively rather than mixing pigments subtractively. In Lab the blend follows a perceptual path that many people find lands closer to their expectation. Seeing all three side by side makes the point concrete: there is no single correct mix, only different, well-defined answers, and knowing which space you are blending in explains the result.
A worked number helps. Mix pure red #ff0000 and pure blue #0000ff at a 50/50 ratio. The naive sRGB average of the channels is red 127 or 128, green 0, blue 127 or 128, which is about rgb(128, 0, 128), the hex #800080, a mid purple. The linear-RGB blend of the same two colours produces a different, somewhat brighter purple because it averages true light intensities before re-encoding, so its hex will not be #800080. Both are valid midpoints; they simply answer slightly different questions about what mixing means. The mixer shows each so you can pick the one that fits your intent.
Use the results with the space in mind. For UI tints and gradients that should look smooth and natural, the linear-RGB or Lab blend is usually the better choice than a raw sRGB average. For matching how another tool computed a blend, the naive sRGB average is often what that tool did, so it helps you reproduce their number. The ratio slider lets you weight one colour more heavily than the other, and mixing more than two colours averages them together in the chosen space. The gradient strip previews the full transition so you can pick any point along it, not just the midpoint. Everything is computed locally in your browser from the colours you enter, so the mixer works offline once the page has loaded and no colour you blend is uploaded, logged, or stored anywhere.
