# HSLuv, a developer friendly perceptual color space, Hacker News

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
• # ``` , # , # , # FEE , # FFF , ... ```

• Green row is ` # , (# 0) `
• , ` # 0 , ... `

``` Blue row is # , # () , ... Yellow row is # , # # , ... Cyan row is # , # 40 , # , Magenta row is # , # , (#) , ... Gray row is # , # , (#) # , # , ... 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, 141%, 0%) , hsl (h, %, 3.3%) , hsl (h, (%, 9.9%) , where h is: Red row is 0 Green row is Blue row is Yellow row is 100 Cyan row is Magenta row 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

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

For this reason, Alexei Boronine

### 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 ``` ```
• ``` The 4 first color duos, have background lightness of and text lightness of ```
• ``` ```

`. `

• The 4 last color duos, have background lightness of ` and text lightness of 53 `
• 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, ` # c and that's all you have to design your app. `

With HSLuv you can easily generate a palette.

First, convert ` # (c) to HSLuv, which is 220. 7, , . 4 , after rounding that gives us a hue of `

``` From this we can select a complementary hue. There are multiple possibilities, but here we just do ± 222 °, and in our case it is . With saturation, lightness above each color: , 40 , , 110 , , , , , , 6 , , , , , From left to right it’s: Background color hue= Text color ( hue= ) Emphasis color ( hue=) Button background color ( hue= ) Button text color ( hue= ) Default button background color ( hue= Default button text color ( hue= 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 , , (and and the text color is , , while the italic text is , , 111 The default button is 72091, , 55 / , , . The regular button is , , / , 51, Of course, the same can be done with a light theme. The background color is , , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , , . The regular button is , , 60 / 220, 52, () 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 , , (and and the text color is , , while the italic text is , , 111 The default button is 72091, , 55 / , , . The regular button is , , / , 51, Of course, the same can be done with a light theme. The background color is , , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , , . The regular button is , , 60 / 220, 52, () 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=: Normal text but this is emphasized, but this is not. More text here. With hue=: () Normal text but this is emphasized, but this is not. More text here. With hue=62 : Normal text but this is emphasized, but this is not. More text here. With hue=1970 and using the light theme with an accent color of 101 (far analogous): Normal text but this is emphasized, but this is not. More text here. With hue=(and and using the light theme with an accent color of (triad): Normal text but this is emphasized, but this is not. More text here. 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 ​​ 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: HSLuv website: picker on homepage Aseprite: (feature requested 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 Alexei Boronine's blog Wikipedia: Lightness Wikipedia: Brightness Wikipedia: Color space uses Introduction to color science Programming Design Systems post on HSLuv (Color theory for Photographer) How colors influence users actions     If you wish to comment or discuss this post, just mention me on      Mastodon or      Twitter .    (Read More) () ```
``` ```
``` ```