Mix Red and Blue in OKLCH
Same red and blue, mixed in oklch. Get a vivid magenta instead of a muddy grey-purple — the canonical demo of perceptual color mixing.
Detailed Explanation
Mixing Saturated Colors Perceptually
Switching the interpolation space from srgb to oklch changes the
result of the same red↔blue mix dramatically:
.midpoint {
background: color-mix(in oklch, red, blue);
}
Instead of muddy #7f007f, you get a vivid magenta-purple. The
chroma stays high through the entire transition because OKLCH separates
L (perceived lightness), C (chroma), and H (hue) into
independent axes. The interpolator can now travel along a perceptually
straight path.
What OKLCH actually does
OKLCH is built on top of OKLab, a perceptually uniform space published in 2020. When you ask for a 50/50 mix:
- L (lightness) is averaged.
- C (chroma) is averaged — both inputs are highly chromatic, so the result stays saturated.
- H (hue) walks the shorter arc on the hue wheel, which from red (≈ 29°) to blue (≈ 264°) lands at magenta (≈ 327° / -33°).
Practical takeaway
Make in oklch the default for design tokens, hover states, theme
variants, and any code path that derives one color from another. Reserve
in srgb for legacy compatibility.
Compare this to the sRGB version side by side — the difference becomes obvious immediately.
Use Case
Default choice for design systems, theme generation, and anywhere you need a 'pleasant' midpoint between two brand colors. Tailwind v4, Radix, and Material You all picked OKLCH for this reason.