COLOR SCIENCE · 20 OCTOBER 2026

sRGB vs OKLab Gradients: Same Endpoints, Different Middle

Compare CSS interpolation spaces, use a browser fallback and understand why an attractive gradient can still be difficult for text.

By Palunio · Examples checked 20 October 2026

Two gradients can use identical start and end colors yet look different in the middle. The interpolation space determines how the intermediate colors are calculated. Palunio exposes that choice so you can compare it directly.

Compare the same two colors

The two examples below run from #F4C95D to #6750A4. The first uses traditional sRGB interpolation. The second requests OKLab, with an sRGB fallback when that syntax is unsupported.

Open these endpoints in the gradient generator and switch between interpolation modes. Inspect the middle, then test whether the effect suits the actual composition. Perceptual interpolation is a useful option rather than a rule that every gradient must follow.

What the browser is interpolating

sRGB interpolation blends the encoded red, green and blue components. It is not the same as mixing linear-light values. OKLab uses a lightness coordinate and two opponent-color coordinates designed to model perceptual differences more closely. A straight path in one space is not a straight path in the other.

OKLab is also distinct from OKLCH interpolation: the latter uses cylindrical chroma and hue coordinates and can involve a chosen hue path. Palunio’s current gradient switch is OKLab versus sRGB, so the export says in oklab.

Export a fallback before the modern declaration

.color-study {
  background: linear-gradient(90deg, #F4C95D, #6750A4);
  background: linear-gradient(90deg in oklab, #F4C95D, #6750A4);
}

Browsers that accept the second declaration use it; those that reject it can retain the first. The fallback keeps the same endpoints but may change the transition. Verify both when the middle color matters to the design.

Stop positions shape the result too

A stop at 20% does a different job from a stop at 50%. Multiple stops can hold a color for longer or create a narrower transition. Adjacent equal-position stops create a hard edge. Palunio sorts positions in the CSS output, so read the generated declaration if your visual result differs from the order in which you added controls.

Do not measure text contrast only at the endpoints

Text may cross the weakest part of a gradient, and responsive layout can move it over a different region. A single solid-color ratio cannot certify the entire background. Test the relevant positions in the rendered composition or give the text an opaque panel with a known pair.

References: CSS Color 4 interpolation, the original OKLab explanation, and the opaque-pair contrast checker.