Color interpolation calculates the intermediate colors between color stops. In CSS gradients, the chosen color space determines the path between those stops; without an explicit choice, interpolation uses sRGB. section 13.1.2
Choose the interpolation space according to the visual transition you want:
- Use polar spaces such as OKLCH or HSL for gradients between significantly different hues. section 13.1.2
- Use a rectangular space such as sRGB when fading a vivid color toward gray, black, white, or transparency. section 13.1.2
- In polar spaces, select the shorter or longer route around the circular hue value; the longer route can create a rainbow. section 13.1.2
Comparing interpolation spaces
A gradient can explicitly request OKLCH interpolation: `linear-gradient(90deg in oklch, yellow, blue)`. Adding `longer hue` makes the interpolation follow the longer path around the hue circle: `linear-gradient(90deg in oklch longer hue, yellow, blue)`.
The same interpolation mathematics applies to `color-mix()`: selecting a percentage along an sRGB gradient is equivalent to mixing those colors in sRGB at that percentage. section 13.1.2
