I am looking for pointers on how to pick a set of colours (or a colour gradient) that are clearly distinguishable, for use in scientific figures. Was there any systematic research on this? If yes, I'd appreciate some links.
When creating scientific figures, colour is often used to distinguish elements. One example is lines in a plot:
Another example is a colour gradient to denote values:
I'm interested in two questions:
How can I pick the largest set of colours that are still distinguishable from each other, for use in a plot? Similarly, what colour gradient will allow the eye to discern the largest set of values and detect the slightest change? Are there colour schemes made specifically for this? I'm looking for something that works well both on-screen and in print.
How can I pick a set of colours (or a gradient) that are still distinguishable enough when converted to greyscale, but the contrast is enhanced when they're viewed in colour? Is there a colour gradient that is not much worse in this respect that a full-white to full-black gradient when converted to greyscale, but gives significantly enhanced contrast when reproduced in full colour? (Take e.g. my example figure from above with the rainbow colour: it has excellent contrast in colour, but it's unusable in greyscale. Many scientific journals will publish figures in colour online, but ask for figures that are usable in greyscale too, in the print edition.)
Here's a handy splash of science.
- Your eyes' retinas have receptors for red, green and blue light (cones) as well as receptors for general light levels (rods)
- Between your eyes and visual cortex, there's a step (the LGN) where colour information is converted into opposing pairs: red:green, blue:yellow, and black:white. Yellow is created in special cases where red and green are in balance and blue is low, and most browns are effectively dark or low-saturation yellows (higher red and green compared to blue). You can see how these pairs are opposed to each other with after images - stare at a bright light of a colour, and look away, and the after image effect you will see will be made of its opposite colours.
So that gives you the four most clearly differentiable hues (plus no black or grey: no hue). Within each of these, you can use differences in lightness and saturation to create more colours. If you need still more colours, you can take mid points between these four hues, and then vary lightness and saturation again. (be careful with lowering saturation and raising lightness too high as it reduces the hue contrast).
Bare in mind that yellow is a special case - it is characteristically bright because it's being fueled by the activation of two types of receptors, not just one.
The question about how these convert to greyscale is important but I think probably best answered seperately. There are differences (e.g. reds tend to be darker) but it depends on other things like how the convesion is done, etc. The colour intensity chart from the above link about yellow might help as a starting point:
Two things to bare in mind:
- Colour scales aren't perceived linearally. In colour heatmaps, like the second image you post, colour scales are good for helping specific values to be perceived, but this comes at a cost that the overall picture of what is high or low compared to what is harder to intuitively percieve. More info on this here. Use such 'rainbow scales' only when getting specific values from a visualisation is more important than seeing the bigger picture (usually, this means rainbow scales are okay for visualisations that are for analysis by experts, but bad for visualisations that are for general communications purposes)
- A surprisingly high number of people (particularly men) are colour blind. In particular, something like 10% of men struggle to percieve differences between red and green - seeing those colours as the same hue. These people can usually make an educated guess based on lightness levels, but it's difficult and so it's best practice to make sure that where red and green communicates menaing, there are other ways to tell these colours apart than just hue. Use colour blindness simulation tools like vischeck to test designs, don't rely on just converting to greyscale as that's not an accurate simulation.