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

[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

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-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.

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 ?

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.

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.

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.

> 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.

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-part2/

- https://blog.datawrapper.de/colorblindness-part3/

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.

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.

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.

> 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.

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.

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.

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-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.

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

> 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 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));

Documentation: https://github.com/tripu/superscript/blob/master/.github/REA...

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/

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.

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/ .

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

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.

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.

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

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.

He wasn't. He's colour blind.

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?

    cargo install pastel  
    pastel distinct 6

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

undefined

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

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

HSLuv has helped me a lot in creating color scheme.

Seems good to me. Bookmarked.

This is a great article.

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

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

"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