Dress your data viz in the most fabulous colours

There are fabulous resources available on the emotional, psychological, and accessibility impact of colour in art and communication. This is not one of them. Instead, this is what you need to know about starting to use colour with intent.

First up, let’s get some vocabulary straight. You’ve probably heard all the following in relation to colour, but what do they mean, how are they different, and how can we use them to our advantage?

Hue. When a cop asks, what colour was his t-shirt? They generally mean what hue was it. They’re not worried about matching it to accessories. The important information is that it was some kind of green as opposed to, say, red. Hue refers to pure spectrum colours, the ones with the straight forward names. The core components change depending on if we’re thinking about pigment (e.g. for mixing paint) or light (e.g in digital work). In pigment the primary colours are red, blue, and yellow, and the secondary colours from mixing them are orange, blue, and purple.

For digital work, the primary colours are the components of light — red, green, and blue. This gives us a way to reference any hue by an RGB value: three figures between 0 and 255. In this model pure red is (255,0,0), green is (0, 255, 0), and blue is (0, 0, 255). And the secondary colours are Blue + Red -> Magenta (255, 0, 255), Red + Green -> Yellow (255, 255, 0), Green + Blue -> Cyan (0, 255, 255).

Value is the relative lightness or darkness of a colour. Artists use contrasting values to create areas of focus in an image. See how the skin really pops out of the painting below? (This painting, by the way, was seen as scandalous when Sargent presented it in 1883, and at a later date he overpainted the shoulder strap to make her dress seem more securely fastened.)

madame x.jpg

You get different values by making tones, tints, and shades. Used interchangeably by people who don’t care (and why should they?) these are different but related terms.

A tint is the addition of white to a colour, it makes it lighter. A shade is the addition of black to a colour, which makes it darker. A tone is the addition of grey to a colour, which makes a softer colour, but guess what? Grey is made up of black and white, so you could say tone is adding black and white to a colour. Or not. Let’s keep it simple. Importantly, none of these additions changes the hue of your starting colour, only the value.

Saturation is the intensity of a colour. It is defined as a percentage from pure colour (100%) to complete grey (0%), at a constant value. When you decrease a colour’s saturation, it makes it feel washed out.

Brightness is not a measurable colour property, but part of how we perceive colour. We tend to call lighter and/or more saturated colours ‘brighter’.

But why does this matter? I ain’t no renaissance painter, Emma, is what you are probably thinking. It matters because adjusting colours (hues) along their value or saturation scales is how you find a palette that is perfectly matched, or perfectly hideous.

Colour is used to provide two types of information in data visualisation: 1) how two elements are related (or distinct from each other), and 2) that certain elements or marks are more important than others.

There are a ton of rules and tools out there to help you pick palettes, but how and when should you use them? Here’s some handy tips to get started:

  • Don’t use colours from a corporate logo in the viz, unless the mark represents the whole of your business (e.g. looking at competitor market share). Otherwise you are implying that, for instance, department #1 is more representative of the business than department #2.
  • Start by selecting your neutrals. Will you have a dark background with light text, or vice versa? Current trends are for deep greys and eggshell creams — but the shades that draw people in change with fashion. Keep your contrast high, and don’t make your background a dark ‘light’ colour, it ends up looking like a bad spray tan. Instead, to bring colour into this part of the viz, pick a fully saturated hue, and a very light tint of the same hue. You can use tools like this [http://www.rapidtables.com/web/color/RGB_Color.htm] to find such pairings.
  • Figure out which palette types you need for the marks on the visualisation: 
    1. Discrete categories, like markets, gender, or departments should use different hues of similar value and saturation. [Categorical Palette]
    2. A continuous variable in a measure field that does not cross zero, such as sales, response count, or percentage coverage, should use a single hue that ranges in saturation or value [Sequential Palette]
    3. A continuous variable that may cross zero, such as profit, change in sales, or survey responses, should use a gradient that moves between two different hues. This can range in value as well, but saturation should remain broadly constant. [Diverging Palette]
  • To find base colours for these palettes, a tool like Adobe Colour can help you pick a set of hues with similar saturation. Mixing saturations at this point will make your colours  feel unrelated. It’s what’s keeping them together. Look at the two samples below. The same hues are in each strip, but the second is desaturated. If you attempt to use the bright pink with the faded orange, they will vibrate against each other and give your audience a headache.
  • This strip can either be a categorical palette on its own, or it can provide a base colour for sequential or diverging palettes. In this case, I used the minty green to create a diverging palette in this colour picker tool.
  • You will likely need a secondary text colour—it can either be high contrast like the International Tourism example above, or more muted — a neutral plus one of your saturated colours in the base palette.
  • Whatever you choose, decide what each colour represents and keep to it — the same colour on the viz should not mean two different things. It’s confusing for users.
  • Users arrive with expectations about colour: High value colours are seen as more important than low value (lighter) colours
  • If you’re working in Tableau, learn how to install your own colour palettes in the Preferences.tps file. It will mean you can easily define and reuse palettes you create.

A note on accessibility. People with colour blindness have trouble distinguishing between particular hue combinations—red-green, or blue-green, depending on the variant. To keep your palettes accessible, make sure they vary in value as well as hue. This means even if someone only sees it in greyscale, they can still distinguish between categories. Tools like ColorOracle can show you how your colours look to those with different types of colour blindness.

That’s it! that should be enough to help you explore colour confidently. Remember the only ‘wrong’ is if people are confused by your choices. Everything else is a matter of taste.
Enjoy!