Gradients Library - Generating Gradients From YUV Colorspace


Recently I published a library of more than 5000 Linear Gradients, which are available on itch.
You can also get them from github.

YUV - A great Colorspace for Gradients

The YUV colorspace is made up of 3 components:

  • Y is the luma of the color, that is its luminance/brightness
  • U is the blue projection, with values between -0.5 and 0.5
  • V is the red projection, also with values between -0.5 and 0.5

Therefore we have 2 chrominance components and one luminance channel. This makes for very smooth transition between coordinate colors, as the brightness can be left untouched, contrary to what happens in RGB where the brightness is linked to the chrominance components.

The YUV colorspace
The YUV colorspace with Y = 0.5

As I wanted to generate a lot of gradients with little to no supervision, the above picture shows why using the YUV colorspace seemed like a no-brainer.

The YUV colorspace
Going from Bottom Left to Top Right

All that was left was to create valid combinations of initial color and target colors, by specifying an initial color and a maximum allowed distance. Then iterate on selected delta values for U and V, and adjust Y to reach the desired distance.

Sample Gradient
A Generated Gradient

That’s a simple process but it generated nice gradients and I’m finding it really useful to scroll through the ones I have to find something that fits my needs. I hope it helps you too!