24 ms·

Common color mistakes and how to avoid them

844 points by hunvreus 6y ago

hprotagonist 6y ago
Pick not-Jet and perceptually uniform we’re off to a great start.
edfletcher_t137 6y ago
This is excellent thank you. As a non-designer who very often struggles with color palette decisions, I feel this will become an oft-used bookmark.
roland35 6y ago
I think the colors look nice in these visualizations, but I do believe it is possible to drift so far in making visualizations pretty to the detriment of being clear! First of all, one advantage of highly distinct colors which is discouraged in this article is that.. the colors are more distinct across all sorts of mediums. Sometimes you don't know if your chart will be printed off on a cheap inkjet and showed to the CEO, or blurrily presented on a zoom call over poor WiFi to someone who is colorblind. I think the push to usability should consider these types of scenarios.
- deleted 6y ago
  [deleted]
- m12k 6y ago
  I'd say if you care about consistency across media, try to make your colors have different luminosity, so they can still be distinguished somewhat when someone invariably prints them on a monochrome printer. Also, pure yellow (and to some extent pure green) tends to end up nearly invisible on a lot of color inkjet printers, so tweaking the luminosity is also important there. Overall I think most of the tips this article advocates will also help across various mediums.
  - pbhjpbhj 6y ago
    For data display luminosity can skew the impression of which data dominates. That's a reason not to use luminosity changes IMO. However, if you want to convince people you can skew their impression of the data without technically lying ...
    - deleted 6y ago
      [deleted]
- crazygringo 6y ago
  > one advantage of highly distinct colors which is discouraged in this article is that.. the colors are more distinct across all sorts of mediums Actually this is precisely the opposite. If I understand you correctly, you're saying that the advice in the article -- to avoid super-saturated colors, super-bright colors, or colors evenly spaced around the color wheel -- is bad, because all these help increase distinctiveness. But the reality is that when translating across mediums, like inkjet or black and white, these have the problem of blowing out, where light colors turn white and dark colors turn black. And with colorblindness, you encounter the problem of radically different colors becoming indistinguishable. Whereas if you stick to less contrast but still maintain meaningful differences in both hue and lightness, it translates well across mediums. Shades don't get blown out, and levels of lightness remain distinguishable. And as for colorblindness, the article specifically recommends using warm colors vs. blue precisely for this reason: "And they are accessible: colorblind people can easily distinguish blue and orange/red from each other." This is why you don't want to use the whole range of distinctive colors, like red, yellow, green, blue, purple all together.
- deleted 6y ago
  [deleted]
- MattRix 6y ago
  The article talks specifically about colorblindness and how you should look at your visualizations in greyscale to ensure the colours are still distinct.
- RobertKerans 6y ago
  The article is [extremely] explicitly not discouraging distinct colours. If you think the opposite to the article is true, then I'm not sure what you're advocating, because it isn't distinct colours. The article does talk at length about how to adjust for aesthetics, but at no point does it skimp on also ensuring distinctness.
austinhutch 6y ago
Great article! Another nice resource for picking colors in data visualizations is from Stephen Few: http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf http://www.perceptualedge.com/articles/visual_business_intel...
- vharuck 6y ago
  My go-to has been Color Brewer: https://colorbrewer2.org https://colorbrewer2.org But this article will help me make my own palettes for specific goals. A lot of categories have "common sense" colors (e.g., blues for male, pinks for female). Using those makes it easier for people to read charts without repeatedly looking at a legend or annotation. But I'd like to have the colors show multiple categorical variables. It should be just as easy to identify and compare white men versus white woman as it is to compare white men versus black men.
- davidivadavid 6y ago
  Can also recommend his book, Show me the numbers. A nice companion when you're done with Tufte.
fbelzile 6y ago
Very well written and surprisingly practical information in here. I've used Paletton before when trying to make a good colour scheme but I've never been impressed with the results. I guess I was using it wrong: > In the video above, I used the color tool Paletton to start with a tetradic harmony and then decrease the distance. Note how more beautiful the color combinations become. > Our colors are opposite each other on the color wheel, so they’re clearly complementary. Yay! But they’re also unusable: The two oranges are way too similar. And everything looks so... bright. There’s where we need to change the saturation and lightness.
kumarvvr 6y ago
Awesome article. Colors make or break everything visual. This guide is also very useful for web sites. Edit : Perhaps someone can create a color selector that incorporates her recommendations, like avoiding primary or saturated colors, avoiding certain colors, etc.
tibbar 6y ago
Great stuff. My team recently had to create visualizations using a very large number of colors (dozens, plus some gradients), because we were representing many distinct values in a number of dimensions. It was very difficult to make it work, but considerations like the ones here helped a lot.
ChrisMarshallNY 6y ago
Quite common sense, but not a new issue. "Color Set" books have been sold for decades, and there's a number of sites (I have a few bookmarked [0]-[4]), that have great JS implementations. But it's a great explanation. I think this is something that everyone should know, so the more material out there, the better. [0] W3Schools is not everyone's cup of tea, but they have a great section on colors: https://www.w3schools.com/colors https://www.w3schools.com/colors [1] Colorblind design is important. This helps with that: https://www.toptal.com/designers/colorfilter https://www.toptal.com/designers/colorfilter [2] I've found this tool useful: http://paletton.com http://paletton.com [3] "Clickbaity," but also fairly useful: https://www.colorcombos.com https://www.colorcombos.com [4] This is a cool tool: https://www.colorbox.io https://www.colorbox.io
- scns 6y ago
  colorhexa.com is my goto for colors. Shows how colors are perceived by colour blind and much more.
  - ChrisMarshallNY 6y ago
    Thanks! That's a useful site!
- abhgh 6y ago
  Thank you for the links! I find Adobe Color quite helpful to find a palette for visualization [1]. Its been around for years now, although I think the original website was called Adobe Kuler. For categorical colormaps, I have found the python Glasbey [2] library helpful. Note: the first run can be slow. [1] https://color.adobe.com/explore https://color.adobe.com/explore For popular themes filter using "View" (right side of the screen under the main banner) and pick "Color Themes" => "Most Popular" [2] https://github.com/taketwo/glasbey https://github.com/taketwo/glasbey
- OJFord 6y ago
  > [1] Colorblind design is important. This helps with that: https://www.toptal.com/designers/colorfilter https://www.toptal.com/designers/colorfilter I'm colour-blind; I've never known exactly what type (for sure red/green). I can tell the difference between original/filtered at that link for both protanopia and deutanopia, though they are close. Perhaps that means I have both/a mixture. (They're described there as being anomalous red vs. green cones, so it seems reasonable that I could have anomalous both.) When it comes to 'colour-blind mode' settings I set my mild annoyance (could you not just pick a friendly default? It's not like I can't see any reds (for example) at all) aside and just pick whichever type is most visually pleasing or easily distinguishable.
cullinap 6y ago
This is a great article.
andrepd 6y ago
Eh, the article title should actually be just "how to pick more beautiful colours" period, since it talks very little about actually choosing colours for data visualisation, that is, how to choose a visual presentation that helps make sense of the data you're showing. Example: https://colorbrewer2.org/ https://colorbrewer2.org/
- gerbler 6y ago
  I completely agree - this is almost entirely around visual presentation (which is subjective) and not around practical limitations for color choice. I'm a big fan of colorbrewer to help make these choices for me!
- jeffbee 6y ago
  For visualizations you will probably reach for a convenient palette already provided by your software, like https://ggplot2.tidyverse.org/reference/scale_brewer.html https://ggplot2.tidyverse.org/reference/scale_brewer.html or https://observablehq.com/@d3/color-schemes https://observablehq.com/@d3/color-schemes.
- JadeNB 6y ago
  For some reason the HN title, which was originally the actual title, has been changed to "Common color mistakes and how to avoid them", which seems weird. The actual title ("How to pick more beautiful colors for your data visualizations") doesn't seem clickbait-y, so why take the subtitle instead?
