Myndex

MYNDEX
RESEARCH

Myndex

Myndex

Myndex

Myndex

Myndex

Gradients &
Colorspaces

⬅ Back To Webdesign

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

Gradient Explorer

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:

Gradient Explorer

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

Gradient Explorer

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

Gradient Explorer

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

Gradient Explorer

But offsetting the mid hue smooths the LCh gradient:

Gradient Explorer

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:

Gradient Explorer

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:

Gradient Explorer

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