Data Viz Color Palette Generator (for Charts and Dashboards)
Posted3 months agoActive3 months ago
learnui.designTechstory
supportivepositive
Debate
40/100
Data VisualizationColor PaletteAccessibility
Key topics
Data Visualization
Color Palette
Accessibility
A data visualization color palette generator tool is shared, sparking discussion on its usefulness, accessibility, and comparison to other similar tools.
Snapshot generated from the HN discussion
Discussion Activity
Active discussionFirst comment
56m
Peak period
18
0-6h
Avg / period
4.8
Comment distribution29 data points
Loading chart...
Based on 29 loaded comments
Key moments
- 01Story posted
Sep 25, 2025 at 9:13 AM EDT
3 months ago
Step 01 - 02First comment
Sep 25, 2025 at 10:09 AM EDT
56m after posting
Step 02 - 03Peak activity
18 comments in 0-6h
Hottest window of the conversation
Step 03 - 04Latest activity
Sep 29, 2025 at 2:25 PM EDT
3 months ago
Step 04
Generating AI Summary...
Analyzing up to 500 comments to identify key contributors and discussion patterns
ID: 45372286Type: storyLast synced: 11/20/2025, 5:54:29 PM
Want the full context?
Jump to the original sources
Read the primary article or dive into the live Hacker News thread when you're ready.
[0]: https://davidmathlogic.com/colorblind/#:~:text=Three%20of%20...
[1]: https://www.ibm.com/design/language/color/
As someone with slight colorblindness, I can tell you that the colors #58508d and #bc5090 are too close to each other and very hard to distinguish
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.
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
This is far from my area of expertise, but I’ve always been interested in accessibility on the web in particular.
Thank you for responding, I’ll probably be in touch :)
[0]: https://observablehq.com/@tomshanley/cheysson-color-palettes
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.
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.
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.
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".
https://colorcet.com/
[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
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/
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/S...
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..