trollied 6y ago
You need to be really careful with picking colours. In a previous role I created some reports & associated graphs for the CEO. I was really pleased with the visual representations of the data. He wasn't. He's colour blind.
umvi 6y ago
> It will look more professional – and therefore more trustworthy – when it only uses a few hues and their neighbors This sentence rubs me the wrong way for some reason but can't seem to articulate why. Maybe because I feel like in an ideal world, trustworthiness of information should not be coupled to how slick its presentation is.
- lifeisstillgood 6y ago
  I have always felt that a polished presentation shows (heuristic) that the author has got past the poring of trying to work out what they wanted to say and then gotten to the point of making the visuals follow their theme - in other words it shows they have a clear idea of what they wanted to say and have had suffice t time left over to work the presentation. I am reminded a bit of a jeff below story and a kissinger story.
  - KineticLensman 6y ago
    > a polished presentation shows (heuristic) that the author has got past the poring of trying to work out what they wanted to say Yes, although equally sometimes polish can draw attention away from a lack of substantive content
    - bigyikes 6y ago
      If I've done my job right, the visuals are beautiful and also the least important part of my presentation.
  - srtjstjsj 6y ago
    It's also possible they skipped over trying to work out what they want to say, or more likely and worse, they know what they want to say but they skipped over the work of collecting good data that supports what they are trying to say.
  - msla 6y ago
    Polish is too easy to copy. You can copy CSS and page layout directly these days.
Brajeshwar 6y ago
My friend has a tool that we often use - https://colorcolor.in https://colorcolor.in
tomrod 6y ago
I think this article is great. I don't like to be contrarian; however, I'm going to nitpick two small items. [1] The color blind focus is red-green in the descriptions. The author acknowledges other forms of color blindness, and I would recommend more emphasis outside of red-green. [2] The tradeoff of visualizations is the visualizer guiding the narrative discussion and the audience wanting to triangulate additional information based off the visual. I have worked in organizations where the piechart (leading the "Avoid bright, saturated colors" section) would be reamed since there isn't enough visual difference between Laos and Japan. Especially in instances like line charts where this visualization methodology is used. Beyond that, I felt like this was a well-written article on the subject.
- tsimionescu 6y ago
  Regarding nitpick 2, all of the blue colors are identical between the two charts, I think the only point that chart makes is about the yellow/ochre(?) for the USA slice. However, I absolutely agree that there is no way for me to read that chart, other than looking at the order of the blue slices (they are in the same order clockwise as the legend). I think one additional factor that should be considered when choosing colors specifically for presentations is "will the speaker be able to describe the color of one particular item based on its color, in terms the audience will understand?" For example, if you have to say "Japan is the ochre line" or "people 45 or older are the vermillion line, while people 20 or younger are the carmine line", that may be a problem in some circles, even if the two colors are easy to distinguish visually. This is likely not a problem when you have the option of saying "the darker red" vs "the ligher red", but if you start having more versions of the same general hue, you may quickly run out of words.
allenu 6y ago
This is great practical advice! As a non-designer, I’ve found it hard to find good, succinct resources on color theory that actually gets to ground-level suggestions like this. Well done to the author.
kuon 6y ago
HSLuv has helped me a lot in creating color scheme.
hansvm 6y ago
The author touched on colorblindness, but I think it's important to point out that: (1) It can be a fair chunk of your audience -- 1/10 men are colorblind in some locales. (2) There are many flavors of colorblindness. Tools like https://www.color-blindness.com/coblis-color-blindness-simulator/ https://www.color-blindness.com/coblis-color-blindness-simul... are helpful to make sure your palette works for most of them. As a practical matter, adjusting some parameter like texture in addition to hue is helpful. If you adjust lightness or saturation it'll serve the dual purpose of making your charts understandable when printed in black-and-white.
- Chris_Newton 6y ago
  (2) There are many flavors of colorblindness. Tools like https://www.color-blindness.com/coblis-color-blindness-simul.. https://www.color-blindness.com/coblis-color-blindness-simul.... are helpful to make sure your palette works for most of them. For those doing web work, Chrome has a helpful way to simulate some of the most common vision deficiencies in its developer tools. From the menu, open the More tools → Rendering panel, then down at the bottom there is a setting called “Emulate vision deficiencies”. It can do blurred vision as well as several types of colour blindness.
  - mpetroff 6y ago
    Adding to this, the Chrome (83+) and Firefox (81+) developer tools both do a reasonable job at the simulation, using the method of Machado et al. (2009) [1]. Unfortunately, the linked to simulator, like many of the online simulators, does a very poor job. When simulating protanopia, reds should appear darker, due the lack of L cones. However, many simulators incorrectly display red as bright green instead. I've also written a color picker that uses the Machado et al. method to enforce CAM02-UCS minimum perceptual distance for normal vision and color vision deficiency [2]. [1] https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation... [2] https://colorcyclepicker.mpetroff.net/ https://colorcyclepicker.mpetroff.net/
    - Chris_Newton 6y ago
rivo 6y ago
For a visualization project, I needed to be able to automatically generate a visually pleasing colour palette. Customers would provide one or more base colours (e.g. based on their corporate design rules) and the generated palette should then complement those base colours. So it didn't help to manually pick those colours in advance because they may not play well with the base colours. If you find yourself in a similar situation, I wrote a blog post on how such a palette can be calculated: https://rentafounder.com/generating-colour-palettes-for-charts/ https://rentafounder.com/generating-colour-palettes-for-char... The algorithm basically picks colours one by one, each being the most distant colour to all previous colours within the same saturation plane, all in CIE94 space. It ended up working quite well.
mihaaly 6y ago
I have color vision deficiency, like other 1 in 12 male. Even healthy male will not appreciate subtle color variations as far as I heard. Putting so much effort into 'pretty' and subtle colors to aid understanding will be counterproductive! Focus on other means if understanding the message is dear for you.
- Fnoord 6y ago
  What is the name of this specific deficiency? I'm curious about it, given you state the rarity of 1 in 12 male (which equals to ~4% of population).
  - mihaaly 6y ago
    "red-green" colour vision deficiency https://www.nhs.uk/conditions/colour-vision-deficiency/ https://www.nhs.uk/conditions/colour-vision-deficiency/ apparently there are other types in addition
mathgenius 6y ago
I'm very interested, but also skeptical. How do I know this isn't just fashion ? I would be more convinced if this was backed up by scientific studies, or even just showed examples more than a few years old. What were they doing in the 1960's ? People have done studies showing that fonts with serif's increase comprehension (at least in printed form) of words. Have similar studies been done with colours? Otherwise this article could be complete bs written by someone with a fetish for pastels. Five years from now this same person could be writing about how colours need to have more zing, and reversing all these "not ideal / better" diagrams. Remember when webdesigners went crazy using low-contrast fonts that were barely readable ?
- bjt 6y ago
  Exactly the point I came to make. In a blog about data, I would like to see color recommendations backed by research and data, not just the author's aesthetic preferences.
- Daub 6y ago
  The data is indeed pretty thin. I should know, I have looked for it when I was doing my own research on colour use in art. One interesting point... the utility of complementary pairs has a long history. Leonardo Da Vinci was writing about them 600 years ago, and this was before the colour wheel was defined by Isaac Newton.
- watwut 6y ago
  It is art and design. What she is describing is basically super simplified state of art related to colors in out culture and pretty stable. It is simplified for non-designers, but pretty much similar to what they teach when they teach you classical drawing. Fashion is significantly more limited and changes more often. Not that these basics can not change, but fashion refers to something still less stable.
- parksy 6y ago
  I only skimmed the abstract and this is the first thing I found but it looks like there's a field of research around colour and its impact on attention, arousal, memory, learning, etc. Maybe some of these references are a starting point, idk. (warning -PDF link) https://scholarworks.umass.edu/cgi/viewcontent.cgi?article=1487&context=refereed https://scholarworks.umass.edu/cgi/viewcontent.cgi?article=1...
