As a developer, managing colors can be tedious, but there are “developer friendly” solutions, HSLuv is one of them and I will explain what it is and how it can help.

The problem with traditional color spaces

Traditionally in computing, we use RGB or HSL.

The problem with those color spaces is that they are non linear in term of human perception.

RGB

For example, let’s take the following stepped gradients, they are all composed of even spaced RGB colors.

• Red row is #000, #100, #200, #FEE, #FFF,…
• Green row is #000, #010, #020, …
• Blue row is #000, #001, #002, …
• Yellow row is #000, #110, #220, …
• Cyan row is #000, #011, #022, …
• Magenta row is #000, #101, #202, …
• Gray row is #000, #111, #111, #222, #222, …

We can see a few things:

• The steps are clearly not regular in brightness, the dark ones are much bigger steps than the light ones. The first step being a big one.
• Brightness is not consistent for each colors, blue is much darker.
• Saturation is uneven, blue and red looks “desaturated” on the right.

Ok, RGB is how pixels are rendered, it was never designed to have “manipulable” values, so this is to be expected.

HSL

Let’s try the same with HSL. HSL is supposed to be much easier to work with, because we can keep the hue constant and modify the other two values.