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.
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 ...
> 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.
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.
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.
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.
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.
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.
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 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"
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.
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/
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!
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?
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.
> 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.
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 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.
> 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?
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.
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.
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.
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.
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).
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.
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.
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 ?
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.
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.
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.
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.
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...)
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.
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.
124 comments
[ 1.3 ms ] story [ 166 ms ] threadFirst 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.
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.
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.
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.
Edit : Perhaps someone can create a color selector that incorporates her recommendations, like avoiding primary or saturated colors, avoiding certain colors, etc.
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
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"
[2] https://github.com/taketwo/glasbey
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.
[0] https://apps.apple.com/us/app/sim-daltonism/id693112260
[1] https://apps.apple.com/us/app/sim-daltonism/id1050503579
https://www.aao.org/eye-health/tips-prevention/do-color-blin...
Its gotten a lot better over the last few years. It wasn't that long ago I blacklisted their domain from google.
He wasn't. He's colour blind.
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 am reminded a bit of a jeff below story and a kissinger story.
Yes, although equally sometimes polish can draw attention away from a lack of substantive content
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.
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?
https://en.m.wikipedia.org/wiki/Physical_attractiveness_ster...
https://www.nngroup.com/articles/aesthetic-usability-effect/
https://vimeo.com/209961130
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.
Compare these two sites:
https://lygte-info.dk/
https://www.lifewire.com/best-rechargeable-battery-chargers-...
Before looking at the content, my bias is that the former is going to provide more reliable information.
[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.
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.
(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.
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.
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... [2] 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.
https://en.wikipedia.org/wiki/CIELAB_color_space
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.
Can you share the specific resource you used? Very interested in writing something like this into my own project.
[1] https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation... [2] https://doi.org/10.1109/TVCG.2009.113 [3] https://colorspacious.readthedocs.io/en/latest/tutorial.html... [4] https://github.com/mpetroff/color-cycle-picker
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).
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.
https://www.nhs.uk/conditions/colour-vision-deficiency/
apparently there are other types in addition
Fashion is significantly more limited and changes more often. Not that these basics can not change, but fashion refers to something still less stable.
Maybe some of these references are a starting point, idk.
(warning -PDF link)
https://scholarworks.umass.edu/cgi/viewcontent.cgi?article=1...
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...)
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.
Is this person a known designer? How seriously should we take their personal opinion?