jacobolus 6y ago
> The green ⬤ is…can you even call it a green ⬤? Nadieh’s questioned green is much closer to “unique green” (a typical observer wouldn’t think it looked partly blue or yellow)† than the CSS color “green” (based on the display’s “G” primary), which is shifted way toward yellow and should properly be called “yellowish green” or the like. It’s also much less colorful (the hues would be easier to compare if both had the same colorfulness). Likewise Nadieh’s red closer to unique red (and much less colorful) than the RGB “R” primary, which should really be called “orangish red”. > Avoid pure colors All three of the colors in the “better” picture are close to unique hues (yellow, blue, green). All three of the colors in the “not ideal” category are based on the display’s primaries (“orangish red” R, “purplish blue” B, “yellowish green” G), not at all close to “pure”. †: Unique hues vary from person to person, and unique green in particular has wide inter-observer variability. * * * The extremely poor naming of CSS/HTML colors and the rather arbitrary constraints imposed by 3-primary RGB emissive displays and inadequate/misleading graphical tools for picking colors have seriously skewed many people’s color concepts. To restate the main idea from this article: don’t use overly intense colors. Stay away from CSS named colors, because they are based on the furthest extremes of the display’s gamut, and are overly colorful.
phosphophyllite 6y ago
Why she uses "NOT IDEAL" for BAD examples, is this some kind of fancy-talk?
renewiltord 6y ago
Very cool article. I usually just use Kuler and pick out an option but that's limiting if you're trying to make it fit in the palette of something that already exists. The justifications and actions suggested are pretty good here.
msla 6y ago
This sounds like someone's personal opinions with, admittedly, a certain amount of verifiable information thrown in. Is this person a known designer? How seriously should we take their personal opinion?
blackearl 6y ago
It seems like most of these are just "use pastels"
- MattRix 6y ago
  You might need to read the article again if that's all you got out of it.
  - blackearl 6y ago
    3-7 are "use pastels"
samch93 6y ago
For all things related to color in data visualization, I can fully recommend the R-package colorspace. For example, the package features colorblind friendly palettes and also the possibility to emulate different forms of color vision deficieny. See the paper on https://arxiv.org/pdf/1903.06490.pdf https://arxiv.org/pdf/1903.06490.pdf and the webpage of the project https://colorspace.r-forge.r-project.org/index.html https://colorspace.r-forge.r-project.org/index.html
kstenerud 6y ago
"In the video above, I used the color tool Paletton to start with a tetradic harmony and then decrease the distance. Note how more beautiful the color combinations become." Uhhh... no, I don't get how the end is more "beautiful". How do you determine what is a beautiful color combination, and what is not?
cjohnson318 6y ago
> It’s fascinating to see how desaturated many colors are around us! I do a lot of watercolor, and it truly is amazing how much of our world is some shade of mud, and how far you can get with a couple of muddy pigments. Sargent did a lot of watercolor in sketches in Venice with just ultramarine, cerulean, raw sienna, burnt sienna, and a tube of white. James Gurney gets a lot of mileage out of the "six-pack" white, black, raw umber, yellow ochre, venetian red, and cobalt.
adontz 6y ago
Time had shown I have no designer talent and such articles always make me sad and angry. The tragedy is that I can actually recognize a good design, but cannot produce one. To me these articles are like showing paralyzed man detailed physical explanation of walking, Boston Dynamics' robots, other people. Very informational and absolutely not helpful. Probably some designers looking at software development tutorials feel the same.
- azinman2 6y ago
  Which is why people specialize and work in teams. Sometimes even being made aware of the challenges can allow someone to realize they should ask for help and not produce crap-tastic work without realizing it.
  - adontz 6y ago
    Yeah, but like taking an HTML/CSS template and replacing a few standard colors with new ones should not that challenging? Or should it?
    - azinman2 6y ago
      You have to know what to replace it with. Few have a gift for color aesthetically, and then to add on functional requirements makes that even harder.
- heja2009 6y ago
  She gives very good advice for us non-designers though use color templates. They are available as book or webpage and by trying out just a handful that seem to fit your needs you can quickly get to a reasonably good design. It works for me at least. https://blog.datawrapper.de/colorguide/ https://blog.datawrapper.de/colorguide/
AkelaA 6y ago
I can't help but notice that many of the "non ideal" examples are pretty much identical to the colors used by companies like Google: https://blog.datawrapper.de/img/full-200805_goodcolors28.png https://blog.datawrapper.de/img/full-200805_goodcolors28.png. Apple is another company that's not afraid to use extremely bold, saturated colors in their UI designs: https://developer.apple.com/design/human-interface-guidelines/ios/images/colorBlindness_fullColor_2x.png https://developer.apple.com/design/human-interface-guideline... - in fact the colors chosen in that UI goes against a large amount of the advice found on this article, that green to lime gradient is pretty much 100% saturated for example, with a background that is absolute #000000 black. The main theme of this article is to try to use complementary colors that aren't overly saturated or "pure", which is decent enough advice most of the time, but I feel that in an attempt to find color schemes that are more "professional looking", the author has used colors that come across as overly staid for most applications - navy blues and olive greens that are more associated with serious banking institutions then anything else. Which I guess is fine for infographics that need to display a level of trust and seriousness, but maybe not so much for a mobile app or social network that wishes to put on a more playful, friendlier face.
- saagarjha 6y ago
  Apple's charts are meant to pop out, though; they serve a very different purpose than a graph in an article about energy consumption in Cambodia. It seems to me that if you're using color just for the sake of distinguishing things then you want to make them more muted, and if you are trying to draw the eye towards something, or give it personality, you go towards more vibrant hues.
  - TheOtherHobbes 6y ago
    Which is a very relevant point that should have been included in the article. There's also the gender difference. Men are more likely to be colour blind, women are more likely to have better colour differentiation and also to have a subtly different colour hue perception. So women see subtle distinctions with more clarity, and see hues biased slightly away from red compared to men, with green being seen as slightly more yellow. https://www.psychologytoday.com/us/blog/brain-babble/201504/when-it-comes-color-men-women-arent-seeing-eye-eye https://www.psychologytoday.com/us/blog/brain-babble/201504/... A lot of the work in this area - including ColorBrewer - is by Cynthia Brewer, and I suspect that men and women don't just use colours and textures in a slightly different way, but are also attracted, convinced, and reassured by different colours and textures. This absolutely makes a difference if you're working on a site that is gender-specific. Using a generic low-saturation palette is going to destroy the appeal of a site with predominantly male customers, while a black/brown/grey/red site will fail with women. I've always been impressed by Apple's ability to make distinctive designs that bridge the gap and manage to be gender neutral. While most laptops are black and angular, an MBP appears to have no gender distinction of any kind. This is a very cool trick, and much harder to do than it looks. The point being the target audience matters, and colour is a hard problem in design with a lot of context sensitivity, and certainly not something that can be reduced to simple guidance.
dClauzel 6y ago
This is possibly a pretty and interesting article, but the author does forget that about 4% (8% men, 0,5% women) of the human population suffer from daltonism. So yeah, we like our colours to be clearly separated. Having linear gradients of colours leads to the impossibility of distinguishing the data categories, so nop. If you do this you MUST also provide another kind of representation, like ColorAdd http://www.coloradd.net/ http://www.coloradd.net/ .
The_Double 6y ago
As a color blind person, a lot of his "better" suggestions were absolutely impossible to discern to me, while his "worse" examples were fine. I wish more people made visualizations based on brightness rather than a hue scale.
- moron4hire 6y ago
  *her
- joshvm 6y ago
  These are called perceptually uniform colormaps and are also useful for grayscale printing, as the scale will still be valid. This is now the default in Matplotlib (eg viridis, magma, etc) https://jakevdp.github.io/blog/2014/10/16/how-bad-is-your-colormap/ https://jakevdp.github.io/blog/2014/10/16/how-bad-is-your-co... I have found occasion to use Jet though, it's good for highlighting transitions between close values when the colour scale is large (but not large enough to use a log map).
  - Daub 6y ago
    FYI... the easiest way to get colour pairs that feature this sort of perceptual uniformity is by using a Lab color picker, such as Photoshop's. Much better that just shifting the hue slider in RGB space.
- neilk 6y ago
  I noticed that too. The stricture “get it right in black and white” would help, but color-blind folks map colors to lightnesses differently. A color-blind co-worker believed yellow on white was perfectly legible, but a scatterplot with red and blue was indecipherable. Do color blind folks have any tools, like browser plugins, to remap images?
  - wereHamster 6y ago
    Chrome DevTools has a builtin feature to simulate various color deficiencies: https://twitter.com/mathias/status/1237393102635012101 https://twitter.com/mathias/status/1237393102635012101
sndwnm 6y ago
All the articles I've seen about the topic talk about how to select a palette of 2-4 colors. How would one go about picking something like 8 hues, with different levels of emphasis for some of them? I'm trying to do something akin to designing a terminal color scheme. I've seen some websites that let you put in values and see how the color scheme would look like, but I'm more interested in insight to how to make it look aesthetic. Colorblind friendliness is not a high priority.
- spajus 6y ago
  I recently tried to answer the same question for myself when I wanted to figure out what color palette to use in my game. Basically the idea is that you can divide the 360 degree hue into even sections and get colors from that. Put different luminosities in the mix and set same saturation of everything, and you've got yourself a beautiful palette with tons of coherent colors. I haven't found a tool that would help generating such palettes, so I built one for myself, feel free to use it: https://kodolinija.com/tools/hsl-color-palette-generator/ https://kodolinija.com/tools/hsl-color-palette-generator/
  - sndwnm 6y ago
    Excellent! Thank you.
