6 ms·

HCL: a color model that actually matches our perceptions (2011)

183 points by laughinghan 11y ago

SeanLuke 11y ago
I wonder why he didn't mention YUV.
liminal 11y ago
I wrote a viewer to better understand the HCL color space. By seeing it in 3D and then looking at different slices you can start to build an intuition about how the colors relate to each other and which colors are available at different parameters. http://briancort.com/hclviewer/ http://briancort.com/hclviewer/
- anewhnaccount 11y ago
  That's pretty neat. The 3d shape looks a little odd for some reason to be though. I think the perspective or projection isn't quite as I'd expect. EDIT: Maybe if I could tilt the camera to look from above and below that would be better? Also it would be cool if it worked as a colour picker too. (Okay, that's enough feature requests for now...)
  - liminal 11y ago
    I'm happy to share the code, but realistically I'm unlikely to add features. There are already so many colour pickers that I didn't see the point in adding that functionality. I created the tool while putting together a couple blog posts on how to use colours effectively in data visualizations. There are a number of links in those posts to other pickers out there: https://briancort.com/?p=146 https://briancort.com/?p=146 https://briancort.com/?p=174 https://briancort.com/?p=174
  - liminal 11y ago
    I posted all the code online: https://github.com/thatcort/hclviewer/ https://github.com/thatcort/hclviewer/ https://github.com/thatcort/hclSurfaceGenerator/ https://github.com/thatcort/hclSurfaceGenerator/
- laughinghan 11y ago
  This is the absolute best take on HCL I've seen yet! This is definitely going to be my go-to tool from now on.
davidjohnstone 11y ago
This is a fun topic. Here's a Lab and Lch colour picker I once made: http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker http://davidjohnstone.net/pages/lch-lab-colour-gradient-pick... A keyword not mentioned in this article is "perceptual uniformity". It's the idea that the difference between two colours as measured by the Euclidean difference (of the L, a and b components) will be equal to the perceived difference between colours. That said, it turns out that this isn't quite as true as it was hoped for this colour space, and now there are much more complicated formula for this: https://en.wikipedia.org/wiki/Color_difference https://en.wikipedia.org/wiki/Color_difference
- melloclello 11y ago
  Man I have used this thing so many times, thank you
- yoodenvranx 11y ago
  In the first article you posted there is a section called > HSV and HCL Should't it be "HSL" instead of "HCL"?
  - jacobolus 11y ago
    Yes, he means HSL (or sometimes HLS), though the abbreviations used in the wild for these models are wildly inconsistent. Here’s the first footnote in the Wikipedia article I wrote about HSL/HSV: In Joblove and Greenberg’s (1978) paper first introducing HSL, they called HSL lightness "intensity", called HSL saturation "relative chroma", called HSV saturation "saturation" and called HSV value "value". They carefully and unambiguously described and compared three models: hue/chroma/intensity, hue/relative chroma/intensity, and hue/value/saturation. Unfortunately, later authors were less fastidious, and current usage of these terms is inconsistent and often misleading. http://dl.acm.org/citation.cfm?id=807362 http://dl.acm.org/citation.cfm?id=807362 [Worth noting: Joblove and Greenberg’s terms weren’t really consistent with standard color science definitions, but they were at least well defined at the top of their paper.]
    - deleted 11y ago
Kristine1975 11y ago
There's also HUSL: http://www.husl-colors.org/ http://www.husl-colors.org/
- mcnamaratw 11y ago
  Wow, for dark colors that one seems even more useful.
melling 11y ago
"HCL is a cylindrical transformation of CIE Lab" What is CIE Lab?
- Aardwolf 11y ago
  https://en.wikipedia.org/wiki/Lab_color_space https://en.wikipedia.org/wiki/Lab_color_space
samch 11y ago
I think that Mike Bostock did a fantastic job with his cubehelix rainbow. It really does look visually less-jarring than HCL. https://bl.ocks.org/mbostock/310c99e53880faec2434 https://bl.ocks.org/mbostock/310c99e53880faec2434
- tacos 11y ago
  Every time a thread like this appears on HN I jump in and make angry monkey noises. But this is great! Note how it's the only one that looks like the paint chips in the store. Color is one of those things (like music software, or image processing) that nerds get excited about but just can't stop tripping over themselves. Nice to see a sane approach here for a change!
