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.

Using design grids to beautify your vizzes

One of the ways designers create simple, striking designs is through the use of grids. Grids act as a skeleton to support the flesh of the design. You can’t see it in the finished article, but without it, the design would be a wobbly mess, kind of like you without your bones.


This is Apple’s design grid for iPhone icons. It already feels kind of familiar if you’re an iPhone user. The grid supports designers in three ways. First, it defines proportions, for instance the inner circles in relation to the outer one. Second, it sets up a way for the design to find balance — you could fill the four corner squares with a single colour and have a design that feels evenly spaced, or use the squares across a diagonal and feel the same. And thirdly it sets up a repeating rhythm for the icons on your home screen. All the apps use the same design grid, and therefore, no matter what colours or content, they share the same ‘feel’.

These are three of Apple’s own icons and how they use the design grid. The grid allows them to share a common language. From the obvious — they all use the outer circle to define the edges of the image, to the tiny — the way petals are lined up with the diagonal dividers, just like the arrows on the compass.

We can apply the same techniques to dashboards and reports. The results help create content that is easier to interpret and have a slick, professional look. You can also share a grid across an analytical team, creating a look and feel that your stakeholders come to know and love, and learn how to intuitively use. The question is, what grid should you use? How should you divide the page? You can choose literally anything!


Let’s pick a random place to start. Here’s an A4 page divided into a 6 by 8 grid. A gutter between each box to align spacings and content. I made this in Adobe Illustrator, but you can fill a Tableau dashboard with 48 shaded text boxes and get the same result. The boxes can now be combined in a whole variety of patterns, and each larger box filled with text, images or charts. Because you’re working off the same base grid, these final elements will always be in proportion and alignment with each other. The gif below demonstrates what I mean.


For every day analytics use, you’re probably don’t want to fiddle around with this detail though. No worries, there’s an easy trick you can use. Humans just love it when things are divided into thirds, or use the golden ratio. You can use that in your dashboards as well. Divide it into a 2x3 or 3x3 grid - leaving one box height for header, and half for the footer if you’re so inclined. Then combine as above. Here’s just a few options to get you on the road to beautifully proportioned, finely balanced dashboards.


If you're interested in learning more about information design tools and techniques, I run a data design half day training course. Get in touch for more details.

How Fast?

Sometimes you really need to see it to believe how fast something is.

I knew Star Wars: The Force Awakens was big, and I knew it got big fast. This dataviz I put together in Illustrator and After Effects shows just how fast.


In my other life, as GracefulRobot, I make data visualisations. Sometimes I make them just for my own entertainment, too.