- sosborn 6y ago
  https://color.adobe.com/create/color-wheel https://color.adobe.com/create/color-wheel
- Chris_Newton 6y ago
  How would one go about picking something like 8 hues, with different levels of emphasis for some of them? I’m not sure what you are looking for in terms of emphasis, but if you want to work with lots of hues, I recommend looking into “perceptually uniform colour spaces”. It’s not unusual to see a colour wheel with “pure” red, green and blue (in the RGB-on-your-screen sense) at angles of 0°, 120° and 240°. Then you “interpolate” and get yellow, cyan and magenta at 60°, 180° and 300°. More colours get filled in to complete the wheel. Now, there are all kinds of things wrong with this. However, possibly the biggest problem is that you can’t just pick evenly spaced colours around a wheel set up like this, say ten hues that are 36° apart, and get a good set of perceptually distinct colours as perceived by a human looking at them. Go ahead and try it; you’ll find that some of the colours you get around the green part of the wheel appear much more similar than most of the others. This sort of problem was recognised long ago by Munsell, who attempted through experimental research to find a way to represent colours where the steps appeared even to a human viewer. This resulted in the Munsell colour system, which is essentially a huge but quite useful look-up table that will give you perceptually even colours just by varying say the hue or value by the same number of steps. Later efforts by the CIE would try to codify those ideas in more mathematically tractable ways, and the CIE colour spaces in expert use today still have much the same ideas underlying them. If you took a Munsell colour wheel and picked hues in 10 even steps around the wheel (for the same value and chroma), and then converted the resulting colours back to the bad but popular colour wheel described above, what you’d find is that the converted hues would have bigger changes in some areas, particularly around the greens, and smaller changes in others, which would compensate for the problem described above and give a more visually even palette. This rabbit hole goes pretty deep, because this is already quite a long comment and I’ve only talked about hue so far. It turns out that getting perceptual uniformity on the other axes is not always trivial either, not least because the available value and chroma options differ from one hue to another: we can’t perceive any blue that looks anywhere near as strong as the strongest yellows we can see, for example. Depending on what your palette is for, this can be very important, because as others have noted, it’s a good idea to vary more than just hues if you’re trying to construct a palette of clearly distinct colours for things like drawing charts or other data viz work.
deleted 6y ago
[deleted]
amai 6y ago
It should be noted that the author also has a series of articles on visualization for colorblind people in the same blog: - https://blog.datawrapper.de/colorblindness-part1/ https://blog.datawrapper.de/colorblindness-part1/ - https://blog.datawrapper.de/colorblindness-part2/ https://blog.datawrapper.de/colorblindness-part2/ - https://blog.datawrapper.de/colorblindness-part3/ https://blog.datawrapper.de/colorblindness-part3/
Daub 6y ago
I teach colour use in a design school. The most important point TFA makes is to understand colour in terms of HSL. This is the perfect 'thinking space' of colour. The next point key point it makes is to visualise hue on the colour wheel, particularity with reference to their antagonist pair (i.e. complementary). One point the author does not make is that artists, designers and Adobe Color define complementaries using the RYB colour wheel not the RGB. The complementaries defined by RYB are 'incorrect' in this regard. Aesthetic arrangement of hue is easier to define as a set of don'ts rather than dos (which is why I disprove of Adobe color). Thing to avoid with hue use: hues from only one side of the wheel, hues from every point in the wheel and hues from equal sides of two halves of the wheel.
the__alchemist 6y ago
On one hand, I like the color combos listed as good (without much context) more than the counterexamples, but like most design writing, it's filled with invisible "Citation Needed"s. The justifications are mainly like this one: "That’s because these warm colors and blue are super versatile for categories." Or "First, forest green is just very dark. And lightening up the forest green means going into an awkward neon". This begs the question: "Why is green either too dark or awkward?" I'm guessing this is due to us not understanding the psychology behind it; we fall back to rules of thumb.
- awkwardneon 6y ago
  Most color theory is better described as "color dogma." There's absolutely nothing wrong with bright green, except that it's too loud for corporate communications and infographics. This is down to taste and conventional wisdom, not science. In edgier venues (contemporary art for example) it's not unusual to find books designed with pure bright greens or hot pinks (even for infographics). What I'm trying to say is, there is some timeless wisdom here but there are also things that just boil down to conservatism and conformism. Infographics are subject to the constraints of bland corporate design. The recent book "Data Feminism" discusses this situation: 'In the recent book A Unified Theory of Information Design, authors Nicole Amare and Alan Manning state: “The plain style normally recommended for technical visuals is directed toward a deliberately neutral emotional field, a blank page in effect, upon which viewers are more free to choose their own response to the information.” Here, plainness is equated with the absence of design and thus greater freedom on the part of the viewer to interpret the results for themselves. Things like colors and icons work only to stir up emotions and cloud the viewer’s rational mind.' https://data-feminism.mitpress.mit.edu/pub/5evfe9yd/release/3 https://data-feminism.mitpress.mit.edu/pub/5evfe9yd/release/... (I'm not saying Rost is a political dinosaur but I think she's catering to a pretty straitlaced audience.)
  - LargoLasskhyfv 6y ago
    Hot pinks (where I think of hot as neon) are one of my rare photosensivity triggers, especially in combination with light greys, or even silver. I discovered this in a fullpage advert decades ago, where the page was mostly hot pink, and the rather large letters in silver-grey. That produced an optical illusion wherein the letters and the pink surface drifted apart from each other into infinity, maybe a dozen times per second, and swapping their positions from foreground to background. Almost puke inducing. And lasting for several minutes after, made my field of view "flicker". Similar thing with the Mint which was trendy in the 90ies. Brrr.
nadsumatal 6y ago
Many of the problems mentioned can be solved by using HSLuv instead of HSL: https://www.hsluv.org https://www.hsluv.org
ggggtez 6y ago
I disagree with about half of their decisions about which chart is better.
unnouinceput 6y ago
"by Lisa Charlotte Rost". Yup, that's a woman article. I mean just by looking at the "green" I was like "let's see who wrote it". Story: I have 2 USB cables, need it to make a longer one so i thought "let's get rid of the heads at one side, a bit of soldering of them wires and I'm golden. How hard can it be?". So I cut the sides, got rid of exterior isolation to get to individual wires and then i was like "uhmm, what colors are these?". So I called my wife "honey, tell me what colors do you see here?". And she comes, takes less then a second look at them and starts: "this is light blue, this is magenta, this is black, this is cream white and this is dark green". Me on the other hand I was seeing some weird green, a dark blue, maroon, yellow and light blue. And we start to bicker about colors. I swear to God, for an hour we went back and forth, involved the kids as well. Well my daughter sided with my wife while my boy sided with me. I end-up attaching post-it on each wire with numbers 1 through 5 and used my multimeter to identify which wire goes to what USB pin. Conclusion: There is a reason why classic vibrant colors are used when you create diagrams or paths on a PCB - to easily identify who's what, not to play hide and seek. They might be boring but this is not fashion
LargoLasskhyfv 6y ago
Seems good to me. Bookmarked.
AQXt 6y ago
Thank you for writing this. I have a common type of red-green color blindness which makes red look less bright (protanomaly), and I can attest that your suggestions make the charts clearer for me.
hoseja 6y ago
cargo install pastel pastel distinct 6
dusted 6y ago
So choosing the dull colors is right and avoiding crisp nice colors is the mistake.. totally not an opinion piece.
tripu 6y ago
For use cases where one truly needs to put aesthetics and accessibility aside, and instead squeeze the gamut of possible colours to the max (eg, because one has to assign distinctive colours to dozens or hundreds of elements), I have a JS library which includes a method for that: // We have a viz with 50 items; let's assign colours to those items: import { palette } from 'supers'; const colours = new palette(50); for (let i = 0; i < 50; i ++) chart[i].css('color', '#' + colours.get(i, true)); Online demo: https://codepen.io/tripu/full/JEMBoN https://codepen.io/tripu/full/JEMBoN Documentation: https://github.com/tripu/superscript/blob/master/.github/README.md#Palette https://github.com/tripu/superscript/blob/master/.github/REA...