- davidjohnstone 11y ago
  It depends what properties you want. That is a much nicer looking rainbow, but it drops the perceptual uniformity that often makes HCL useful.
  - tacos 11y ago
    This rainbow is interesting precisely because it shows that "perceptual uniformity" is not as useful as you might think. This is why people are still futzing with UX around volume controls and light dimmers. It's not just the math. Given "perception" there's no "uniformity" -- by definition.
    - tamana 11y ago
      Huh? The pretty rainbow is a perceptual mathematical model. The reason is it looks nicer than the HCL rainbow is that, unlike a HC rainbow at constant L, it includes luminance in its model of perception
      - tacos 11y ago
        To clarify: commenter above states that the pretty rainbow "drops the perceptual uniformity that often makes HCL useful." My point is that you shouldn't claim one is more useful than the other without specifying the problem domain you're optimizing for. Also the language itself isn't helpful: "perception" is fuzzy by definition and we have two distinct positions on what "uniformity" means. You've now added the magic word "model" to the mix. https://en.wikipedia.org/wiki/All_models_are_wrong https://en.wikipedia.org/wiki/All_models_are_wrong If any of this were obvious, Adobe wouldn't have stupid color pickers and I wouldn't have three wildly diverging ways for adjusting audio volume and light levels in my home.
mjpuser 11y ago
I can't figure out what this has to do with perception. In our retina, we have rods for brightness and cones as color sensors. So perception would be farther up, possibly in ganglion cells, thalamus, or visual cortex. Side note: this is still an interesting topic though, and there is nothing wrong with exploring non-human modes of perception.
- Aleman360 11y ago
  IIRC the LAB color space was originally based off of empirical data from studies conducted on actual peoples' perception.
- tamana 11y ago
  It's black-box modeling of perception by tweaking inputs (light) and measuring outputs (human statements of how intense/smooth/whatever it looks)
- elsherbini 11y ago
  This talk from the matplotlib people on making a better color map goes into some details about physical perception and what it means for picking colors: https://www.youtube.com/watch?v=xAoljeRJ3lU https://www.youtube.com/watch?v=xAoljeRJ3lU
tgb 11y ago
Well presented. Interestingly, I thought the RGB interpolation example at the end looked just as reasonable as the HCL interpolation. Though RGB was a little bland. But RGB should have been the 'dumbest' colorspace to interpolate in. Even trying random other colors the RGB always looked fine while the HCL, well, usually couldn't even come up with all the intermediate colors. HCL actually seems to do very poorly interpolating towards black. Try #000000 and #AA0000. Apart from the missing color, the aparent hue changes significantly.
- davidjohnstone 11y ago
  The missing colour in the #a00 to #000 interpolation is because HCL is trying to create a colour outside of sRGB (the green component is less than zero). As for the hue change, one difficulty of making a gradient to black in HCL is that black doesn't have a hue when specified as rgb(0, 0, 0), which seems to mess up some tools. Edit: It's interesting to see how the different colour spaces react to the #000 being changed to #010000 or #000100 or #000001.
flixic 11y ago
It's quite a bit less practical than other color spaces, because it's far less reliable. For instance, try their gradient tool with #9C0A0A and #AA2AB5. Every other space produces good looking results, HCL fails completely.
mzs 11y ago
When I want to compare to solid like white/black background I just use Y. When I want to compare colors I have had decent enough results with this simple formula (conveniently in RGB for most programing tasks): http://www.compuphase.com/cmetric.htm http://www.compuphase.com/cmetric.htm I think it's pretty telling that CIE and others have made a number of revisions to Lab color distance formulas over the years to the point of them having constants you tweak. There's no perfect out there yet, so I use a good enough that is simple to compute.
mark-r 11y ago
The actual code used on the page needs better handling of out-of-gamut colors. When I plugged FF0000 into the first value for the gradient comparison, two of the samples turned pure black. Other than that, it looks very promising.
raould42 11y ago
We do not all see color the same way in the first place! http://www.ncbi.nlm.nih.gov/pubmed/16647849 http://www.ncbi.nlm.nih.gov/pubmed/16647849
SuperPaintMan 11y ago
The first example comparing the differing fully saturated hues for the same value is what led me to creating my own color-picker. It takes in RGB hex and spits out the equivalent Munsell value and vice versa. I can edit in a human-understandable format and switch it back to standard Hex. Let's take a dark purple, that's too light: 573F63 The tool converts it in place to 5P 3/4, then we just modify the value (second term) to 5P 1/4 and convert back to hex (#291333). All we have changed is the brightness, Hue and Chroma have stayed constant. Hex values are horrible to work with, they contain no understandable info. 10Y 8/6 is going to be complementary to 10PB 8/6, without going outside equidistant chroma levels and having matching value. Check out the demo in the readme. Edit: https://github.com/germ/munsellScript/ https://github.com/germ/munsellScript/
danbolt 11y ago
The first example of how HSV's hues have different perceived brightness is an interesting topic. Some researchers have been looking into better grayscale filters that could pick out colour distinctions better, too. PDF, in case you're interested: http://www.cs.northwestern.edu/~ago820/color2gray/color2gray.pdf http://www.cs.northwestern.edu/~ago820/color2gray/color2gray...

183 points by laughinghan 11y ago

I wonder why he didn't mention YUV.

I wrote a viewer to better understand the HCL color space. By seeing it in 3D and then looking at different slices you can start to build an intuition about how the colors relate to each other and which colors are available at different parameters. http://briancort.com/hclviewer/ http://briancort.com/hclviewer/

anewhnaccount 11y ago
That's pretty neat. The 3d shape looks a little odd for some reason to be though. I think the perspective or projection isn't quite as I'd expect. EDIT: Maybe if I could tilt the camera to look from above and below that would be better? Also it would be cool if it worked as a colour picker too. (Okay, that's enough feature requests for now...)
- liminal 11y ago
  I'm happy to share the code, but realistically I'm unlikely to add features. There are already so many colour pickers that I didn't see the point in adding that functionality. I created the tool while putting together a couple blog posts on how to use colours effectively in data visualizations. There are a number of links in those posts to other pickers out there: https://briancort.com/?p=146 https://briancort.com/?p=146 https://briancort.com/?p=174 https://briancort.com/?p=174
