Interpolate gradients in oklch

Blend gradients in oklch, and move the midpoint with color hints.

From design-motion-principles, Jakub Krehel’s oklch gradients.

Same stops, different space

Drag the probe and compare chroma (C) mid-strip.

sRGB (the default)Bad
linear-gradient(to right, blue, yellow)
in oklchGood
linear-gradient(in oklch to right, blue, yellow)
.hero {
  /* fallback */
  background: linear-gradient(to right, blue, yellow);
  background: linear-gradient(in oklch to right, blue, yellow);
}

Any two colors

Pick two colors from opposite sides of the wheel.

sRGBBad

linear-gradient(to right, A, B)
in oklchGood

linear-gradient(in oklch to right, A, B)

Move the midpoint with a hint

Slide the midpoint and compare the blend curves.

Extra color stopBad
Color hintGood

Why it matters, pros and cons

Why it matters

sRGB mixes numbers, so opposites meet in gray. oklch keeps the middle vivid.

Pros

  • No muddy gray midpoint
  • Even lightness steps for chart scales
  • One keyword, plain CSS

Cons

  • Hue path can detour; try in oklab
  • Saturated midpoints can leave the sRGB gamut
  • Same-hue ramps already look fine in sRGB