Color interpolation space
The color map a gradient uses to find its middle steps, which decides whether the blend stays rich, bends through gray, or changes hue.
See it
What it is
A color interpolation space is the coordinate system used to calculate all the in-between colors in a gradient, animation, or generated ramp. The endpoints can be identical while the path between them changes dramatically: sRGB can produce dull or uneven middle steps, while Oklab and OKLCH usually preserve perceptual lightness and colorfulness better.
CSS Color 4 lets a gradient name its route, such as linear-gradient(in oklch, red, blue). Polar spaces also need a hue route because angles wrap around: shorter, longer, increasing, and decreasing hue interpolation can send the same pair through completely different colors. Reach for an explicit space whenever the midpoint matters, not just the endpoints.
Gotcha: there is no winning space for every job. Linear sRGB is useful when the mix should follow physical light intensity, Oklab is dependable for smooth perceptual transitions, and OKLCH gives direct control over the hue path. Any of them can produce colors outside the display gamut, so inspect the whole gradient and its gamut mapping rather than assuming a modern space guarantees a clean result.
Ask AI for it
Create three CSS linear-gradient() swatches from the same red and blue endpoints. Set the first to linear-gradient(in srgb, ...), the second to linear-gradient(in srgb-linear, ...), and the third to linear-gradient(in oklch shorter hue, ...). Label each interpolation space, sample and print its 50% midpoint as oklch() and hex, and add a fourth OKLCH swatch using longer hue so the hue-path difference is visible. Keep every other size and layout property identical.