HCL: a color model that actually matches our perceptions (2011) | Hacker News Reader

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

vis4.net

183 pointslaughinghan43 comments

This is a fun topic. Here's a Lab and Lch colour picker I once made: 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

Wow, the color difference stuff is fascinating. How on earth do they measure the space of perceptual difference?

This might be a good start: https://en.wikipedia.org/wiki/MacAdam_ellipse

Describes it exactly. Thank you!

Not sure, but maybe you could test by showing people two similar colors and asking them to decide if the are identical.

With enough samples (and enough individual participants) you establish how many "statistically-significant distinguishable differences" exist along a given path through the color-space.

Then combine those and get a sort of topographic grid...

Yeah, something like that was my best guess—either that or letting subjects adjust a second color until it matched the first. Turns out that's exactly what they did: "MacAdam set up an experiment in which a trained observer viewed two different colors, at a fixed luminance of about 48 cd/m2. One of the colors (the "test" color) was fixed, but the other was adjustable by the observer, and the observer was asked to adjust that color until it matched the test color." - from https://en.wikipedia.org/wiki/MacAdam_ellipse

That would actually be an interesting research topic because the results might be influenced by culture/language:

https://en.wikipedia.org/wiki/Blue%E2%80%93green_distinction...

It would be easier to measure the photoreceptor response of the eye and mathematically extrapolate.

Man I have used this thing so many times, thank you

In the first article you posted there is a section called

> HSV and HCL

Should't it be "HSL" instead of "HCL"?

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

[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.]

EDIT: misunderstood, thought it was referring to original article not grandparent.

No. HSV and HSL are two very similar physically-based color models that only loosely map to perceived brightness and perceived grayness: https://en.wikipedia.org/wiki/HSL_and_HSV

They are nice cylindrical shapes because they are straightforward transformations of the RGB cube-shaped color space.

By contrast, HCL is a biologically-based close approximation of actual perceived brightness and perceived grayness: https://en.wikipedia.org/wiki/Lab_color_space

It has a funky shape because the frequency responses of the color-sensitive pigments in the cones of our eyes are complicated: https://en.wikipedia.org/wiki/CIE_1931_color_space#Color_mat...

</strike>

Yes, but in davidjohnstone’s link which yoodenvranx is talking about, what that Wikipedia page calls HSL is being called HCL, whereas what you are calling HCL is being called Lch. (CIE LCh or CIELCH, optionally with a subscript 'ab' to distinguish it from the cylindrical version of CIELUV, would be a better, relatively unambiguous name. By convention, the C should be capitalized.)

Oh my god you're so right

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/

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...)

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=174

I posted all the code online: https://github.com/thatcort/hclviewer/ https://github.com/thatcort/hclSurfaceGenerator/

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.

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

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!

It depends what properties you want. That is a much nicer looking rainbow, but it drops the perceptual uniformity that often makes HCL useful.

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.

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

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

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.

There's not much yellow in that rainbow...

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

Wow, for dark colors that one seems even more useful.

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.

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.

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/

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

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.

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...

I wonder why he didn't mention YUV.

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

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.

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.

It's black-box modeling of perception by tweaking inputs (light) and measuring outputs (human statements of how intense/smooth/whatever it looks)

IIRC the LAB color space was originally based off of empirical data from studies conducted on actual peoples' perception.

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

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.

"HCL is a cylindrical transformation of CIE Lab"

What is CIE Lab?

https://en.wikipedia.org/wiki/Lab_color_space

Reply on news.ycombinator.com