Gradients &
Colorspaces
Examples of Gradients Created
in Different Colorspaces
Experimental Site Notice
Dark Mode Experiment
This is not a production site. Some pages may have unusual formatting or colors as part of a series of live experiments in visual perception of self illuminated displays. If you have any problems reading any pages, or if you find any are particularly easy to read, we'd love to hear about it. Please discuss at the SAPC GitHub repo discussions tab
Which colorspace is best for creating a gradient? Let's first look at a gradient to full white, with this example using my gradient explorer:
Left column is staying in sRGB, next is linear xyY, then LAB, and far right is LAB LCh

You'll notice that remaining in sRGB is not substantially different than using L*a*b*
in most cases. This is partly because sRGB has a gamma curve that is different but similar to the perception curve of LAB.
You'll notice though that the LCh version has some hue shifts, depending on the starting color. In the case of purple, it requires some offsets near the mid range.
Also with LCh, the direction (clock wise or CCW) of hue rotation makes a difference.
Looking just at the for right LCh, here is magenta start, with no offsets, and the natural rotation:

Same rotation direction, but some offsets to smooth the LCh gradient.

Reversing the hue rotation and different offsets we go through purple instead of orange for LCh:

And here's from yellow, the LCh gets a green tinge without adjusting the hue offset:

But offsetting the mid hue smooths the LCh gradient:

And finally. BLUE is tricky with L*a*b*
as it often wants to shift to purple. On the other hand, in LCh blue wants to shift to cyan:

So in truth you can typically stay in sRGB for things like gradients to white, but for gradients between two saturated colors you might prefer to use LCh:

So here where colors get closer to 180° apart, the middle gets desaturated for both sRGB and LAB, as the average value in the middle is a grey - a darker murky grey for sRGB and a lighter grey for LAB. But LCh maintains saturation and instead rotates through the hues.
If you are interested in much greater detail and a ton more examples, check out Gradients Part Two