Gradient interpolation: sRGB, OKLab and why it matters

Gradient interpolation is how the colours between your stops are calculated. You choose blue at one end and yellow at the other; the software has to invent every colour in between, and it does that by drawing a line between the two colours in some colour space. Which space it uses changes what you see. Blend in sRGB and blue to yellow passes through flat grey. Blend in OKLCH and it passes through a bright teal. Same stops, very different gradient.

What gradient interpolation means

Every colour can be described as a point in a space. In sRGB the three axes are red, green and blue. In OKLab they are lightness and two opponent axes, green to red and blue to yellow. In OKLCH they are lightness, chroma (how colourful) and hue (the angle round the wheel). Interpolating means walking from one point to the other. A straight walk through one space can be a curve, or a detour through grey, in another.

sRGB, OKLab and OKLCH side by side

Why sRGB gradients turn grey or muddy

sRGB was designed for screens, not for the eye. Its numbers are gamma encoded, and its axes don't line up with how we see hue or lightness. When two colours sit on opposite sides of the wheel, the straight line between them crosses near the neutral centre, so the middle loses its colour. Blue and yellow average to #808080. This is the main cause of muddy gradients, and it is why a designer's instinct to add a bridging colour works: the extra stop bends the path around the grey.

OKLab: even steps for the eye

OKLab, published by Björn Ottosson in 2020, was built so that equal distances look like equal differences. The practical result is a gradient whose lightness changes evenly from end to end, with no dark dip or bright bulge in the middle. It still takes a straight path, so two true opposites lose some colour at the centre, but far less than in sRGB. Modern CSS uses OKLab by default whenever any colour in a gradient is written in a newer syntax such as oklch().

OKLCH: keeping colour alive

OKLCH is the same space as OKLab, described in polar form: lightness, chroma and a hue angle. Interpolating in it walks around the wheel, so the in between colours keep their saturation. That is ideal for vivid, brand forward gradients and rainbow gradients. You can also choose which way round the wheel to go with shorter hue (the default), longer hue, increasing hue or decreasing hue. The OKLCH guide explains the space in more depth.

How to set gradient interpolation in CSS

Add in <space> before the stops, after any angle or shape. Browsers that don't understand it ignore the whole declaration, so write an sRGB version first as a fallback. Every space and hue keyword is listed in MDN's color interpolation reference, and CSS gradients in OKLCH has more recipes.

.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}

Which colour space to choose

1. 1

   Default to OKLab

   For most two or three colour blends it gives the smoothest result with no surprises.

2. 2

   Use OKLCH for distant or vivid colours

   When the colours sit far apart on the wheel and you want the middle to stay bright.

3. 3

   Keep sRGB to match old work

   If a gradient must look identical to an existing asset or image, blend in the same space it was made in.

4. 4

   Check the midpoint

   Whatever the space, look at the halfway colour. If it is grey or a hue you didn't expect, change the space or add a stop.

Interpolation is only one part of a good blend; where the stops sit matters just as much, covered in gradient colour stops. If you would rather skip the maths, Gradiently's Marks are finished gradient backgrounds that render at every size you design in, and the developer docs show how ChatGPT or Claude can search Marks and create designs that open in the Studio.