Interpolation comparison bench

Mix two colors. Get four different answers.

Use one ratio across four CSS interpolation spaces. Compare every result on the same rail, then copy modern color-mix() with a six-digit sRGB fallback.

01 / Four interpolation lanes

One ratio, four rendered results.

The vertical marker crosses every scale at the same percentage. The different colors come from the interpolation space, not a changed input.

sRGB

#A7518DInspect fallback ↗

color-mix(in srgb, #FF5C35 50%, #4F46E5 50%)

Linear sRGB

#C252ABInspect fallback ↗

color-mix(in srgb-linear, #FF5C35 50%, #4F46E5 50%)

OKLab

#A6659FInspect fallback ↗

color-mix(in oklab, #FF5C35 50%, #4F46E5 50%)

OKLCH · shorter hue

#C939B0Inspect fallback ↗

color-mix(in oklch, #FF5C35 50%, #4F46E5 50%)

02 / Why the midpoint moves

Color mixing is a coordinate decision.

Digital interpolation is not physical paint mixing. Each space defines a different path between the same endpoints, so a midpoint can become lighter, darker, duller, or more vivid.

RGB

Encoded versus linear light

sRGB blends encoded channel values; linear-sRGB blends light. Their 50% results can differ sharply, especially between black and white.

Perceptual paths

OKLab interpolates rectangular perceptual coordinates. OKLCH interpolates lightness, chroma, and the shorter hue arc, which can preserve a more colorful path.

CSS

Fallback first

The copied snippet places a six-digit sRGB fallback before color-mix(). Browsers that support color-mix() use the second declaration.

03 / Method and source

Deterministic CSS color math.

Opaque sRGB inputs are converted and interpolated using CSS Color specifications. Out-of-gamut OKLab and OKLCH results are mapped to sRGB. Appearance still depends on the display, browser color management, surrounding colors, and final component.