844 points by hunvreus 6y ago

Pick not-Jet and perceptually uniform we’re off to a great start.

This is excellent thank you. As a non-designer who very often struggles with color palette decisions, I feel this will become an oft-used bookmark.

roland35 6y ago

I think the colors look nice in these visualizations, but I do believe it is possible to drift so far in making visualizations pretty to the detriment of being clear! First of all, one advantage of highly distinct colors which is discouraged in this article is that.. the colors are more distinct across all sorts of mediums. Sometimes you don't know if your chart will be printed off on a cheap inkjet and showed to the CEO, or blurrily presented on a zoom call over poor WiFi to someone who is colorblind. I think the push to usability should consider these types of scenarios.

deleted 6y ago
[deleted]
m12k 6y ago
I'd say if you care about consistency across media, try to make your colors have different luminosity, so they can still be distinguished somewhat when someone invariably prints them on a monochrome printer. Also, pure yellow (and to some extent pure green) tends to end up nearly invisible on a lot of color inkjet printers, so tweaking the luminosity is also important there. Overall I think most of the tips this article advocates will also help across various mediums.
- pbhjpbhj 6y ago
  For data display luminosity can skew the impression of which data dominates. That's a reason not to use luminosity changes IMO. However, if you want to convince people you can skew their impression of the data without technically lying ...
  - deleted 6y ago
    [deleted]
crazygringo 6y ago
> one advantage of highly distinct colors which is discouraged in this article is that.. the colors are more distinct across all sorts of mediums Actually this is precisely the opposite. If I understand you correctly, you're saying that the advice in the article -- to avoid super-saturated colors, super-bright colors, or colors evenly spaced around the color wheel -- is bad, because all these help increase distinctiveness. But the reality is that when translating across mediums, like inkjet or black and white, these have the problem of blowing out, where light colors turn white and dark colors turn black. And with colorblindness, you encounter the problem of radically different colors becoming indistinguishable. Whereas if you stick to less contrast but still maintain meaningful differences in both hue and lightness, it translates well across mediums. Shades don't get blown out, and levels of lightness remain distinguishable. And as for colorblindness, the article specifically recommends using warm colors vs. blue precisely for this reason: "And they are accessible: colorblind people can easily distinguish blue and orange/red from each other." This is why you don't want to use the whole range of distinctive colors, like red, yellow, green, blue, purple all together.
deleted 6y ago
[deleted]
MattRix 6y ago
The article talks specifically about colorblindness and how you should look at your visualizations in greyscale to ensure the colours are still distinct.
RobertKerans 6y ago
The article is [extremely] explicitly not discouraging distinct colours. If you think the opposite to the article is true, then I'm not sure what you're advocating, because it isn't distinct colours. The article does talk at length about how to adjust for aesthetics, but at no point does it skimp on also ensuring distinctness.

austinhutch 6y ago

Great article! Another nice resource for picking colors in data visualizations is from Stephen Few: http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf http://www.perceptualedge.com/articles/visual_business_intel...

vharuck 6y ago
My go-to has been Color Brewer: https://colorbrewer2.org https://colorbrewer2.org But this article will help me make my own palettes for specific goals. A lot of categories have "common sense" colors (e.g., blues for male, pinks for female). Using those makes it easier for people to read charts without repeatedly looking at a legend or annotation. But I'd like to have the colors show multiple categorical variables. It should be just as easy to identify and compare white men versus white woman as it is to compare white men versus black men.
davidivadavid 6y ago
Can also recommend his book, Show me the numbers. A nice companion when you're done with Tufte.

fbelzile 6y ago

Very well written and surprisingly practical information in here. I've used Paletton before when trying to make a good colour scheme but I've never been impressed with the results. I guess I was using it wrong: > In the video above, I used the color tool Paletton to start with a tetradic harmony and then decrease the distance. Note how more beautiful the color combinations become. > Our colors are opposite each other on the color wheel, so they’re clearly complementary. Yay! But they’re also unusable: The two oranges are way too similar. And everything looks so... bright. There’s where we need to change the saturation and lightness.

kumarvvr 6y ago

Awesome article. Colors make or break everything visual. This guide is also very useful for web sites. Edit : Perhaps someone can create a color selector that incorporates her recommendations, like avoiding primary or saturated colors, avoiding certain colors, etc.

tibbar 6y ago

Great stuff. My team recently had to create visualizations using a very large number of colors (dozens, plus some gradients), because we were representing many distinct values in a number of dimensions. It was very difficult to make it work, but considerations like the ones here helped a lot.

ChrisMarshallNY 6y ago

Quite common sense, but not a new issue. "Color Set" books have been sold for decades, and there's a number of sites (I have a few bookmarked [0]-[4]), that have great JS implementations. But it's a great explanation. I think this is something that everyone should know, so the more material out there, the better. [0] W3Schools is not everyone's cup of tea, but they have a great section on colors: https://www.w3schools.com/colors https://www.w3schools.com/colors [1] Colorblind design is important. This helps with that: https://www.toptal.com/designers/colorfilter https://www.toptal.com/designers/colorfilter [2] I've found this tool useful: http://paletton.com http://paletton.com [3] "Clickbaity," but also fairly useful: https://www.colorcombos.com https://www.colorcombos.com [4] This is a cool tool: https://www.colorbox.io https://www.colorbox.io

scns 6y ago
colorhexa.com is my goto for colors. Shows how colors are perceived by colour blind and much more.
- ChrisMarshallNY 6y ago
  Thanks! That's a useful site!
abhgh 6y ago
Thank you for the links! I find Adobe Color quite helpful to find a palette for visualization [1]. Its been around for years now, although I think the original website was called Adobe Kuler. For categorical colormaps, I have found the python Glasbey [2] library helpful. Note: the first run can be slow. [1] https://color.adobe.com/explore https://color.adobe.com/explore For popular themes filter using "View" (right side of the screen under the main banner) and pick "Color Themes" => "Most Popular" [2] https://github.com/taketwo/glasbey https://github.com/taketwo/glasbey
OJFord 6y ago
> [1] Colorblind design is important. This helps with that: https://www.toptal.com/designers/colorfilter https://www.toptal.com/designers/colorfilter I'm colour-blind; I've never known exactly what type (for sure red/green). I can tell the difference between original/filtered at that link for both protanopia and deutanopia, though they are close. Perhaps that means I have both/a mixture. (They're described there as being anomalous red vs. green cones, so it seems reasonable that I could have anomalous both.) When it comes to 'colour-blind mode' settings I set my mild annoyance (could you not just pick a friendly default? It's not like I can't see any reds (for example) at all) aside and just pick whichever type is most visually pleasing or easily distinguishable.

cullinap 6y ago

This is a great article.

andrepd 6y ago

Eh, the article title should actually be just "how to pick more beautiful colours" period, since it talks very little about actually choosing colours for data visualisation, that is, how to choose a visual presentation that helps make sense of the data you're showing. Example: https://colorbrewer2.org/ https://colorbrewer2.org/

gerbler 6y ago
I completely agree - this is almost entirely around visual presentation (which is subjective) and not around practical limitations for color choice. I'm a big fan of colorbrewer to help make these choices for me!
jeffbee 6y ago
For visualizations you will probably reach for a convenient palette already provided by your software, like https://ggplot2.tidyverse.org/reference/scale_brewer.html https://ggplot2.tidyverse.org/reference/scale_brewer.html or https://observablehq.com/@d3/color-schemes https://observablehq.com/@d3/color-schemes.
JadeNB 6y ago
For some reason the HN title, which was originally the actual title, has been changed to "Common color mistakes and how to avoid them", which seems weird. The actual title ("How to pick more beautiful colors for your data visualizations") doesn't seem clickbait-y, so why take the subtitle instead?

trollied 6y ago

You need to be really careful with picking colours. In a previous role I created some reports & associated graphs for the CEO. I was really pleased with the visual representations of the data. He wasn't. He's colour blind.

umvi 6y ago

> It will look more professional – and therefore more trustworthy – when it only uses a few hues and their neighbors This sentence rubs me the wrong way for some reason but can't seem to articulate why. Maybe because I feel like in an ideal world, trustworthiness of information should not be coupled to how slick its presentation is.

