sRGB, OKLab, and OKLCH gradients are not the same gradient

The endpoints are only part of the result

A two-stop gradient looks simple: choose a starting color, choose an ending color, and let the browser fill the gap. The missing question is how the browser should travel through color space.

Imagine mixing blue and yellow. Depending on the interpolation method, the middle may become grayish, greenish, darker than both endpoints, or unusually vivid. None of those outcomes changes the endpoints. They change the path between them.

When a gradient looks muddy, the problem may not be the stops. It may be the space used to interpolate them.

sRGB interpolation follows encoded channel values

Traditional web gradients interpolate the red, green, and blue channels associated with sRGB. This is familiar and broadly compatible, but it is not perceptually uniform.

Common effects include:

• Midpoints that look darker than expected
• Opposing hues that lose chroma and pass through gray
• Uneven visual speed, where one part of the gradient changes rapidly and another barely changes
• Results that match older design references and browser output

sRGB is often the right choice when visual compatibility with an existing gradient matters more than perceptual smoothness.

.legacy-gradient {
  background: linear-gradient(90deg, #6d5dfc, #ffb347);
}

OKLab creates more even perceptual transitions

OKLab represents color with a perceptual lightness axis and two opponent color axes. Interpolating in OKLab usually produces a smoother change in perceived lightness than sRGB.

Use OKLab when:

• You want the transition to feel even and controlled.
• The endpoints have very different lightness.
• A gray or desaturated midpoint is acceptable.
• You want fewer unexpected dark bands.

.smooth-gradient {
  background: linear-gradient(90deg in oklab, #6d5dfc, #ffb347);
}

OKLab is rectangular. It interpolates through its axes directly, which can reduce chroma through the middle even when the endpoint hues are colorful.

OKLCH can preserve a more colorful journey

OKLCH is the polar form of OKLab. It describes lightness, chroma, and hue. Interpolation can therefore move around the hue circle while managing lightness and chroma separately.

Use OKLCH when:

• You want a vivid transition between distant hues.
• The path through hue is part of the visual concept.
• You want to avoid an unintentional gray midpoint.
• You are creating color wheels, expressive backgrounds, or multihue data scales.

.colorful-gradient {
  background: linear-gradient(90deg in oklch, #6d5dfc, #ffb347);
}

Hue direction changes the route

In a polar color space, two hue angles can be connected in more than one direction. The shorter path crosses the smallest angular distance. The longer path travels the other way around the hue circle and may pass through many additional colors.

CSS color interpolation supports hue-method controls such as shorter, longer, increasing, and decreasing hue where the syntax and browser support apply.

This matters most when:

• The hues are far apart.
• The gradient is conic.
• You want to avoid crossing a particular hue family.
• The transition represents ordered data and direction carries meaning.

Always inspect the complete gradient. A mathematically valid route can include a midpoint that is visually or semantically inappropriate.

Wide-gamut intermediates may need mapping

OKLab and OKLCH can describe intermediate colors outside sRGB even when the endpoints are ordinary hex colors. A browser or display that cannot reproduce those colors must map them into the available gamut.

Gamut mapping can reduce chroma, alter the apparent hue, or create differences between displays. When consistency is critical:

• Test the advanced gradient on representative sRGB and wide-gamut screens.
• Provide a simpler fallback before the advanced declaration.
• Avoid relying on one narrow high-chroma band to communicate essential information.
• Compare screenshots only when the capture and viewing workflows preserve color profiles.

Text over a gradient needs a local contrast check

A gradient does not have one contrast ratio. The visible background behind the foreground changes by position and may change again at responsive breakpoints.

• Check the lowest-contrast point behind every line of text.
• Test where content moves on mobile.
• Account for animation or hover changes.
• Use a solid local surface, overlay, or scrim when the gradient cannot maintain contrast.
• Do not use the average color as a proxy for the actual background.

How to choose a space

There is no universally superior gradient space. The choice is part of the design. Compare the spaces, inspect the midpoint, test target browsers, and judge the result in the actual layout.