My Progress on HSLuv

About a year ago, while working on a super-secret project (that has since been stashed), I ran into a small UI problem: I needed to generate a set of 12 colors with a constant lightness and saturation, but with differing hues. HSL seemed like an obvious choice, but I quicly discovered that it is completely inadequate. So I started reading about colors.

After discovering perceptually-uniform color spaces, I made a JavaScript library that allowed me to use these color spaces and CIELUV in particular. I released the library and got back to my original project, using CIELChuv to generate my 12 colors.


Soon I ran into a limitation: as I raised the chroma value, my blue-green color would disappear as the coordinates stepped outside of the range of human vision and into the realm of impossible colors. See those dips in the plot above? CIELUV does not define a range of chroma, so the only way to find out if a color steps outside the boundary is to do an actual conversion. No good.

Out of sheer curiosity, I decided to derive a function that would find the most saturated color of a certain hue and lightness that is displayable by computers, one that would let me plot the boundary in the picture above. I used Maxima to build and solve some equations, the result was one long-ass function. I transcribed it into JavaScript and, to my great surprise, it worked.

Using this function, I could accept saturation as a percentage of the maximum chroma, eliminating the danger of stepping outside the boundary. Of course, it comes with a price: the chroma has to be distorted. Still, it was a huge improvement over HSL, so I released it as HSLuv.

A couple of weeks ago I updated HSLuv with a pastel variation, one that sacrifices saturated colors for a non-distorted chroma. Basically, it finds the lowest dips in the picture above and draws a horizontal line under it. The result is a rectangle that can be stretched with no distortion.

You can see a color picker, demos and technical details on the project page.

Also, check out a random syntax highlighting theme generator that I made to demonstrate the advantages of using HSLuv for generating colors.

If you hate hard-coding as much as I do (let this project be my witness), you should really use HSLuv! Why hard-code what you can generate?