> rainbow palette for use in my data visualisations.
Indeed for her kind of data the rainbow palette works okay. But if you have to visualize more complex / denser data, beware of the pitfalls of the rainbow color palette. It is not always the best choice.
IBM did research back in the 90s on perceptually-based colormaps and how to best represent various types of data within the color dimensions of luminescence, saturation and hue [1]. For example, they found that,
(1) Hue was not a good dimension for encoding magnitude information, i.e. rainbow color maps are bad.
(2) The mechanisms in human vision responsible for high spatial frequency information processing are luminance channels. If the data to be represented have high spatial frequency, use a color map which has a strong luminance variation across the data range.
(3) For interval and ratio data, both luminance- and saturation-varying color maps should produce the effect of having equal steps in data value correspond to equal perceptual steps, but the first will be most effective for high spatial frequency data variations and the second will be most effective for low spatial frequency variations.
===
[1] the original link got removed from IBMs website. Back in the day it was under
A whole lot of work has been done more recently on "perceptually uniform" color palettes. See the Brewer color palette family, the "scientific colourmaps" by Crameri, and the Viridis color palette family, the latter of which was famously adopted by Matplotlib several years ago.
Note that most modern palettes are designed with various forms of color blindness in mind. For that purpose, they artificially restrict the range of colors, which in turn reduces the visual information they can carry for the vast majority of people who have normal color vision.
I'd be super interested to see a study that examines how color blindness-aware design affects people without color blindness. Such design often completely avoids red hues, which are of huge importance as visual cues to normally sighted people. It's hard to imagine this doesn't have a negative impact somehow, yet I've never seen this discussed anywhere.
>Indeed for her kind of data the rainbow palette works okay. But if you have to visualize more complex / denser data, beware of the pitfalls of the rainbow color palette. It is not always the best choice.
There is already a trap in this palette, the first color looks awfully like the last. It's fine if you just want a palette for a bunch of lines but using it for heatmap could be a bit misleading in edge cases
> (1) Hue was not a good dimension for encoding magnitude information, i.e. rainbow color maps are bad.
Your inference doesnt follow from the first point. Hue is bad for magnitude because you dont see a different hue as 'more' or 'less' just 'different'. Hue is great for representing difference without defining one as a focus or preference over the other.
This is a whole area of research (as you probably know). I personally only like HSV colourmaps for visualisations of phase, as it has no boundaries at the edges and therefore when you wrap over 2π again you don't get a hard discontinuity. Often you're not actually interested in what the "number" is, but how quickly it is cycling – something that it gets across quite well.
I agree that trying to use hue for encoding magnatude information is not great, but man, how many times have I given up on someone's infographic that decided to use four different shades of blue and purple you can't tell apart when the markers are only eight or sixteen pixels on the screen.
I should hope the 12-bit rainbow palette would be adopted for those kinds of visualizations.
I have a pet theory that certain high spatial frequencies bleed into being perceived a colors anyway. The reason being that the red, green, and blue cones in the retina each have a different amount of space between them but are otherwise organized in the same pattern. Thus if the brain sees something with the same spacing as the blue cones, its going to assume that's caused by it being a blue object (rather than a black/white object which happened to have the same spatial freq as the blue cells). You seem to know the literature here, is there anything validating or invalidating my pet theory?
I've never noticed such happening by eyes, but I've definitely seen distant ocean reflections (tiny randomly-shifting specks of light) being misinterpreted as colors by Bayer matrix camera sensors.
What is often needed in visualizations is showing several parameters next to each other. Think not color maps that showvariation of one value, like a heat map, but line or bar charts, or area maps with various pars marked.
I really like this, but FYI I do struggle to tell the difference between the first and last colour. There are probably others out there with this problem.
This test has as much to do with the monitor's gamma correction and color fidelity as anything else, IMO. Whenever I was unsure of the order, dragging the window over to a different monitor helped immensely. I was able to get a 0 by doing that, which I don't think I could have done on either monitor by itself.
Not really, they are just similar if you put it next to eachother (both are essentially shades of purple/violet) and as they are at different ends of scale it could get confusing if used as heatmap
> Attention! Please rotate your phone or view this test on a larger device for best results.
It doesn’t even let me dismiss that message. Who does this? Intentionally breaking your whole site because it might not look good. (This is an iPhone 14 max, so already a pretty big screen, and I’m in portrait orientation.)
The Dutch artist Peter Struycken has made paintings with various rainbow palette, not using some kind of computer based method (although he is a prominent computer artist), but just his eyes. See: https://www.pstruycken.nl/EnS20.html (A computer program was used to design of the pattern being used in the paintings.)
I'm a color nerd and I love seeing how even with such an old concept (RGB is 162 years old), people are still interested in finding opportunities to innovate. I love this palette and will be adopting it. Thanks for sharing.
Eh, RGB is a particular abstraction which is about that old. The human eye is way weirder even before you throw in all the luminosity stuff, and by the time the brain actually computes the color data? Forget it.
What is the advantage of restricting the palette to a color depth of 12 bits, when every display device the colors are likely to be shown on supports much higher color depth, and printing yields much wider color ranges as well?
The only hint given in the article is
> so each colour requires only four characters when specified as a hexadecimal colour code in a CSS or SVG file
but surely this can't be the answer? Such a minor technical detail doesn't seem worth deviating even slightly from the "ideal" HCL values.
I think I understand why. I think the primary reason is that it's minimalist and very much empathise with such endeavours.
There are several advantages to such minimalism: easier to read and write in code, fewer bytes to store and transfer, and perhaps also satisfying one's ocd.
Let me flip this on you: why use 6 characters to specify colours when 3 will do fine? What exactly would your "ideal" HCL values be?
The post specifically mentions that "slight changes" to the constructed HCL values "must be made" in order to conform to the 12-bit color depth. So the author first derived certain values from theoretical/aesthetic considerations, then modified them for the sole purpose of fitting into 12 bits. This doesn't make sense to me except in very, very niche cases where saving 3 bytes (or even less, considering compression) actually matters more than visual quality.
This isn't 12-bit color depth. It's a 12 color palette, so its color depth is x if 2^x=12 or
ln(12)
------
ln(2)
Color depth (or bit depth) is the number of bits used to indicate the color of a single pixel. So 24-bit color depth produces 16,777,216 colors, 12-bit color depth produces 4096 colors, 8-bit color depth produces 256 colors, and 4-bit color depth produces 16 colors. A 12 color palette is 3.58496250…-bit color depth.
This was cool to read, because it indirectly taught me to understand HSV.
I've always had trouble understanding the colour spaces other than RGB. After reading that article, I understood a little more about the luminance due to the greyscale used. From there I searched for "rgb vs cmyk vs hsv" and found this: https://www.geeksforgeeks.org/difference-between-rgb-cmyk-hs... (with annoying "sign up with google" popovers)
So, if you're out there wondering if you should write that visualizer that you had a weird idea for, please, please do so. It may help some random internet person understand something :)
Readit News
Indeed for her kind of data the rainbow palette works okay. But if you have to visualize more complex / denser data, beware of the pitfalls of the rainbow color palette. It is not always the best choice.
IBM did research back in the 90s on perceptually-based colormaps and how to best represent various types of data within the color dimensions of luminescence, saturation and hue [1]. For example, they found that,
(1) Hue was not a good dimension for encoding magnitude information, i.e. rainbow color maps are bad.
(2) The mechanisms in human vision responsible for high spatial frequency information processing are luminance channels. If the data to be represented have high spatial frequency, use a color map which has a strong luminance variation across the data range.
(3) For interval and ratio data, both luminance- and saturation-varying color maps should produce the effect of having equal steps in data value correspond to equal perceptual steps, but the first will be most effective for high spatial frequency data variations and the second will be most effective for low spatial frequency variations.
===
[1] the original link got removed from IBMs website. Back in the day it was under
https://www.research.ibm.com/people/l/lloydt/color/color.HTM
A pdf copy is here:
https://github.com/frankMilde/interesting-reads/blob/master/...
I'd be super interested to see a study that examines how color blindness-aware design affects people without color blindness. Such design often completely avoids red hues, which are of huge importance as visual cues to normally sighted people. It's hard to imagine this doesn't have a negative impact somehow, yet I've never seen this discussed anywhere.
There is already a trap in this palette, the first color looks awfully like the last. It's fine if you just want a palette for a bunch of lines but using it for heatmap could be a bit misleading in edge cases
Your inference doesnt follow from the first point. Hue is bad for magnitude because you dont see a different hue as 'more' or 'less' just 'different'. Hue is great for representing difference without defining one as a focus or preference over the other.
I should hope the 12-bit rainbow palette would be adopted for those kinds of visualizations.
It’s just that you can do it with a hue and a non zero saturation if it suits the style you are looking for.
Plus sometimes you have more than on me set of data mixed and it’s useful to be able to distinguish both by using multiple colours.
> Best Score for your Gender -69420
> Worst Score for your Gender 1000000000
Someone doesn't sanitize their inputs?
I mean, I can see _some_ difference but they are very very close, and I am not sure I could distinguish them in, say, a line plot.
It doesn’t even let me dismiss that message. Who does this? Intentionally breaking your whole site because it might not look good. (This is an iPhone 14 max, so already a pretty big screen, and I’m in portrait orientation.)
I know for sure I cannot complete a full ishihara plate test though so this one is on me.
He has created many colour palettes for specific buildings and applications. See: https://www.pstruycken.nl/EnDyn.html?Li,tag=q&w
The only hint given in the article is
> so each colour requires only four characters when specified as a hexadecimal colour code in a CSS or SVG file
but surely this can't be the answer? Such a minor technical detail doesn't seem worth deviating even slightly from the "ideal" HCL values.
There are several advantages to such minimalism: easier to read and write in code, fewer bytes to store and transfer, and perhaps also satisfying one's ocd.
Let me flip this on you: why use 6 characters to specify colours when 3 will do fine? What exactly would your "ideal" HCL values be?
The post specifically mentions that "slight changes" to the constructed HCL values "must be made" in order to conform to the 12-bit color depth. So the author first derived certain values from theoretical/aesthetic considerations, then modified them for the sole purpose of fitting into 12 bits. This doesn't make sense to me except in very, very niche cases where saving 3 bytes (or even less, considering compression) actually matters more than visual quality.
>> The palette uses a 12-bit colour depth
It is the author that has misunderstood.[1]
[1] https://en.wikipedia.org/wiki/Color_depth
I've always had trouble understanding the colour spaces other than RGB. After reading that article, I understood a little more about the luminance due to the greyscale used. From there I searched for "rgb vs cmyk vs hsv" and found this: https://www.geeksforgeeks.org/difference-between-rgb-cmyk-hs... (with annoying "sign up with google" popovers)
From there I wondered if there was a visualizer for the HSV cone, and yes there is! https://color.lukas-stratmann.com/color-systems/hsv.html
So, if you're out there wondering if you should write that visualizer that you had a weird idea for, please, please do so. It may help some random internet person understand something :)
For whatever reason my brain considers it important enough I still remember $dff180 is the first color palette entry address. :-)
Amiga owners will also remember $bfe001, $dff01c, $dff09a... but mainly $4 :P