CSS Color Module Level 4 is fun! As a visual aid for web designers, I wanted a list of gradients in different colour spaces that I can share. This is it!
Gradient over brightness
Most gradients are what we’d expect, though CIE Lab, LCH, and OKLCh show some hue shifts, adding orangey hues.
Gradient of colours #FEE, #F00, #100 in sRGB colour spaceGradient of colours #FEE, #F00, #100 in CIE Lab colour spaceGradient of colours #FEE, #F00, #100 in HSL colour spaceGradient of colours #FEE, #F00, #100 in LCH colour spaceGradient of colours #FEE, #F00, #100 in OKLCh colour space
In a blue gradient in CIE Lab colour space, we can see a distinct purple hue.
Gradient of colours #EEF, #00F, #001 in sRGB colour spaceGradient of colours #EEF, #00F, #001 in CIE Lab colour spaceGradient of colours #EEF, #00F, #001 in HSL colour spaceGradient of colours #EEF, #00F, #001 in LCH colour spaceGradient of colours #EEF, #00F, #001 in OKLCh colour space
Gradient over saturation
sRGB and HSL look fine, but CIE Lab and LCH add a barely noticeable touch of orange. The OKLCh gradient, however, clearly shows a hue shift towards what looks like yellow.
Gradient of colours #F00, #666 in sRGB colour spaceGradient of colours #F00, #666 in CIE Lab colour spaceGradient of colours #F00, #666 in HSL colour spaceGradient of colours #F00, #666 in LCH colour spaceGradient of colours #F00, #666 in OKLCh colour space
For a gradient that goes from blue to grey, we again see a purple-like colour in the CIE Lab and LCH gradients, and a dark cyan in OKLCh.
Gradient of colours #00F, #666 in CIE Lab colour spaceGradient of colours #00F, #666 in LCH colour spaceGradient of colours #00F, #666 in OKLCh colour space
Gradient over hue
Gradients with changing hues are notoriously difficult to get right, but the CIE Lab, LCH, and OKLCh gradients look great. CIE Lab, as can be seen, doesn’t rotate over the hue, which might be a design decision. Compared to LCH, OKLCh is a bit more monotonous in perceived brightness.
Gradient of colours red, cyan in sRGB colour spaceGradient of colours red, cyan in CIE Lab colour spaceGradient of colours red, cyan in HSL colour spaceGradient of colours red, cyan in LCH colour spaceGradient of colours red, cyan in OKLCh colour space
Gradient over everything
For gradients that transition over hue, saturation, and brightness, CIE Lab and OKLCh shine. Neither produce muddy colours or change in perceived brightness. All others, unfortunately, do.
Gradient of colours #F00, #488 in sRGB colour spaceGradient of colours #F00, #488 in CIE Lab colour spaceGradient of colours #F00, #488 in HSL colour spaceGradient of colours #F00, #488 in LCH colour spaceGradient of colours #F00, #488 in OKLCh colour space