I myself implemented 4 colorize functions for that.
Common linear Blue -> Red. Linear Blue -> Red adjusted via Green for visibility.
Blue -> Yellow -> Red also linear. And of course Turbo from that blog..
jdonaldson7 hours ago
I also recommend Color Brewer, which is integrated already in a lot of visualization tools, and has great options for display variants and accessibility options : https://en.wikipedia.org/wiki/ColorBrewer
Please don't use rainbow-type palettes, as they generally have poor accessibility for colorblind individuals. With my red deficiency, the middle two colors in this palette look virtually identical.
Ancapistani1 hour ago
This is super interesting to me.
Is there another 12-color palette that allows you to easily distinguish between every color? If so, I'd love to see it.
I'd also appreciate if anyone who happens to read this who has a different variety of colorblindness - or who finds color palettes inaccessible for any reason - could share what colors in the 12-bit palette and any others that are suggested in this thread are problematic and why, that'd be awesome :)
My initial instinct is that finding 12 colors that are visually distinguishable for all users is likely impossible. That being the case, the ideal solution IMO is likely something like providing a dynamic option to change the palette (or even the representation!) and then choosing a default that the author is happy with.
mpetroff14 minutes ago
> My initial instinct is that finding 12 colors that are visually distinguishable for all users is likely impossible.
Without going to lightness extremes, I agree that this likely isn't possible, at least when trying to accommodate all three types of dichromacy and for small color patch sizes (like those typically used for line and scatter plots). For example, you could take the 10-color accessible palette from work I've published [1] and add black and bright yellow to get twelve colors, but the lightness extremes of adding these colors would result in significantly-different visual weights. Based on a validation survey I conducted, I think even ten colors is pushing the limit of what's reasonable when lightness extremes aren't used.
> could share what colors in the 12-bit palette...are problematic
#9d5 and #4d8 is the color pair I find particularly problematic.
If so... wow. That's not good at all; it's almost as hard to distinguish the minimum value from the maximum value as it is the two in the center.
mpetroff27 minutes ago
While not completely identical, it looks very similar (I also only have strong protanomaly, not complete protanopia, so I wouldn't expect it to look identical).
Color-vision deficiency simulations collapse colors along the confusion lines, but this can be done multiple ways. These different mapping will all look the same (and identical to the original) to a dichromat but will appear different, with different perceptual differences between colors, to a color-normal individual. Simulating in a way that accurately portrays perceived color distances is still an open research problem.
tethys1 hour ago
Fair point! My eyes are (mostly) fine, but even I would have a hard time telling these colors apart when used in the same chart.
I usually do very simple charts, using maybe 2 or 3 colors, and with this palette I feel the results are typically very pleasing, whichever colors I end up selecting.
See Fabio Crameri's colour maps for accessible yet pleasing schemes and gradients to accustom various vision impairments [0][1]. Ben Jann's collection also provides a valuable resource and inventory of recent and historic colour schemes included in different statistical packages [2].
Careful, this is really not good for folks who are color blind. In chromium devtools you can enable various color blind emulations in the device emulation menu. ctrl+shift+P -> "Protanopia"
Ancapistani59 minutes ago
Ohhh, that's a great tool that I didn't know existed. I've used GPU-based filters in the past for this.
For others - this panel is shown at the bottom, alongside the "Console" panel (not the "Console" tab at the top!) that's sometimes shown. You can open it by clicking the three vertical dots at the top right of the devtools panel, "More tools", then "Rendering".
The setting you're looking for is "Emulate vision deficiencies".
It's functionally very close to https://colorbrewer2.org, which has been online for more than 15 years. I think it's not a coincidence, and some credits wouldn't have hurt anyone...
Also, I have personally been using iWantHue to generate large palettes for more than 10 years now, and I'm still very happy about it:
https://medialab.github.io/iwanthue/
jjgreen5 hours ago
Strange that the SVG output is just a set of colour boxes, when SVG has a perfectly decent gradient format defined.
This will come in very handy for me. Thanks for working on this and putting out there.
smjburton7 hours ago
This is great, thank you for sharing. I need something like this for my current project I'm working on... Much easier than trying to build a color palette manually.
developer55025 hours ago
I like using https://coolors.co/ - press space to generate a new palette and lock in colours you like
Western05 hours ago
I need output:
* gnuplot pallete
* css for web page
dark-star6 hours ago
Definitely not colorblind-friendly (color contrast too low)
dleeftink6 hours ago
The default palette essentially is IBM's Color-blind safe[0], which does provide some 'safe' defaults. IBM's design guidelines provide some sound advice for color use too [1].
Hah, what a coincidence. I did small research today for heatmaps for my very simply graph lib for Ruby. I recommend this blog post:
https://research.google/blog/turbo-an-improved-rainbow-color...
I myself implemented 4 colorize functions for that. Common linear Blue -> Red. Linear Blue -> Red adjusted via Green for visibility. Blue -> Yellow -> Red also linear. And of course Turbo from that blog..
I also recommend Color Brewer, which is integrated already in a lot of visualization tools, and has great options for display variants and accessibility options : https://en.wikipedia.org/wiki/ColorBrewer
Whenever I need colors for a chart, I type "12 bit" in my address bar and pray my browser hasn't forgotten the URL: https://iamkate.com/data/12-bit-rainbow/
Please don't use rainbow-type palettes, as they generally have poor accessibility for colorblind individuals. With my red deficiency, the middle two colors in this palette look virtually identical.
This is super interesting to me.
Is there another 12-color palette that allows you to easily distinguish between every color? If so, I'd love to see it.
I'd also appreciate if anyone who happens to read this who has a different variety of colorblindness - or who finds color palettes inaccessible for any reason - could share what colors in the 12-bit palette and any others that are suggested in this thread are problematic and why, that'd be awesome :)
My initial instinct is that finding 12 colors that are visually distinguishable for all users is likely impossible. That being the case, the ideal solution IMO is likely something like providing a dynamic option to change the palette (or even the representation!) and then choosing a default that the author is happy with.
> My initial instinct is that finding 12 colors that are visually distinguishable for all users is likely impossible.
Without going to lightness extremes, I agree that this likely isn't possible, at least when trying to accommodate all three types of dichromacy and for small color patch sizes (like those typically used for line and scatter plots). For example, you could take the 10-color accessible palette from work I've published [1] and add black and bright yellow to get twelve colors, but the lightness extremes of adding these colors would result in significantly-different visual weights. Based on a validation survey I conducted, I think even ten colors is pushing the limit of what's reasonable when lightness extremes aren't used.
> could share what colors in the 12-bit palette...are problematic
#9d5 and #4d8 is the color pair I find particularly problematic.
[1] https://arxiv.org/abs/2107.02270
I understand there's no direct way to answer this, but does this image appear the same as the live page to you?
https://imgur.com/a/nZnr0BN
If so... wow. That's not good at all; it's almost as hard to distinguish the minimum value from the maximum value as it is the two in the center.
While not completely identical, it looks very similar (I also only have strong protanomaly, not complete protanopia, so I wouldn't expect it to look identical).
Color-vision deficiency simulations collapse colors along the confusion lines, but this can be done multiple ways. These different mapping will all look the same (and identical to the original) to a dichromat but will appear different, with different perceptual differences between colors, to a color-normal individual. Simulating in a way that accurately portrays perceived color distances is still an open research problem.
Fair point! My eyes are (mostly) fine, but even I would have a hard time telling these colors apart when used in the same chart.
I usually do very simple charts, using maybe 2 or 3 colors, and with this palette I feel the results are typically very pleasing, whichever colors I end up selecting.
Adding another link, here's the one I often use: https://flatuicolors.com
Those are very good colors!
See Fabio Crameri's colour maps for accessible yet pleasing schemes and gradients to accustom various vision impairments [0][1]. Ben Jann's collection also provides a valuable resource and inventory of recent and historic colour schemes included in different statistical packages [2].
[0]: https://www.fabiocrameri.ch/ws/alt-imgs/w800/f19552bb8a98e32...
[1]: https://www.fabiocrameri.ch/colourmaps/
[2]: https://repec.sowi.unibe.ch/stata/palettes/colors.html
Careful, this is really not good for folks who are color blind. In chromium devtools you can enable various color blind emulations in the device emulation menu. ctrl+shift+P -> "Protanopia"
Ohhh, that's a great tool that I didn't know existed. I've used GPU-based filters in the past for this.
For others - this panel is shown at the bottom, alongside the "Console" panel (not the "Console" tab at the top!) that's sometimes shown. You can open it by clicking the three vertical dots at the top right of the devtools panel, "More tools", then "Rendering".
The setting you're looking for is "Emulate vision deficiencies".
Related, the OG, with research behind it- https://colorbrewer2.org/.
It's functionally very close to https://colorbrewer2.org, which has been online for more than 15 years. I think it's not a coincidence, and some credits wouldn't have hurt anyone...
Also, I have personally been using iWantHue to generate large palettes for more than 10 years now, and I'm still very happy about it: https://medialab.github.io/iwanthue/
Strange that the SVG output is just a set of colour boxes, when SVG has a perfectly decent gradient format defined.
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/S...
Does using a range of hues generate colors that can be differentiated by those of us who are color blind?
I was just actually showing a colleague perceptually uniform color scales just today!
https://colorcet.com/
This will come in very handy for me. Thanks for working on this and putting out there.
This is great, thank you for sharing. I need something like this for my current project I'm working on... Much easier than trying to build a color palette manually.
I like using https://coolors.co/ - press space to generate a new palette and lock in colours you like
I need output: * gnuplot pallete * css for web page
Definitely not colorblind-friendly (color contrast too low)
The default palette essentially is IBM's Color-blind safe[0], which does provide some 'safe' defaults. IBM's design guidelines provide some sound advice for color use too [1].
[0]: https://davidmathlogic.com/colorblind/#:~:text=Three%20of%20...
[1]: https://www.ibm.com/design/language/color/