Color mixer — blend N colors in sRGB / HSL / OKLCH / LAB side by side

The mixing calculation you run on brand colors leaves a log trail

Mixing tools get used when you’re blending brand colors to find a midpoint, when you’re computing a hover-state color from a base and surface, or when you’re finding gradient stops inside a design system. In each of those cases, the HEX values you enter describe the brand’s palette strategy.

Running the same calculation through an online service means the server sees ‘user mixed these specific colors at this ratio’ and logs it. It’s easy to underestimate this as a risk, but unreleased color palettes — especially when multiple designers on the same project run variations — can accumulate into a readable signal about a brand’s direction.

Why the ‘right’ midpoint depends on which color space you use

Most online mixing tools return the sRGB channel average and nothing else. But the color humans perceive as ‘halfway’ between two inputs doesn’t always match sRGB arithmetic. Blue (#0000FF) and yellow (#FFFF00) averaged in sRGB gives grey (#808080), while the same inputs in OKLCH produce a color closer to what a person actually perceives as intermediate.

Seeing this difference requires computing in multiple color spaces simultaneously. sRGB / HSL / OKLCH / LAB shown side by side lets you compare and pick the result that fits your specific use case. All four calculations are pure arithmetic in the browser — no external dependency, no request.

Color-space transforms and weighted averages in the browser

The tool computes a weighted average in each of the four color spaces. HSL hue averaging uses the standard complex-number technique — convert each hue to (cos, sin), weighted-average the components, then recover the angle with atan2 — to handle the 0°/360° wraparound correctly. OKLCH and LAB conversions use CIE-standard matrix operations with gamma correction, all implemented in JavaScript.

Every step happens inside browser memory. The HEX values you enter never leave the page. Open DevTools Network while you experiment — the request log stays empty throughout. The source is public on GitHub including the conversion matrices.

Before you commit the mixed color to a design

After finding a midpoint color you like, validate it in context: check that the contrast ratio against its expected background meets WCAG AA / AAA (color-contrast-checker), confirm it remains distinguishable for users with color-vision differences (color-blindness-sim), and verify it harmonises with the original inputs at actual screen size. Which of the four color-space results looks ‘right’ is ultimately a perceptual judgment — the tool gives you four candidates, the eye makes the call. To inspect the chosen mid-point HEX in additional spaces (Oklab, Lab, HCL, named CSS), color-converter expands a single value into five or more representations side by side.

What each color-space formula actually computes

sRGB mixing is the most straightforward: weighted-average each 8-bit channel (0–255). The catch is that sRGB is gamma-corrected for display (roughly a 2.2-power curve), so the arithmetic midpoint between #000000 and #FFFFFF — #808080 — sits slightly darker than the perceptual midpoint. A common workaround is to convert to linear sRGB (undo the gamma) before averaging and convert back, but this tool shows both the naive sRGB average and the perceptually uniform OKLCH / LAB results in parallel so you can choose by use case.

OKLCH is a polar-coordinate variant of Björn Ottosson’s Oklab (2020) — L (lightness), C (chroma / saturation), H (hue) — engineered for perceptual uniformity. CIE LAB (1976) uses orthogonal axes L (lightness), a (green↔red), b (blue↔yellow) approximating the Munsell perceptually uniform color system through a linear transformation of CIE XYZ. Both pass through CIE XYZ via standard matrices using Bradford chromatic adaptation or Hunt-Pointer-Estevez cone basis. HSL’s hue is circular, so averaging requires the (cos H, sin H) vector trick recovered through atan2 — the standard technique from Mardia’s circular statistics — rather than a naive numeric average.

CSS Color Module Level 4 and the color-mix() function

CSS Color Module Level 4 (W3C Working Draft as of 2024) introduces color-mix(in oklch, #ff0000 50%, #00ff00 50%), letting the browser perform perceptually uniform mixing in a specified color space. Supported in Chrome 111+, Safari 16.2+, and Firefox 113+, this is also the foundation for Tailwind v4’s opacity-handling layer.

A practical gotcha: color-mix(in srgb, ...) and color-mix(in oklch, ...) produce visibly different results for the same inputs, so consistency across a design system depends on picking one color space and sticking to it. Tailwind’s opacity utility bg-blue-500/50 mixes in OKLAB internally, which doesn’t match the result of rgba(59, 130, 246, 0.5) composited in sRGB. Comparing the four spaces side by side in this tool before writing color-mix() calls lets you choose the space whose output matches your intended design tone. When you need not a single midpoint but a full N-step interpolated ramp between two colors, color-blend extends the same color-space comparison across an 11-stop scale, which pairs naturally with the midpoint judgments made here.