- liminal 11y ago
  I posted all the code online: https://github.com/thatcort/hclviewer/ https://github.com/thatcort/hclviewer/ https://github.com/thatcort/hclSurfaceGenerator/ https://github.com/thatcort/hclSurfaceGenerator/
laughinghan 11y ago
This is the absolute best take on HCL I've seen yet! This is definitely going to be my go-to tool from now on.

davidjohnstone 11y ago

This is a fun topic. Here's a Lab and Lch colour picker I once made: http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker http://davidjohnstone.net/pages/lch-lab-colour-gradient-pick... A keyword not mentioned in this article is "perceptual uniformity". It's the idea that the difference between two colours as measured by the Euclidean difference (of the L, a and b components) will be equal to the perceived difference between colours. That said, it turns out that this isn't quite as true as it was hoped for this colour space, and now there are much more complicated formula for this: https://en.wikipedia.org/wiki/Color_difference https://en.wikipedia.org/wiki/Color_difference

melloclello 11y ago
Man I have used this thing so many times, thank you
yoodenvranx 11y ago
In the first article you posted there is a section called > HSV and HCL Should't it be "HSL" instead of "HCL"?
- jacobolus 11y ago
  Yes, he means HSL (or sometimes HLS), though the abbreviations used in the wild for these models are wildly inconsistent. Here’s the first footnote in the Wikipedia article I wrote about HSL/HSV: In Joblove and Greenberg’s (1978) paper first introducing HSL, they called HSL lightness "intensity", called HSL saturation "relative chroma", called HSV saturation "saturation" and called HSV value "value". They carefully and unambiguously described and compared three models: hue/chroma/intensity, hue/relative chroma/intensity, and hue/value/saturation. Unfortunately, later authors were less fastidious, and current usage of these terms is inconsistent and often misleading. http://dl.acm.org/citation.cfm?id=807362 http://dl.acm.org/citation.cfm?id=807362 [Worth noting: Joblove and Greenberg’s terms weren’t really consistent with standard color science definitions, but they were at least well defined at the top of their paper.]
  - deleted 11y ago

Kristine1975 11y ago

There's also HUSL: http://www.husl-colors.org/ http://www.husl-colors.org/

mcnamaratw 11y ago
Wow, for dark colors that one seems even more useful.

melling 11y ago

"HCL is a cylindrical transformation of CIE Lab" What is CIE Lab?

Aardwolf 11y ago
https://en.wikipedia.org/wiki/Lab_color_space https://en.wikipedia.org/wiki/Lab_color_space

samch 11y ago

I think that Mike Bostock did a fantastic job with his cubehelix rainbow. It really does look visually less-jarring than HCL. https://bl.ocks.org/mbostock/310c99e53880faec2434 https://bl.ocks.org/mbostock/310c99e53880faec2434

