How to Avoid Equidistant HSV Colors (2011)

https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/

by Tomte • 6 years ago

81 24 6 years ago

tldr - there is a color space called CIELab that is made so that euclidean distances map to perceptual distances.

There is also a CIELCH colorspace that allow you to still work in the CIE colorspace but use familiar values of luminosity, chroma and hue. I created a library for Processing/Java that allows the user to define colors in CIELCH space [1].

[1] https://github.com/neilpanchal/Chroma

RandyRanderson• 6 years ago

This lib is fantastic - thanks!!

Daub4• 6 years ago

It is a distant relative of the Munsell color system, invented by Edwin Munsell. He painstakingly assembled it from showing human subjects pairs of identical colors, then gradually increasing their difference until they were perceived as difference. The so-called ‘barely perceptual difference’ approach. Color, when mapped in this manner, is an extremely un-even blob, not the neat globe people had assumed it to be.

HSV was invented by the graphics industry as an artist-friendly space. I sometimes use HSV in my teaching. It is useful for design students to see an image broken down in this way. My copy of Photoshop version 1 could actually work in HSV space. But it was soon discovered that though it is easy to navigate as a space, it is lousy for color adjustments of any kind.

hnick3• 6 years ago

The so-called ‘barely perceptual difference’ approach. Color, when mapped in this manner, is an extremely un-even blob, not the neat globe people had assumed it to be.

Has this been tried when presenting the colours randomly rather than continuously increasing in distance? I'm curious if the result would be different. Eyes (and visual processing in general) seems to be edited based on our own expectations and other factors.

waste_monk• 6 years ago

For instance, in the following HSL color scale the brightness step between the second and the third red appears much bigger than the step between the 3th and 4th color. Even worse, this effect seems to differ across different hues, as the comparison to the blue scale shows.

I honestly can't see what they're talking about in the example images. Is this a "some people are more visually sensitive than others" type thing, or is this the visual equivalent of audiophiles messing about with bespoke setups to try and get marginal improvements in sound quality?

aikinai• 6 years ago

The former; I would guess most people can see the difference. If not most, then still a very large number, more than the statistically insignificant number that would be able to differentiate gold plated cables or whatever.

Reelin• 6 years ago

The difference should be readily visible. Various aspects of visual sensitivity can certainly vary between people but I think it's far more likely that your monitor isn't very well calibrated or is possibly just of low quality.

In my case, the difference is barely visible on the profile I typically have loaded because I modified it to maximize brightness and text legibility at the expense of significant color accuracy.

Silhouette• 6 years ago

I think the claim that the difference in the first pair was much bigger was probably overstated.

Would I say the difference appeared bigger in that case? Yes.

But on a calibrated screen, as someone with no known colour vision deficiencies, and as someone who does a lot of design work including fine-tuning colour schemes, there is a clear step between each adjacent pair of reds on that scale to me, and the perceived differences between the steps aren't that big.

If I had to guess, I'd suggest that some people see the second red darker than it should be due to poor colour reproduction on their monitor, which would exaggerate the difference from second to third red.

hnick3• 6 years ago

I was curious if the surrounding colours influenced things so I cut out just the two pairs and presented them on a white screen. The first progression definitely looks like a bigger change to me like they said.

Putting it on a black background seemed to reduce the effect, but the same pairing still won.

Agentlien• 6 years ago

This is a recurring problem for me. I work as a graphics programmer and many papers in the field employ comparison screenshots to show the difference between techniques. Since I have a moderate case of colour blindness,I often can't tell the difference.

Daub4• 6 years ago

I just read the article. It nicely details the difference between physical lightness and perceptual brightness. For a demonstration of this, try opening a photo of colorful flowers in Photoshop. Compare a de-saturation in RBG with one in Lab (Adjustments/Hu Saturation). The result from the Lab desaturation will respect the perceptual differences of the hue of the flowers flowers.

ggm2• 6 years ago

I had a very interesting sequence of exchanges in MBONE about this problem, in the 1990s.

The problem was the use of colour in distributed editing systems like Van Jacobsens 'whiteboard'

(it was an exemplar tool we used in the Internet multicasting activity then)

and their projection of color values into greyscale monitors (a class of terminal which probably doesn't exist any more but at the time, there was a distinction between pixel quality and size and density in greyscale and colour. greyscale was finer but limited to .. shades of black and white)

We discussed perceptual colour differences, mapping into grey, the loss of information. Choosing a sequence of colours which were distinct but formed grey tones which were also distinct is .. hard.

im3w1l• 6 years ago

Choosing a sequence of colours which were distinct but formed grey tones which were also distinct is .. hard.

Start backwards? And then give them hues?

ggm2• 6 years ago

Not a bad approach. they also have to be visually satisfying choices in colour and you kind of want the rainbow.

ComputerGuru• 6 years ago

hsluv is a much easier way of doing this in 2020. It was recently covered in an article here on HN, too: https://news.ycombinator.com/item?id=22528760

hoseja• 6 years ago

Seems similar but different to `pastel distinct`[0], maybe it would be a nice addition.

[0] https://github.com/sharkdp/pastel

Buetol• 6 years ago

Looks like the link to the "I want HUE" tool is broken, here's the proper link: http://medialab.github.io/iwanthue/

azepoi2• 6 years ago

I'm impressed by the other mentioned picker, for HCL this time http://tristen.ca/hcl-picker/

This tool is also useful https://vis4.net/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,...

I have to mention this fantastic presentation on colormaps https://www.youtube.com/watch?v=xAoljeRJ3lU (A Better Default Colormap for Matplotlib, SciPy 2015, Nathaniel Smith and Stéfan van der Walt). It is about perceptually uniform colormaps. https://bids.github.io/colormap/

How to Avoid Equidistant HSV Colors (2011)

Related Stories