Color interpolation

Two colours and a blend between them do not describe a single result. Blending is a walk from one point to another, and where that walk goes depends on the coordinate system it is taken in. In sRGB the walk is a straight line through a cube whose axes are red, green and blue, so a blue at one end and a yellow at the other pass through the middle of that cube, which is grey. The colours were vivid, the ramp is not, and the flat stretch in the centre is what people mean by the dead zone.

The fix is to say which space to walk in. linear-gradient(in oklch, ...) interpolates in a perceptual colour space where lightness and chroma are separate axes, so the midpoint stays as saturated as its endpoints. Polar spaces such as OKLCH and HSL bring a second question with them: hue is an angle, and two angles have two arcs between them. shorter hue takes the smaller arc and is the default; longer hue takes the other way round, which is how you get a blue to yellow ramp that travels through magenta and red rather than through cyan and green. increasing hue and decreasing hue pin the direction outright.

The method is written in the same place for every construct that blends. Gradients take it after the direction, as linear-gradient(to right in oklch longer hue, ...), and it applies to every colour stop pair in the list. color-mix() takes it as its first argument. @keyframes and transition do not accept it at all yet, so animated colour still interpolates in the space the property resolved to, which is another reason to prefer a gradient when the path matters. The same machinery underneath is what tweens any two values, colour or not: a number, a length, a transform, all of them are a start, an end, and a rule about the route.

Two cautions. A wider interpolation space can wander outside the display’s range in the middle of a ramp even when both endpoints are inside it, and the browser will map those midpoints back in without telling you. And longer hue is a decoration, not a default: sweeping most of the wheel between two brand colours reads as a rainbow rather than as a blend. Reach for OKLCH with the shorter arc first, and change the route only when the route is the point.