HSLuv, a developer friendly perceptual color space

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.

Each row is an increment in lightness of 3.3% hsl(h, 100%, 0%), hsl(h, 100%, 3.3%), hsl(h, 100%, 9.9%), where h is:

Red row is 0
Green row is 120
Blue row is 240
Yellow row is 60
Cyan row is 180
Magenta row is 300

Yes, you don't have to check, the colors are the same as RGB, that's because HSL is just a way to write RGB, it's just another representation of the same color model.

In the rest of this post, I will use RGB or HSL interchangeably to denote the RGB color model.

HSLuv

In the 1970's, the International Commission on Illumination came up with CIELAB color model. At the same time, the CIELUV color model was also introduced. Those models are device independent and aspire to perceptual uniformity. This means trying to approximate human vision, this will be showcased in the example section below.

CIELUV uses lightness (L) and chromatic coordinates (uv), which aren't very friendly to work with.

For this reason, Alexei Boronine came up with HSLuv. This color space let you use the CIELUV color space with a familiar Hue Saturation Lightness trio.

Let's represent the same gradients we had before:

The hue looks "bizarre", but the steps are much more regular and this is what matters as we will see next.

HSLuv compared to RGB

The examples of this section are taken from Alexei Boronine's original blog post.

Colors with same lightness

HSL(250, 100%, 50%) HSL(60, 100%, 50%)

HSLuv(250, 100%, 50%) HSLuv(60, 100%, 50%)

The left and right colors should have the same lightness. As we can see with HSL, the yellow looks way brighter than the blue. HSLuv produces consistent results.

The lightness issue with HSL is really visible when we use the colors as background with white text. With the same colors as above:

I am a label I am a label

Colors with same saturation

HSL(0, 90%, 80%) HSL(0, 90%, 40%)

HSLuv(0, 90%, 80%) HSLuv(0, 90%, 40%)

The left and right colors should have the same saturation, but for HSL the left red looks much more saturated than the right red. HSLuv reds are more consistent in saturation.

Hue difference between colors

Let's compare four colors. The two colors at the top have the same hue difference than the two colors at the bottom.

HSL(30, 100%, 50%) HSL(50, 100%, 50%)

HSL(230, 100%, 50%) HSL(250, 100%, 50%)

With HSL, the top row has two very different colors, while the bottom row has similar colors

HSLuv(30, 100%, 50%) HSLuv(50, 100%, 50%)

HSLuv(230, 100%, 50%) HSLuv(250, 100%, 50%)

HSLuv produces colors with similar "distance" in hue.

Practical examples

Now that we got a primer on HSLuv, let's see practical examples.

Custom colors

One of the most common example is to generate custom colors for an interface. Label colors, folder colors, tag colors, category colors… Anything where the user can customize colors.

If you let the user pick a color with a full palette, you will end up with unmanageable colors, you need to limit the user. One option is to select the colors in advance and provide the user with a palette. The second option is to let the user select the hue, and you then change the saturation and lightness depending on the context.

A "label" examples

In the following examples the color are selected as follow:

Hue is the same for background and text colors
Saturation is the same for all colors, and it is 80
The 4 first color duos, have background lightness of 30 and text lightness of 80.
The 4 last color duos, have background lightness of 70 and text lightness of 20.

Hue

HSL

HSLuv

Label 1

100

Label 1

180

Label 1

300

Label 1

100

Label 1

180

Label 1

300

Label 1

We can see that the HSLuv colors are much more consistent and would not risk to break the UI or make one label illegible.

Generating a palette

Another common use for HSLuv is to generate a palette programmatically. When working on an app, you might have a brand color from your customer and that's it.

Imagine your customer gave you their brand color, #00916c and that's all you have to design your app.

With HSLuv you can easily generate a palette.

First, convert #00916c to HSLuv, which is 155.7, 100, 53.4, after rounding that gives us a hue of 156.

From this we can select a complementary hue. There are multiple possibilities, but here we just do ±180°, and in our case it is 336.

With saturation,lightness above each color:

40,10 40,90 10,80 90,30 20,95 90,30 20,95

10,95 30,6 100,40 90,40 20,95 90,40 20,95

From left to right it's:

Background color (hue=156)
Text color (hue=156)
Emphasis color (hue=156)
Button background color (hue=156)
Button text color (hue=156)
Default button background color (hue=336)
Default button text color (hue=336)

For the dark theme the emphasis was desaturated, but light theme the emphasis was saturated.

There is no absolute rule to build the color, but the lightness and saturation can just be manipulated in an intuitive way to generate colors that works together. For every color one this post, I just followed my intuition and I never used a color picker.

The palette in use

The background color is 156,40,10 and the text color is 156,40,90 while the italic text is 156,10,80. The default button is 336,90,30/336,20,95. The regular button is 156,90,30/156,20,95

Default Button

Button

Of course, the same can be done with a light theme.
The background color is 156,10,95 and the text color is 156,30,6 while the italic text is 156,100,40. The default button is 336,90,40/336,20,95. The regular button is 156,90,40/156,20,95

Default Button

Button

As shown, a palette can be generated in a few seconds by hand selecting colors.

The same palette with HSL/RGB:

The background color is 156,40,10 and the text color is 156,40,90 while the italic text is 156,10,80. The default button is 336,90,30/336,20,95. The regular button is 156,90,30/156,20,95

Default Button

Button

Default Button

Button

The HSLuv color palette can be used directly in a design, while the HSL palette is not a catastrophe, it needs to be tuned before it can be used. Also the HSL palette cannot create consistent variations.

Palette variations

The same saturation and lightness with different hue can quickly generate other palette with the same tone. We can rapidly generate palette by just changing the hues.

With hue=200: