
Common color mistakes and how to avoid them - hunvreus
https://blog.datawrapper.de/beautifulcolors/
======
ChrisMarshallNY
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)

~~~
OJFord
> [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.

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

[0] [https://apps.apple.com/us/app/sim-
daltonism/id693112260](https://apps.apple.com/us/app/sim-
daltonism/id693112260)

[1] [https://apps.apple.com/us/app/sim-
daltonism/id1050503579](https://apps.apple.com/us/app/sim-
daltonism/id1050503579)

------
hansvm
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...](https://www.color-
blindness.com/coblis-color-blindness-simulator/) 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
_(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
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...](https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html)
[2]
[https://colorcyclepicker.mpetroff.net/](https://colorcyclepicker.mpetroff.net/)

~~~
Chris_Newton
_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/](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.

~~~
eat_veggies
For this there are things like the Lab color space!

[https://en.wikipedia.org/wiki/CIELAB_color_space](https://en.wikipedia.org/wiki/CIELAB_color_space)

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

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

------
mathgenius
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 ?

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

------
AkelaA
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-guideline...](https://developer.apple.com/design/human-interface-
guidelines/ios/images/colorBlindness_fullColor_2x.png) \- 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
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
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/...](https://www.psychologytoday.com/us/blog/brain-
babble/201504/when-it-comes-color-men-women-arent-seeing-eye-eye)

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.

~~~
Jedd
> 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)."

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

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

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

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

------
amai
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/)

------
the__alchemist
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
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/...](https://data-
feminism.mitpress.mit.edu/pub/5evfe9yd/release/3)

(I'm not saying Rost is a political dinosaur but I think she's catering to a
pretty straitlaced audience.)

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

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

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

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

------
sndwnm
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
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
Excellent! Thank you.

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

~~~
joshvm
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-
co...](https://jakevdp.github.io/blog/2014/10/16/how-bad-is-your-colormap/)

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

------
rivo
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...](https://rentafounder.com/generating-colour-palettes-for-charts/)

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.

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

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

------
umvi
> 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
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
> 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
If I've done my job right, the visuals are beautiful and also the least
important part of my presentation.

------
mihaaly
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
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
"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

------
kstenerud
"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?

------
tripu
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/REA...](https://github.com/tripu/superscript/blob/master/.github/README.md#Palette)

------
andrepd
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/)

~~~
jeffbee
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).

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

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

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

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

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

------
nadsumatal
Many of the problems mentioned can be solved by using HSLuv instead of HSL:
[https://www.hsluv.org](https://www.hsluv.org)

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

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

------
Brajeshwar
My friend has a tool that we often use -
[https://colorcolor.in](https://colorcolor.in)

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

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

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

------
msla
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?

------
hoseja

        cargo install pastel  
        pastel distinct 6

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

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

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

------
kuon
HSLuv has helped me a lot in creating color scheme.

------
LargoLasskhyfv
Seems good to me. Bookmarked.

------
cullinap
This is a great article.

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

~~~
MattRix
You might need to read the article again if that's all you got out of it.

~~~
blackearl
3-7 are "use pastels"

------
unnouinceput
"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