tacos 11y ago
Every time a thread like this appears on HN I jump in and make angry monkey noises. But this is great! Note how it's the only one that looks like the paint chips in the store. Color is one of those things (like music software, or image processing) that nerds get excited about but just can't stop tripping over themselves. Nice to see a sane approach here for a change!
davidjohnstone 11y ago
It depends what properties you want. That is a much nicer looking rainbow, but it drops the perceptual uniformity that often makes HCL useful.
- tacos 11y ago
  This rainbow is interesting precisely because it shows that "perceptual uniformity" is not as useful as you might think. This is why people are still futzing with UX around volume controls and light dimmers. It's not just the math. Given "perception" there's no "uniformity" -- by definition.
  - tamana 11y ago
    Huh? The pretty rainbow is a perceptual mathematical model. The reason is it looks nicer than the HCL rainbow is that, unlike a HC rainbow at constant L, it includes luminance in its model of perception
    - tacos 11y ago
      To clarify: commenter above states that the pretty rainbow "drops the perceptual uniformity that often makes HCL useful." My point is that you shouldn't claim one is more useful than the other without specifying the problem domain you're optimizing for. Also the language itself isn't helpful: "perception" is fuzzy by definition and we have two distinct positions on what "uniformity" means. You've now added the magic word "model" to the mix. https://en.wikipedia.org/wiki/All_models_are_wrong https://en.wikipedia.org/wiki/All_models_are_wrong If any of this were obvious, Adobe wouldn't have stupid color pickers and I wouldn't have three wildly diverging ways for adjusting audio volume and light levels in my home.

mjpuser 11y ago

I can't figure out what this has to do with perception. In our retina, we have rods for brightness and cones as color sensors. So perception would be farther up, possibly in ganglion cells, thalamus, or visual cortex. Side note: this is still an interesting topic though, and there is nothing wrong with exploring non-human modes of perception.

Aleman360 11y ago
IIRC the LAB color space was originally based off of empirical data from studies conducted on actual peoples' perception.
tamana 11y ago
It's black-box modeling of perception by tweaking inputs (light) and measuring outputs (human statements of how intense/smooth/whatever it looks)
elsherbini 11y ago
This talk from the matplotlib people on making a better color map goes into some details about physical perception and what it means for picking colors: https://www.youtube.com/watch?v=xAoljeRJ3lU https://www.youtube.com/watch?v=xAoljeRJ3lU

tgb 11y ago

Well presented. Interestingly, I thought the RGB interpolation example at the end looked just as reasonable as the HCL interpolation. Though RGB was a little bland. But RGB should have been the 'dumbest' colorspace to interpolate in. Even trying random other colors the RGB always looked fine while the HCL, well, usually couldn't even come up with all the intermediate colors. HCL actually seems to do very poorly interpolating towards black. Try #000000 and #AA0000. Apart from the missing color, the aparent hue changes significantly.

davidjohnstone 11y ago
The missing colour in the #a00 to #000 interpolation is because HCL is trying to create a colour outside of sRGB (the green component is less than zero). As for the hue change, one difficulty of making a gradient to black in HCL is that black doesn't have a hue when specified as rgb(0, 0, 0), which seems to mess up some tools. Edit: It's interesting to see how the different colour spaces react to the #000 being changed to #010000 or #000100 or #000001.

flixic 11y ago

It's quite a bit less practical than other color spaces, because it's far less reliable. For instance, try their gradient tool with #9C0A0A and #AA2AB5. Every other space produces good looking results, HCL fails completely.

mzs 11y ago

When I want to compare to solid like white/black background I just use Y. When I want to compare colors I have had decent enough results with this simple formula (conveniently in RGB for most programing tasks): http://www.compuphase.com/cmetric.htm http://www.compuphase.com/cmetric.htm I think it's pretty telling that CIE and others have made a number of revisions to Lab color distance formulas over the years to the point of them having constants you tweak. There's no perfect out there yet, so I use a good enough that is simple to compute.

mark-r 11y ago

The actual code used on the page needs better handling of out-of-gamut colors. When I plugged FF0000 into the first value for the gradient comparison, two of the samples turned pure black. Other than that, it looks very promising.

raould42 11y ago

We do not all see color the same way in the first place! http://www.ncbi.nlm.nih.gov/pubmed/16647849 http://www.ncbi.nlm.nih.gov/pubmed/16647849

SuperPaintMan 11y ago

The first example comparing the differing fully saturated hues for the same value is what led me to creating my own color-picker. It takes in RGB hex and spits out the equivalent Munsell value and vice versa. I can edit in a human-understandable format and switch it back to standard Hex. Let's take a dark purple, that's too light: 573F63 The tool converts it in place to 5P 3/4, then we just modify the value (second term) to 5P 1/4 and convert back to hex (#291333). All we have changed is the brightness, Hue and Chroma have stayed constant. Hex values are horrible to work with, they contain no understandable info. 10Y 8/6 is going to be complementary to 10PB 8/6, without going outside equidistant chroma levels and having matching value. Check out the demo in the readme. Edit: https://github.com/germ/munsellScript/ https://github.com/germ/munsellScript/

danbolt 11y ago

The first example of how HSV's hues have different perceived brightness is an interesting topic. Some researchers have been looking into better grayscale filters that could pick out colour distinctions better, too. PDF, in case you're interested: http://www.cs.northwestern.edu/~ago820/color2gray/color2gray.pdf http://www.cs.northwestern.edu/~ago820/color2gray/color2gray...