lifeisstillgood 6y ago
I have always felt that a polished presentation shows (heuristic) that the author has got past the poring of trying to work out what they wanted to say and then gotten to the point of making the visuals follow their theme - in other words it shows they have a clear idea of what they wanted to say and have had suffice t time left over to work the presentation. I am reminded a bit of a jeff below story and a kissinger story.
- KineticLensman 6y ago
  > a polished presentation shows (heuristic) that the author has got past the poring of trying to work out what they wanted to say Yes, although equally sometimes polish can draw attention away from a lack of substantive content
  - bigyikes 6y ago
    If I've done my job right, the visuals are beautiful and also the least important part of my presentation.
- srtjstjsj 6y ago
  It's also possible they skipped over trying to work out what they want to say, or more likely and worse, they know what they want to say but they skipped over the work of collecting good data that supports what they are trying to say.
- msla 6y ago
  Polish is too easy to copy. You can copy CSS and page layout directly these days.

Brajeshwar 6y ago

My friend has a tool that we often use - https://colorcolor.in https://colorcolor.in

tomrod 6y ago

I think this article is great. I don't like to be contrarian; however, I'm going to nitpick two small items. [1] The color blind focus is red-green in the descriptions. The author acknowledges other forms of color blindness, and I would recommend more emphasis outside of red-green. [2] The tradeoff of visualizations is the visualizer guiding the narrative discussion and the audience wanting to triangulate additional information based off the visual. I have worked in organizations where the piechart (leading the "Avoid bright, saturated colors" section) would be reamed since there isn't enough visual difference between Laos and Japan. Especially in instances like line charts where this visualization methodology is used. Beyond that, I felt like this was a well-written article on the subject.

tsimionescu 6y ago
Regarding nitpick 2, all of the blue colors are identical between the two charts, I think the only point that chart makes is about the yellow/ochre(?) for the USA slice. However, I absolutely agree that there is no way for me to read that chart, other than looking at the order of the blue slices (they are in the same order clockwise as the legend). I think one additional factor that should be considered when choosing colors specifically for presentations is "will the speaker be able to describe the color of one particular item based on its color, in terms the audience will understand?" For example, if you have to say "Japan is the ochre line" or "people 45 or older are the vermillion line, while people 20 or younger are the carmine line", that may be a problem in some circles, even if the two colors are easy to distinguish visually. This is likely not a problem when you have the option of saying "the darker red" vs "the ligher red", but if you start having more versions of the same general hue, you may quickly run out of words.

allenu 6y ago

This is great practical advice! As a non-designer, I’ve found it hard to find good, succinct resources on color theory that actually gets to ground-level suggestions like this. Well done to the author.

kuon 6y ago

HSLuv has helped me a lot in creating color scheme.

hansvm 6y ago

The author touched on colorblindness, but I think it's important to point out that: (1) It can be a fair chunk of your audience -- 1/10 men are colorblind in some locales. (2) There are many flavors of colorblindness. Tools like https://www.color-blindness.com/coblis-color-blindness-simulator/ https://www.color-blindness.com/coblis-color-blindness-simul... are helpful to make sure your palette works for most of them. As a practical matter, adjusting some parameter like texture in addition to hue is helpful. If you adjust lightness or saturation it'll serve the dual purpose of making your charts understandable when printed in black-and-white.

Chris_Newton 6y ago
(2) There are many flavors of colorblindness. Tools like https://www.color-blindness.com/coblis-color-blindness-simul.. https://www.color-blindness.com/coblis-color-blindness-simul.... are helpful to make sure your palette works for most of them. For those doing web work, Chrome has a helpful way to simulate some of the most common vision deficiencies in its developer tools. From the menu, open the More tools → Rendering panel, then down at the bottom there is a setting called “Emulate vision deficiencies”. It can do blurred vision as well as several types of colour blindness.
- mpetroff 6y ago
  Adding to this, the Chrome (83+) and Firefox (81+) developer tools both do a reasonable job at the simulation, using the method of Machado et al. (2009) [1]. Unfortunately, the linked to simulator, like many of the online simulators, does a very poor job. When simulating protanopia, reds should appear darker, due the lack of L cones. However, many simulators incorrectly display red as bright green instead. I've also written a color picker that uses the Machado et al. method to enforce CAM02-UCS minimum perceptual distance for normal vision and color vision deficiency [2]. [1] https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation... [2] https://colorcyclepicker.mpetroff.net/ https://colorcyclepicker.mpetroff.net/
  - Chris_Newton 6y ago

rivo 6y ago

For a visualization project, I needed to be able to automatically generate a visually pleasing colour palette. Customers would provide one or more base colours (e.g. based on their corporate design rules) and the generated palette should then complement those base colours. So it didn't help to manually pick those colours in advance because they may not play well with the base colours. If you find yourself in a similar situation, I wrote a blog post on how such a palette can be calculated: https://rentafounder.com/generating-colour-palettes-for-charts/ https://rentafounder.com/generating-colour-palettes-for-char... The algorithm basically picks colours one by one, each being the most distant colour to all previous colours within the same saturation plane, all in CIE94 space. It ended up working quite well.

mihaaly 6y ago

I have color vision deficiency, like other 1 in 12 male. Even healthy male will not appreciate subtle color variations as far as I heard. Putting so much effort into 'pretty' and subtle colors to aid understanding will be counterproductive! Focus on other means if understanding the message is dear for you.

Fnoord 6y ago
What is the name of this specific deficiency? I'm curious about it, given you state the rarity of 1 in 12 male (which equals to ~4% of population).
- mihaaly 6y ago
  "red-green" colour vision deficiency https://www.nhs.uk/conditions/colour-vision-deficiency/ https://www.nhs.uk/conditions/colour-vision-deficiency/ apparently there are other types in addition

mathgenius 6y ago

I'm very interested, but also skeptical. How do I know this isn't just fashion ? I would be more convinced if this was backed up by scientific studies, or even just showed examples more than a few years old. What were they doing in the 1960's ? People have done studies showing that fonts with serif's increase comprehension (at least in printed form) of words. Have similar studies been done with colours? Otherwise this article could be complete bs written by someone with a fetish for pastels. Five years from now this same person could be writing about how colours need to have more zing, and reversing all these "not ideal / better" diagrams. Remember when webdesigners went crazy using low-contrast fonts that were barely readable ?

bjt 6y ago
Exactly the point I came to make. In a blog about data, I would like to see color recommendations backed by research and data, not just the author's aesthetic preferences.
Daub 6y ago
The data is indeed pretty thin. I should know, I have looked for it when I was doing my own research on colour use in art. One interesting point... the utility of complementary pairs has a long history. Leonardo Da Vinci was writing about them 600 years ago, and this was before the colour wheel was defined by Isaac Newton.
watwut 6y ago
It is art and design. What she is describing is basically super simplified state of art related to colors in out culture and pretty stable. It is simplified for non-designers, but pretty much similar to what they teach when they teach you classical drawing. Fashion is significantly more limited and changes more often. Not that these basics can not change, but fashion refers to something still less stable.
parksy 6y ago
I only skimmed the abstract and this is the first thing I found but it looks like there's a field of research around colour and its impact on attention, arousal, memory, learning, etc. Maybe some of these references are a starting point, idk. (warning -PDF link) https://scholarworks.umass.edu/cgi/viewcontent.cgi?article=1487&context=refereed https://scholarworks.umass.edu/cgi/viewcontent.cgi?article=1...

jacobolus 6y ago

> The green ⬤ is…can you even call it a green ⬤? Nadieh’s questioned green is much closer to “unique green” (a typical observer wouldn’t think it looked partly blue or yellow)† than the CSS color “green” (based on the display’s “G” primary), which is shifted way toward yellow and should properly be called “yellowish green” or the like. It’s also much less colorful (the hues would be easier to compare if both had the same colorfulness). Likewise Nadieh’s red closer to unique red (and much less colorful) than the RGB “R” primary, which should really be called “orangish red”. > Avoid pure colors All three of the colors in the “better” picture are close to unique hues (yellow, blue, green). All three of the colors in the “not ideal” category are based on the display’s primaries (“orangish red” R, “purplish blue” B, “yellowish green” G), not at all close to “pure”. †: Unique hues vary from person to person, and unique green in particular has wide inter-observer variability. * * * The extremely poor naming of CSS/HTML colors and the rather arbitrary constraints imposed by 3-primary RGB emissive displays and inadequate/misleading graphical tools for picking colors have seriously skewed many people’s color concepts. To restate the main idea from this article: don’t use overly intense colors. Stay away from CSS named colors, because they are based on the furthest extremes of the display’s gamut, and are overly colorful.

