Why I Love HSV, and Why It’s Totally Useless

I love HSV. If you’ve ever tried to pick a color using RGB sliders than you understand why.

HSV gives you the most important concept for building colors: separation of concerns. Each slider corresponds to a relevant dimension that makes it easy to select what color you want, how much color you want, and how bright you want that color to be.

But there’s only one problem. HSV doesn’t actually let you choose the real brightness of a color. In order to understand why, it helps to look at equivalent RGB values as we make changes to the Hue.

If we crank up the Saturation and Value to 100 and sample as we move the Hue in increments of 60º we get six different colors: Red, Yellow, Green, Cyan, Blue, and Magenta. These six colors are unique because they all max out the brightness for one or two channels in RGB. Take a look at the sub pixels for how a computer monitor displays Red, Green, and Blue.

Now look at the sub pixels for Yellow, Cyan, and Magenta. Notice how these three colors are each pumping twice as much light into your eyes as Red, Green and Blue. 

Let’s map these colors as greyscale values according to how much light is physically hitting your retina. This way we can see how much the actual brightness changes as we move around the Hue slider.

Notice the bright and dark bands of light when we convert the full spectrum of colors into greyscale. Yellow, Cyan, and Magenta are all twice as bright as Red, Green and Blue even though all six colors have the HSV Value set to 100. As you can imagine, this makes life very difficult when trying to calculate contrast between two arbitrary colors.

Well at this point it’s not too bad, you could just keep this in mind when choosing colors and compensate for the differences in brightness. Surely this isn't so much of a problem that we show resort to throwing out a perfectly good color space.

Don’t worry, it gets worse.

There’s another little quirk to how the brain interprets light after it hits the retina. Your brain doesn’t consider Red, Green, and Blue to be equally bright—and the differences are very significant. Red light is perceived to be ~62% brighter than Blue light, and Green light ~127% brighter than Blue light.

Here’s a handy little formula for calculating the perceived brightness of a given RGB color:

brightness =  √( 0.299 R2 + 0.587 G2 + .114 B2 )

Let’s map out our colors again, this time taking into account the difference in perceived brightness between each color.

Wow! They are all over the map! Yellow is ~179% brighter than Blue, and look how dark the band of Blue appears when compared to every other color in the spectrum.

Okay, so clearly this is a problem. HSV claims to separate out Hue, Saturation, and Brightness/Value, but changes to the Hue can cause dramatic changes to the perceived brightness. What would it look like if we corrected for these errors and built the corrections directly into the color space?

Each of these colors have the same Saturation and the same Brightness with only the Hue changing. Notice that the greyscale values are a consistent grey all the way along. But how is this possible?

Introducing Hue Chroma Lightness (HCL). Some very smart people have been working on these sorts of problems for over one hundred years now, and their efforts have been quite fruitful. HCL is a color space that similar to HSV in every respect but one: changes in the Hue dimension in no way effect the Lightness dimension.

You can play with an HCL color picker here.

This is pretty cool but if HCL is so great, why doesn’t everyone already use it?
— Smartypants McCleverbutt

Easy there, tiger. Actually, quite a lot of people do use HCL and related color spaces in video, display and broadcasting to ensure accurate color reproduction. It has also been gaining a lot of traction in the data science community partly due to its inclusion in d3.js—a popular framework for creating interactive graphs.

As for why more people don’t use it, the main reason is that it isn't yet included in most graphics and web tools so designers don’t know what they are missing. HSV does a pretty good job most of the time and good designers have trained themselves to compensate for its inherent distortions.

There is also one potential drawback to using HCL, which is that some of the values inside of the cylinder don’t exist in the sRGB color space. This means that rotations in Hue on a color with a high Chroma could translate to a non-existent color. The usual solution to this problem is reduce the Chroma value until you find a valid color rather than changing the Lightness.

This 3D render of an sRGB cuboid inside an HCL cylinder helps to demonstrate where the outermost colors land.

For more reading, this article by Gregor Aisch goes into a little more detail about HCL as it applies to maps and data science.

HSV isn't going away anytime soon; it still has the same benefits over RGB and widespread software support. However, HCL offers a clever solution for the primary issue with the HSV color space. Hopefully HCL will become more available to designers in the future as it is incorporated into new software and workflows.