29 Colour Palettes

This post includes 29 colour palettes compromising of 5 colours in each palette that I’ve created using the adobe colour wheel. They have all been passed through a colour-blind test individually. You can find the preference file in the Git Repo above.

Hi All,

At the end of last year, I saw Kate Brown‘s post recommending “Colors for Data Science A-Z: Data Visualization Color Theory” so thought it would be an interesting watch! The course is about 4 hours long and covers everything from the physics insights of the electromagnetic spectrum, how and why we see colours because of wavelengths and frequencies. Through to learning about colour emotions, tooling’s and colour palettes. I too, would highly recommend the course. It was light hearted and the instructors made it fun.

I won’t go into details fully of the course for the sake of repetition and taking away from the value it served, but below are some of my thoughts on applying colour within the realm of Tableau and a few other resources found on the way. The focuses will predominately be on colour blindness and how we can build dashboards with that in mind.

Working with Tints, Shades and Tones

So by means of introduction it’s important to introduce a few things for basic understanding of colour first.

This is a normal colour wheel that most of us will be familiar with.

Achromatic colours are not in the colour wheel (black/white/grey). Since there is no hue in it, they have no saturation. They have their own wheel.

When we consider Tint, shades and tones. We can take an initial colour and work outwards to white, grey and black. Check out below.

The importance of RGB

Dashboards tend to be things we view on laptop screens and phones. They will rarely be printed. Devices have light sources that will emit the different colour or mix the waves. They start as dark and the colours are added.

I found this great resource on 99Designs that discusses the differences between CMYK (subtractive) and RGB (additive) colour.

Colour blindness Theory

Onto the main subject today, colour blind tested palettes.

The colour test that you can find here is a way of testing the different types of colour blindness through using coloured dots. Someone who is colour blind will see all the dots as the same colour, or will mistakenly get the number wrong, whereas someone who isn’t colour blind should be able to spot the number in the dotted pattern.

Here is an example site to try your own.

So lets test some of my previous vizzes! Would they pass colour-blind tests?

For this, again I’m going to refer to the adobe tool. This adobe colour wheel is my go-to resource for creating my own palettes, and finding new colour palettes through the explore page. Let’s start with Last years Iron Viz.

First go to extract theme.

Upload an image of your dashboard.

You can then go to the Accessibility Tools section, make sure from the drop down you click Color Blind Safe instead of Contract Checker.

In the bottom right of the screen shot next to the blue save UI button you will see “Check for Accessibility”. By clicking this, a colour blind simulator appears.

So it looks like this colour palette passes the colour blind simulator. It particularly works well for Tritanopia but less so for Protanopia and Deuteranopia.

But what happens if the palette isn’t safe?

Lets give another viz a look. How about the chord diagram practice visualisation.

Here are some of the extracted colours from the screen.

Lets go back into the accessibility colour checker.

Uh-oh!! Looks as though this colour palette causes some conflicts.

Fortunately it show us with dashes where the clashes are so we can then go back and amend those colours. Our light pastel yellow and pink tones are clashing.

So that’s how we can test some of our previous colour palettes – but what about creating new ones?

In the repo are 29 palettes I’ve made that you can copy and paste into your Tableau preferences file.

You can rename them before adding them to your Tableau script. You can find them in the repo link at the top of the page. I’ve saved the colours too as images if you just want to take your favourites.

As you can see from the small snippet below I created each of these themes with accessibility in mind. The icon in the bottom right of each palette means that it is a colour blind safe theme.