phosphophyllite 6y ago

Why she uses "NOT IDEAL" for BAD examples, is this some kind of fancy-talk?

renewiltord 6y ago

Very cool article. I usually just use Kuler and pick out an option but that's limiting if you're trying to make it fit in the palette of something that already exists. The justifications and actions suggested are pretty good here.

msla 6y ago

This sounds like someone's personal opinions with, admittedly, a certain amount of verifiable information thrown in. Is this person a known designer? How seriously should we take their personal opinion?

blackearl 6y ago

It seems like most of these are just "use pastels"

MattRix 6y ago
You might need to read the article again if that's all you got out of it.
- blackearl 6y ago
  3-7 are "use pastels"

samch93 6y ago

For all things related to color in data visualization, I can fully recommend the R-package colorspace. For example, the package features colorblind friendly palettes and also the possibility to emulate different forms of color vision deficieny. See the paper on https://arxiv.org/pdf/1903.06490.pdf https://arxiv.org/pdf/1903.06490.pdf and the webpage of the project https://colorspace.r-forge.r-project.org/index.html https://colorspace.r-forge.r-project.org/index.html

kstenerud 6y ago

"In the video above, I used the color tool Paletton to start with a tetradic harmony and then decrease the distance. Note how more beautiful the color combinations become." Uhhh... no, I don't get how the end is more "beautiful". How do you determine what is a beautiful color combination, and what is not?

cjohnson318 6y ago

> It’s fascinating to see how desaturated many colors are around us! I do a lot of watercolor, and it truly is amazing how much of our world is some shade of mud, and how far you can get with a couple of muddy pigments. Sargent did a lot of watercolor in sketches in Venice with just ultramarine, cerulean, raw sienna, burnt sienna, and a tube of white. James Gurney gets a lot of mileage out of the "six-pack" white, black, raw umber, yellow ochre, venetian red, and cobalt.

adontz 6y ago

Time had shown I have no designer talent and such articles always make me sad and angry. The tragedy is that I can actually recognize a good design, but cannot produce one. To me these articles are like showing paralyzed man detailed physical explanation of walking, Boston Dynamics' robots, other people. Very informational and absolutely not helpful. Probably some designers looking at software development tutorials feel the same.

azinman2 6y ago
Which is why people specialize and work in teams. Sometimes even being made aware of the challenges can allow someone to realize they should ask for help and not produce crap-tastic work without realizing it.
- adontz 6y ago
  Yeah, but like taking an HTML/CSS template and replacing a few standard colors with new ones should not that challenging? Or should it?
  - azinman2 6y ago
    You have to know what to replace it with. Few have a gift for color aesthetically, and then to add on functional requirements makes that even harder.
heja2009 6y ago
She gives very good advice for us non-designers though use color templates. They are available as book or webpage and by trying out just a handful that seem to fit your needs you can quickly get to a reasonably good design. It works for me at least. https://blog.datawrapper.de/colorguide/ https://blog.datawrapper.de/colorguide/

AkelaA 6y ago

I can't help but notice that many of the "non ideal" examples are pretty much identical to the colors used by companies like Google: https://blog.datawrapper.de/img/full-200805_goodcolors28.png https://blog.datawrapper.de/img/full-200805_goodcolors28.png. Apple is another company that's not afraid to use extremely bold, saturated colors in their UI designs: https://developer.apple.com/design/human-interface-guidelines/ios/images/colorBlindness_fullColor_2x.png https://developer.apple.com/design/human-interface-guideline... - in fact the colors chosen in that UI goes against a large amount of the advice found on this article, that green to lime gradient is pretty much 100% saturated for example, with a background that is absolute #000000 black. The main theme of this article is to try to use complementary colors that aren't overly saturated or "pure", which is decent enough advice most of the time, but I feel that in an attempt to find color schemes that are more "professional looking", the author has used colors that come across as overly staid for most applications - navy blues and olive greens that are more associated with serious banking institutions then anything else. Which I guess is fine for infographics that need to display a level of trust and seriousness, but maybe not so much for a mobile app or social network that wishes to put on a more playful, friendlier face.

saagarjha 6y ago
Apple's charts are meant to pop out, though; they serve a very different purpose than a graph in an article about energy consumption in Cambodia. It seems to me that if you're using color just for the sake of distinguishing things then you want to make them more muted, and if you are trying to draw the eye towards something, or give it personality, you go towards more vibrant hues.
- TheOtherHobbes 6y ago
  Which is a very relevant point that should have been included in the article. There's also the gender difference. Men are more likely to be colour blind, women are more likely to have better colour differentiation and also to have a subtly different colour hue perception. So women see subtle distinctions with more clarity, and see hues biased slightly away from red compared to men, with green being seen as slightly more yellow. https://www.psychologytoday.com/us/blog/brain-babble/201504/when-it-comes-color-men-women-arent-seeing-eye-eye https://www.psychologytoday.com/us/blog/brain-babble/201504/... A lot of the work in this area - including ColorBrewer - is by Cynthia Brewer, and I suspect that men and women don't just use colours and textures in a slightly different way, but are also attracted, convinced, and reassured by different colours and textures. This absolutely makes a difference if you're working on a site that is gender-specific. Using a generic low-saturation palette is going to destroy the appeal of a site with predominantly male customers, while a black/brown/grey/red site will fail with women. I've always been impressed by Apple's ability to make distinctive designs that bridge the gap and manage to be gender neutral. While most laptops are black and angular, an MBP appears to have no gender distinction of any kind. This is a very cool trick, and much harder to do than it looks. The point being the target audience matters, and colour is a hard problem in design with a lot of context sensitivity, and certainly not something that can be reduced to simple guidance.

dClauzel 6y ago

This is possibly a pretty and interesting article, but the author does forget that about 4% (8% men, 0,5% women) of the human population suffer from daltonism. So yeah, we like our colours to be clearly separated. Having linear gradients of colours leads to the impossibility of distinguishing the data categories, so nop. If you do this you MUST also provide another kind of representation, like ColorAdd http://www.coloradd.net/ http://www.coloradd.net/ .

The_Double 6y ago

As a color blind person, a lot of his "better" suggestions were absolutely impossible to discern to me, while his "worse" examples were fine. I wish more people made visualizations based on brightness rather than a hue scale.

moron4hire 6y ago
*her
joshvm 6y ago
These are called perceptually uniform colormaps and are also useful for grayscale printing, as the scale will still be valid. This is now the default in Matplotlib (eg viridis, magma, etc) https://jakevdp.github.io/blog/2014/10/16/how-bad-is-your-colormap/ https://jakevdp.github.io/blog/2014/10/16/how-bad-is-your-co... I have found occasion to use Jet though, it's good for highlighting transitions between close values when the colour scale is large (but not large enough to use a log map).
- Daub 6y ago
  FYI... the easiest way to get colour pairs that feature this sort of perceptual uniformity is by using a Lab color picker, such as Photoshop's. Much better that just shifting the hue slider in RGB space.
neilk 6y ago
I noticed that too. The stricture “get it right in black and white” would help, but color-blind folks map colors to lightnesses differently. A color-blind co-worker believed yellow on white was perfectly legible, but a scatterplot with red and blue was indecipherable. Do color blind folks have any tools, like browser plugins, to remap images?
- wereHamster 6y ago
  Chrome DevTools has a builtin feature to simulate various color deficiencies: https://twitter.com/mathias/status/1237393102635012101 https://twitter.com/mathias/status/1237393102635012101

sndwnm 6y ago

All the articles I've seen about the topic talk about how to select a palette of 2-4 colors. How would one go about picking something like 8 hues, with different levels of emphasis for some of them? I'm trying to do something akin to designing a terminal color scheme. I've seen some websites that let you put in values and see how the color scheme would look like, but I'm more interested in insight to how to make it look aesthetic. Colorblind friendliness is not a high priority.

spajus 6y ago
I recently tried to answer the same question for myself when I wanted to figure out what color palette to use in my game. Basically the idea is that you can divide the 360 degree hue into even sections and get colors from that. Put different luminosities in the mix and set same saturation of everything, and you've got yourself a beautiful palette with tons of coherent colors. I haven't found a tool that would help generating such palettes, so I built one for myself, feel free to use it: https://kodolinija.com/tools/hsl-color-palette-generator/ https://kodolinija.com/tools/hsl-color-palette-generator/
- sndwnm 6y ago
  Excellent! Thank you.
