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.
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.
If you have a Mac, an app called Sim Daltonism[0] is quite good. I use it for most of my colorblind testing (including browsers). There's also an iOS version[1]. It has a number of CB types; not just the most common three.
You may have color receptors that are not defective, but too close in activation spectra. If that's the case, then there's a workaround. Block out the light in the spectral overlap, and then the receptors will only activate on separate signals.
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 For popular themes filter using "View" (right side of the screen under the main banner) and pick "Color Themes" => "Most Popular"
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.
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.
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].
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 [https://colorcyclepicker.mpetroff.net/].
That seems like a very useful tool for planning new colour schemes. I wish there were more discussion and tools based on true human perception of colours, not just numerical representations that aren’t necessarily calibrated to how human vision works.
Yes, much better ways of representing and working with colours are known. Sadly, support for them is missing in most of the software we use, including Adobe Illustrator and Photoshop, the Affinity suite, Sketch, Figma and all major browsers. The best we get out of the box is usually HSB/HSL.
Of course, you can make the effort to construct a colour palette using a better model and then convert the colours. However, as soon as you start deviating from those carefully chosen colours — to build a gradient, or to apply filters or transparency, for example — you’re back to relying on the software to do the maths, and if its internal colour model is weak, the results will reflect that.
Photoshop does support LAB but all of the advanced color science (and much better UX) is found in tools for movie production (Resolve & friends) and not in photo editors, which are largely shit.
I linked to the supplementary information [1] in my previous comment, but here's the link for the paper [2]. The method is implemented by the Colorspacious library [3] for Python, and the source for my color picker [4] contains both JavaScript and WebGL implementations.
> When simulating protanopia, reds should appear darker, due the lack of L cones. However, many simulators incorrectly display red as bright green instead.
For those who can't "see" it:
For people who have protananomaly, bright red (#ff0000) may look like `#cc0000` -- but it's clearly different from bright green (#00ff00) or gray (#cccccc).
Things get confusing with colors like pale brown (#997755) which may look something between fern green (#557755) and dim gray (#667755).
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 ?
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.
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.
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.
Yes, the conclusions here are most likely intuitively correct, but the science is missing. One missing piece of the puzzle is probably the grayscale.
GrayScale = 0.299 * R + 0.587 * G + 0.114 * B
Grayscale tells you if the color is for foreground/background - it's something like the weight the color has.
When I had to pick (too many) colors manually I finally automated color picking by using the following rules - and never had to worry about this subject any more.
A) When combining colors it's good to have matching Gray-Values. (Otherwise one will dominate - you can also use this to make one color stand out)
B) Gray value of background and foreground should differ a lot.
C) Colors of similar gray value should not be picked too close to each other (obviously...)
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.
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. 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-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.
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.
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.
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.
> Which is a very relevant point that should have been included in the article.
The author wrote the article they wrote. (For my part I thought the writing & layout were superb, and the content was very enlightening.)
I note that the author observed:
"Neon colors will definitely attract the attention of readers. But these readers won’t thank you. Most of us get a bit stressed out when we see them: “Highly saturated, light colors will NOT be appropriate [to communicate] Serious or Trust, or Calm,” as Bartram, Patra & Stone explain in their paper “Affective Color in Visualization” from 2017 (PDF)."
Google is absolutely horrible when it comes to graphs in GCP and IIRC analytics. Indistinguishable shades of blue? Yup. Displaying errors with green or blue and displaying other values with red and orange? Yup.
I don't agree with color selections in the article. In majority of examples, I like "non ideal" better. Their "ideal" ones lack saturation, sometimes there is no enough color difference between the segments and their color palette looks rather depressive, autumn. Sorry, but I think this article is just another copywriter writeup trying to make science from something ordinary.
I think the Google example looks better. As someone looking at the chart, I want bold colors that quickly stand out.
Another complain of mine is their statement to use yellow instead of green. But green has the connotation of "good" when paired against red, which it was in their example chart. Using yellow there would change the emotional feeling of the chart, in a way that would make it less understandable.
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.
> 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.
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.
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 ...
The article talks specifically about colorblindness and how you should look at your visualizations in greyscale to ensure the colours are still distinct.
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.
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.
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.
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.
> 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.
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.
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.'
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.
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.
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.
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.
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.
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.
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:
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.
Thanks for the detailed answer. I'll look into terms you pointed out.
I had indeed noted experimentally that picking hues using regular spacing from the common color wheels doesn't work so well, at least not without varying the other components of color. I think for my purposes it will be enough to start with a Munsell-like group of distinct hues and tinker manually from there.
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)
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).
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.
Just that the title says they are mistakes, does not mean they really are. I think his 'worse' examples where a lot better from a color balance perspective.
From experience: The only thing I agree with on the "do not use the basic colors", is that some C-level stakeholder 5 forwarded emails down the road (and never present on the status calls), will not bother to read the damn thing fully, and will see the RED on statistic-X and will think that the X-thing is doomed and we need to slash this project/product/function. Yes, I agree, it's not a color thing, it's a RTFpresentation-thing. But the use of non-standard colors (red-amber/yellow-green) will avoid these mishaps.
Yeah, I was thinking this was going to be an article about making colors easier to see for colorblind people... but it actually appears to be the opposite.
Having some degree color blindness is extremely common. Its depressing how designers just refuse to take this into account.
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?
Thanks for this! Very interesting. I just tried it on the article and, sure enough, the "better" version of the first circles, a number of them do, indeed, look the same when emulating any vision deficiency except blurred vision while they are perfectly discernible in the "not ideal" versions.
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:
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.
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.
> 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.
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.
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.
I know what you mean, but I think there's a bit of nuance here. It's not about excessive slickness to the point where the design itself is more substantial than the data, it's about just enough design so that the presentation doesn't look amateur.
I agree that appearance shouldn't impact our trust, but it often does. If we showed up to a talk on investing, we might be surprised if Rapper 50 Cent took the stage. With his off axis baseball cap, his team jersey and gold chains, we might be questioning whether we should really listen to his investment advice... until he tells us he walked away with $7 million from one of his moves, or $60+ million from another.
On the other hand, if he had just walked out in khakis and a dress shirt, we probably wouldn't have questioned him before he spoke. Nobody is impressed by khakis and a dress shirt, but it's just enough that we don't question his trustworthiness, giving the data a fair chance to come through and be trusted (or questioned) on its own merit.
That ideal world is never going to exist because perceptions of beauty is coded in our DNA. There are countless studies that show that beauty is universally desirable and more objective than people think, to a large extent.
> in an ideal world, trustworthiness of information should not be coupled to how slick its presentation is.
On the surface and without context, this sounds like an ideal, but it’s an interesting question and I wonder if you and I would really want that ideal. I’m not so sure that trustworthiness and presentation are separable nor whether I think they should be. Just Google “ugly web pages” and really imagine how many of them you could see yourself trusting. When there are clear signs that some information has had no thought put into the presentation, isn’t it reasonable and natural to start assuming that lack of attention extends to the information itself? Presentation is a very important part of how information is interpreted. It’s easy, for example, with bad color choices to accidentally emphasize one piece of data over another, and therefore to mislead the viewer - like how something yellow or bright green tends to dominate next to dark grey. By choosing colors carefully like in the article, the presentation can actually make the information more neutral.
An interesting followup question might be: what characteristics should make information trustworthy? What other cues should I look for in a presentation to know whether something is trustworthy? Ideally, the trustworthiness of information should depend solely on whether it’s true, right? But ignoring that there are points of view and shades of true, in the world we live in, we use other cues like who is the presenter and what are their credentials, whether we agree with the conclusions beforehand, whether we were seeking the information or it was pushed, whether the presentation is informational or agenda driven, and lots of other things... since it’s often impossible to know whether information is true or not without resorting to original research. What cues should we use to establish trust in information without having to do original research?
This just common sense. Go take a scientific paper and format it in large pink comic sans and see how it changes your perception of it.
The presentation of information is important. Not just the visuals, but even word choice. For example, you chose to criticize "professional" presentation as "slick", a word that more easily conveys a negative meaning.
You certainly can produce a terribly useless plot with pretty colors. If this then adds to trustworthiness, then that’s a problem. I’d say misleading plots is a bigger issue than choice of color or font... however, all other things being equal- go for pretty...
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.
"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?
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));
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/
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?
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!
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.
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.
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 and the webpage of the project https://colorspace.r-forge.r-project.org/index.html
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/ .
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.
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.
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.
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.
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.
"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
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
[1] Colorblind design is important. This helps with that: https://www.toptal.com/designers/colorfilter
[2] I've found this tool useful: http://paletton.com
[3] "Clickbaity," but also fairly useful: https://www.colorcombos.com
[4] This is a cool tool: https://www.colorbox.io