A polar color space describes color with a hue angle and other coordinates, such as lightness and chroma. In CSS, HSL, HWB, LCH, and OKLCH are polar color spaces. Their coordinates give you practical controls when a page needs a new color: start near an existing hue, then adjust lightness and chroma until the result fits. section 11.3.4 section 13.1.2
For example, a green palette can gain a contrasting red accent with `--red: oklch(64% 0.15 10deg)`. Preview the accent in its actual UI state rather than judging the swatch alone: DevTools can force a link’s `:active` state while you adjust its color. An OKLCH picker also lets you check whether a candidate falls within the intended sRGB or Display P3 gamut. section 11.3.4
Color space also changes what happens *between* colors. A gradient defaults to sRGB interpolation unless you specify a space with `in`, as in `linear-gradient(90deg in oklch, yellow, blue)`. For widely separated hues, try a polar space such as OKLCH or HSL; for a vivid color fading toward gray, black, white, or transparency, a rectangular space such as sRGB may work better. Compare the rendered results rather than assuming one space always wins. section 13.1.2
Listing 13.7 Gradient in oklch color space
.fade {
height: 200px;
width: 400px;
background-image: linear-gradient(90deg, yellow, blue); #1
background-image: linear-gradient(90deg in oklch, yellow, blue); #2
}
Compare the two gradient declarations: the first provides a fallback, while the second requests OKLCH interpolation in browsers that support the notation. section 13.1.2
Hue is angular, so interpolation can travel different ways around it. Use `longer hue` when you want a gradient to take the longer route. The same color interpolation principles apply to `color-mix()`, making color-space choice relevant to both gradients and generated palette colors. section 13.1.2