sosborn 6y ago
https://color.adobe.com/create/color-wheel https://color.adobe.com/create/color-wheel
Chris_Newton 6y ago
How would one go about picking something like 8 hues, with different levels of emphasis for some of them? I’m not sure what you are looking for in terms of emphasis, but if you want to work with lots of hues, I recommend looking into “perceptually uniform colour spaces”. It’s not unusual to see a colour wheel with “pure” red, green and blue (in the RGB-on-your-screen sense) at angles of 0°, 120° and 240°. Then you “interpolate” and get yellow, cyan and magenta at 60°, 180° and 300°. More colours get filled in to complete the wheel. Now, there are all kinds of things wrong with this. However, possibly the biggest problem is that you can’t just pick evenly spaced colours around a wheel set up like this, say ten hues that are 36° apart, and get a good set of perceptually distinct colours as perceived by a human looking at them. Go ahead and try it; you’ll find that some of the colours you get around the green part of the wheel appear much more similar than most of the others. This sort of problem was recognised long ago by Munsell, who attempted through experimental research to find a way to represent colours where the steps appeared even to a human viewer. This resulted in the Munsell colour system, which is essentially a huge but quite useful look-up table that will give you perceptually even colours just by varying say the hue or value by the same number of steps. Later efforts by the CIE would try to codify those ideas in more mathematically tractable ways, and the CIE colour spaces in expert use today still have much the same ideas underlying them. If you took a Munsell colour wheel and picked hues in 10 even steps around the wheel (for the same value and chroma), and then converted the resulting colours back to the bad but popular colour wheel described above, what you’d find is that the converted hues would have bigger changes in some areas, particularly around the greens, and smaller changes in others, which would compensate for the problem described above and give a more visually even palette. This rabbit hole goes pretty deep, because this is already quite a long comment and I’ve only talked about hue so far. It turns out that getting perceptual uniformity on the other axes is not always trivial either, not least because the available value and chroma options differ from one hue to another: we can’t perceive any blue that looks anywhere near as strong as the strongest yellows we can see, for example. Depending on what your palette is for, this can be very important, because as others have noted, it’s a good idea to vary more than just hues if you’re trying to construct a palette of clearly distinct colours for things like drawing charts or other data viz work.

deleted 6y ago

[deleted]

amai 6y ago

It should be noted that the author also has a series of articles on visualization for colorblind people in the same blog: - https://blog.datawrapper.de/colorblindness-part1/ https://blog.datawrapper.de/colorblindness-part1/ - https://blog.datawrapper.de/colorblindness-part2/ https://blog.datawrapper.de/colorblindness-part2/ - https://blog.datawrapper.de/colorblindness-part3/ https://blog.datawrapper.de/colorblindness-part3/

Daub 6y ago

I teach colour use in a design school. The most important point TFA makes is to understand colour in terms of HSL. This is the perfect 'thinking space' of colour. The next point key point it makes is to visualise hue on the colour wheel, particularity with reference to their antagonist pair (i.e. complementary). One point the author does not make is that artists, designers and Adobe Color define complementaries using the RYB colour wheel not the RGB. The complementaries defined by RYB are 'incorrect' in this regard. Aesthetic arrangement of hue is easier to define as a set of don'ts rather than dos (which is why I disprove of Adobe color). Thing to avoid with hue use: hues from only one side of the wheel, hues from every point in the wheel and hues from equal sides of two halves of the wheel.

the__alchemist 6y ago

On one hand, I like the color combos listed as good (without much context) more than the counterexamples, but like most design writing, it's filled with invisible "Citation Needed"s. The justifications are mainly like this one: "That’s because these warm colors and blue are super versatile for categories." Or "First, forest green is just very dark. And lightening up the forest green means going into an awkward neon". This begs the question: "Why is green either too dark or awkward?" I'm guessing this is due to us not understanding the psychology behind it; we fall back to rules of thumb.

awkwardneon 6y ago
Most color theory is better described as "color dogma." There's absolutely nothing wrong with bright green, except that it's too loud for corporate communications and infographics. This is down to taste and conventional wisdom, not science. In edgier venues (contemporary art for example) it's not unusual to find books designed with pure bright greens or hot pinks (even for infographics). What I'm trying to say is, there is some timeless wisdom here but there are also things that just boil down to conservatism and conformism. Infographics are subject to the constraints of bland corporate design. The recent book "Data Feminism" discusses this situation: 'In the recent book A Unified Theory of Information Design, authors Nicole Amare and Alan Manning state: “The plain style normally recommended for technical visuals is directed toward a deliberately neutral emotional field, a blank page in effect, upon which viewers are more free to choose their own response to the information.” Here, plainness is equated with the absence of design and thus greater freedom on the part of the viewer to interpret the results for themselves. Things like colors and icons work only to stir up emotions and cloud the viewer’s rational mind.' https://data-feminism.mitpress.mit.edu/pub/5evfe9yd/release/3 https://data-feminism.mitpress.mit.edu/pub/5evfe9yd/release/... (I'm not saying Rost is a political dinosaur but I think she's catering to a pretty straitlaced audience.)
- LargoLasskhyfv 6y ago
  Hot pinks (where I think of hot as neon) are one of my rare photosensivity triggers, especially in combination with light greys, or even silver. I discovered this in a fullpage advert decades ago, where the page was mostly hot pink, and the rather large letters in silver-grey. That produced an optical illusion wherein the letters and the pink surface drifted apart from each other into infinity, maybe a dozen times per second, and swapping their positions from foreground to background. Almost puke inducing. And lasting for several minutes after, made my field of view "flicker". Similar thing with the Mint which was trendy in the 90ies. Brrr.

nadsumatal 6y ago

Many of the problems mentioned can be solved by using HSLuv instead of HSL: https://www.hsluv.org https://www.hsluv.org

ggggtez 6y ago

I disagree with about half of their decisions about which chart is better.

unnouinceput 6y ago

"by Lisa Charlotte Rost". Yup, that's a woman article. I mean just by looking at the "green" I was like "let's see who wrote it". Story: I have 2 USB cables, need it to make a longer one so i thought "let's get rid of the heads at one side, a bit of soldering of them wires and I'm golden. How hard can it be?". So I cut the sides, got rid of exterior isolation to get to individual wires and then i was like "uhmm, what colors are these?". So I called my wife "honey, tell me what colors do you see here?". And she comes, takes less then a second look at them and starts: "this is light blue, this is magenta, this is black, this is cream white and this is dark green". Me on the other hand I was seeing some weird green, a dark blue, maroon, yellow and light blue. And we start to bicker about colors. I swear to God, for an hour we went back and forth, involved the kids as well. Well my daughter sided with my wife while my boy sided with me. I end-up attaching post-it on each wire with numbers 1 through 5 and used my multimeter to identify which wire goes to what USB pin. Conclusion: There is a reason why classic vibrant colors are used when you create diagrams or paths on a PCB - to easily identify who's what, not to play hide and seek. They might be boring but this is not fashion

LargoLasskhyfv 6y ago

Seems good to me. Bookmarked.

AQXt 6y ago

Thank you for writing this. I have a common type of red-green color blindness which makes red look less bright (protanomaly), and I can attest that your suggestions make the charts clearer for me.

hoseja 6y ago

cargo install pastel pastel distinct 6

dusted 6y ago

So choosing the dull colors is right and avoiding crisp nice colors is the mistake.. totally not an opinion piece.

tripu 6y ago

For use cases where one truly needs to put aesthetics and accessibility aside, and instead squeeze the gamut of possible colours to the max (eg, because one has to assign distinctive colours to dozens or hundreds of elements), I have a JS library which includes a method for that: // We have a viz with 50 items; let's assign colours to those items: import { palette } from 'supers'; const colours = new palette(50); for (let i = 0; i < 50; i ++) chart[i].css('color', '#' + colours.get(i, true)); Online demo: https://codepen.io/tripu/full/JEMBoN https://codepen.io/tripu/full/JEMBoN Documentation: https://github.com/tripu/superscript/blob/master/.github/README.md#Palette https://github.com/tripu/superscript/blob/master/.github/REA...