[bluetwo]

RGB and HSL are related, but I wouldn't say HSL is based on RGB.

From a design point-of-view RGB actually has some problems, as it is difficult to manipulate in a reliable manner. However, from a data point-of-view if is useful because it can scale up or down depending on how much room you have to store information. Also, it relates to the way TV and many video standards transmit information.

In HSL, you have saturation and brighness, which can scale nicely depending on how much information you have, but hue is a a position on a circle, which is a different type of measurement.

Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML?

[jacobolus]

“HSL” is a trivial transformation of RGB. It’s what you get when you prop an RGB cube up on one corner, squish 6 of the other corners into the same plane, and then inflate it until it fills a cylinder shape. (Note that none of these steps make any reference to human perception.) Here’s my 2010 diagram showing that visually https://en.wikipedia.org/wiki/File:Hsl-and-hsv.svg

> Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML?

Implementing CIELAB in Javascript is straightforward. https://github.com/jrus/chromatist/blob/master/src/cielab.co...

You could alternately use a model like CIECAM02, but that gets a whole lot more complicated. https://github.com/jrus/chromatist/blob/master/src/ciecam.co...

[goodells]

I just wanted to say that the diagram of the transformation from RGB to the different color models is absolutely beautiful as well as informative. When I have a free day or two I am going to have to put together an animation for it where you can track a given color through the process. My favorite class in university was about color models, all the way from CIE 1931 to the various transformations on it to match human perception and driven by anatomical insights about the human eye. It's fascinating!

[bluetwo]

Just because something can be translated into something else doesn't mean that it is "based" on that thing.

Would you say celsius is "based" on fahrenheit? Or the other way around?

Is yiddish based on english?

Both RGB and HSL are based on the physics of color and perception. Just because it is trivial to transform one to the other doesn't mean anything.

[jcranmer]

> RGB and HSL are related, but I wouldn't say HSL is based on RGB.

HSL is explicitly defined as a transformation from RGB space, so each RGB triangle has a corresponding HSL space.

RGB is absolute garbage for doing anything other than displaying pixels. It's so bad, that the (piecewise) linear transformation to HSL is perceived by many to be good, when it's still equally terrible.

The main problem is that not all wavelengths of light contribute equally to perceived brightness in our color vision. Any color space that puts red, green, and blue on equal footing for a transformation is going to produce bad results. If you really want a linear transformation from RGB, you'll want to use something like luma instead (Y = .21R + .72G + .07B, according to Wikipedia)--you'll go from bad to acceptable, as luma is only a few percent off from the accurate results.

If you want to do color interpolation, you'll absolutely want to use CIELAB, which was explicitly designed for this purpose. Any good toolkit should provide CIELAB--d3 does, for example. If not, it's not hard to find snippets to do the conversion for you on places like stack overflow.

[jacobolus]

Note that “luma” (Y’, to avoid confusion please don’t call this Y) is based on a gamma-adjusted RGB space, and is therefore is not accurate for saturated colors.

To get a reasonably accurate correlate of lightness perception, you need to take your linear combination in a linear RGB space to get luminance (Y), and then afterward apply a non-linear correction to find lightness.