[HN Gopher] Data Viz Color Palette Generator (For Charts and Das...
___________________________________________________________________
Data Viz Color Palette Generator (For Charts and Dashboards)
Author : gregwolanski
Score : 109 points
Date : 2025-09-25 13:13 UTC (9 hours ago)
(HTM) web link (www.learnui.design)
(TXT) w3m dump (www.learnui.design)
| smjburton wrote:
| 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.
| jdonaldson wrote:
| 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
| xipho wrote:
| Related, the OG, with research behind it-
| https://colorbrewer2.org/.
| jacomyal wrote:
| 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/
| dleeftink wrote:
| 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
| dark-star wrote:
| Definitely not colorblind-friendly (color contrast too low)
| dleeftink wrote:
| 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/
| tethys wrote:
| 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/
| PythagoRascal wrote:
| Adding another link, here's the one I often use:
| https://flatuicolors.com
| a1o wrote:
| Those are very good colors!
| mpetroff wrote:
| 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.
| tethys wrote:
| 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.
| Ancapistani wrote:
| 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.
| mpetroff wrote:
| > 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
| Ancapistani wrote:
| 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.
| mpetroff wrote:
| 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.
| Western0 wrote:
| I need output: * gnuplot pallete * css for web page
| developer5502 wrote:
| I like using https://coolors.co/ - press space to generate a new
| palette and lock in colours you like
| jjgreen wrote:
| 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...
| shash wrote:
| I was just actually showing a colleague perceptually uniform
| color scales just today!
|
| https://colorcet.com/
| clintmcmahon wrote:
| This will come in very handy for me. Thanks for working on this
| and putting out there.
| divbzero wrote:
| Does using a range of hues generate colors that can be
| differentiated by those of us who are color blind?
| cush wrote:
| 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"
| Ancapistani wrote:
| 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".
| Borg3 wrote:
| 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..
___________________________________________________________________
(page generated 2025-09-25 23:01 UTC)