The Missing Bit

HSLuv, a developer friendly perceptual color space
March 8, 2020
Updated: March 9, 2020

colors design

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.

We can see a few things:

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:

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
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
HSL
HSLuv
0
Label 1
Label 1
100
Label 1
Label 1
180
Label 1
Label 1
300
Label 1
Label 1
0
Label 1
Label 1
100
Label 1
Label 1
180
Label 1
Label 1
300
Label 1
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:

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
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

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:

Normal text but this is emphasized, but this is not. More text here.
Default Button
Button

With hue=300:

Normal text but this is emphasized, but this is not. More text here.
Default Button
Button

With hue=50:

Normal text but this is emphasized, but this is not. More text here.
Default Button
Button

With hue=260 and using the light theme with an accent color of +60 (far analogous):

Normal text but this is emphasized, but this is not. More text here.
Default Button
Button

With hue=160 and using the light theme with an accent color of +120 (triad):

Normal text but this is emphasized, but this is not. More text here.
Default Button
Button

How to use HSLuv

You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css, js, java… You declare your colors in HSLuv.

HSLuv is already available for many languages.

Editors support and tools

While the languages support is good, editor support is still lacking. I hope we will soon see HSLuv color pickers inside editors.

If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:

Conclusion

HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, … Color palettes can be created quickly without using any color picker.

HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.

References and interesting reads

If you wish to comment or discuss this post, just mention me on Mastodon or Twitter.

Related posts