gradients

Gradients, and the muddy middle

A two-stop gradient between two attractive colors often has an unattractive third color in the middle that you never chose. That color is an artifact of interpolation space. Browsers default to gamma-encoded sRGB, so the midpoint is the arithmetic mean of two encoded numbers — which is darker and less saturated than the perceptual midpoint, most visibly when the two ends are far apart in hue.

Interpolating in OKLab fixes it directly, and CSS now supports saying so: linear-gradient(in oklab, …). For hue-travelling gradients, in oklch plus a hue interpolation method keeps chroma up across the sweep instead of dipping through gray at the halfway point.

The other common artifact is banding — visible steps in what should be a smooth ramp. It comes from 8-bit quantisation and shows up worst on large, low-contrast, dark gradients, exactly the kind used as a page background. A few percent of noise breaks up the step edges for almost no file size.