Why your CSS gradients look muddy (and how OKLCH fixes it)
The grey dead-zone in sRGB gradients explained, and how OKLCH interpolation produces vivid, even transitions.
Ever made a gradient from blue to yellow and watched it turn an ugly grey in the middle? That’s not your eyes — it’s the color space the browser interpolates through.
The sRGB dead-zone
By default, linear-gradient() blends colors in sRGB. Averaging two vivid
but opposite hues in sRGB drags the midpoint toward grey, because the straight
line between them passes through the desaturated center of the color volume. The
result is a muddy band right where you wanted the most color.
OKLCH to the rescue
CSS Color 4 lets you choose the interpolation space:
background: linear-gradient(in oklch, blue, yellow);OKLCH is perceptually uniform, so the path between two colors keeps its chroma (saturation) instead of collapsing to grey. The same blue-to-yellow gradient stays bright and lively all the way across.
Try it
The gradient generator has an OKLCH interpolation toggle — flip it on a two-color gradient and watch the midpoint come alive. To explore OKLCH values for your brand colors, paste them into the color converter.
Browser support for in oklch is solid across modern browsers; for older ones
the gradient simply falls back to the default sRGB blend.