A roundup exploring how CSS gradients render differently depending on the color space used for interpolation (sRGB by default), with links to deeper explainers on the topic. Covers the range of available CSS color spaces (srgb, display-p3, xyz, etc.), the perceptual-uniformity benefits of OKLCH over hsl() and the rarely-used hwb(), the 'longer hue' keyword for conic gradients, and a handful of color palette and gradient generator tools worth trying.
Questions this post answers
Why do my CSS gradients look different or desaturate in the middle when using different color spaces?
CSS gradients interpolate in sRGB by default, which can cause colors to desaturate or shift unexpectedly midway between stops. Switching the interpolation color space, for example using oklch instead, changes how intermediate colors are calculated since each space (srgb, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65) produces different in-between hues. Developers debugging unexpected gradient colors can find deeper CSS explainers curated on daily.dev.
What is the difference between the CSS oklch() and hsl() color functions?
hsl() is defined in the sRGB color space and cannot represent colors outside it, while oklch() is a newer, perceptually uniform color model, meaning colors at the same lightness value appear equally bright to the human eye regardless of hue. oklch() keeps similar intuitive controls (lightness, chroma, hue) to hsl() but works in a larger, more accurate color space. Teams choosing between legacy and modern CSS color functions can track these comparisons on daily.dev.
How do I make a conic-gradient in CSS go the long way around instead of the shortest path?
Add the longer hue keyword inside the gradient's interpolation syntax, for example conic-gradient(in oklch longer hue, red, red). By default gradients take the shortest hue path between color stops, but specifying longer forces it to traverse the rest of the color wheel instead, useful for effects like drawing angular shapes with conic gradients. Front-end developers experimenting with conic gradients can follow practical CSS techniques via daily.dev.
7.1K Impressions1 Comment