Creating Custom Color Palettes in Tableau Desktop

Posted by

Most people agree that Tableau Software have done an incredible job to create a product which adheres to and makes accessible so many best practice approaches related to data visualisation, human perception and processing of information. But people still like to be little rebels sometimes. And for various reasons.

Tableau Software have equipped Tableau Desktop with a range of colour palettes which work perfectly well for most users, provide variety, while giving us the best selection of colour hues to make our data and information stand out, become clear and understandable.

Orange and Blue - Once you've seen it, you can't ignore it...
Orange and Blue – Once you’ve seen it, you can’t ignore it…

So why do we still want or sometimes even need something ‘extra’? Why do people ask for ‘special treatment’ and custom colour palettes?

Well, for one, many organisations invest a fair amount of money into creating their brand, complete with corporate colours, logos and taglines. And these branding exercises are no small task. Documents are written to justify the colour choices based on perception and emotions. There are reasons for those colours. Most of the time.

Tableau authors and end users, therefore, want to see (or are instructed to use) those corporate colours reflected in their Tableau dashboards to carry through the branding.

Also, custom colours are a bit of fun and those of us who create data visualisations for fun outside of our day job often look for interesting datasets which may require some specific colours to really bring the message to life.

Are custom colour palettes a good idea?

Yes. Yes, they are. They have limitations, too, for example if your corporate colour scheme contains 6 colours and you try to create 20 dashboards with just those 6 colours. You will bang your head against the wall. Sooner or later.

I recommend you use your distinct corporate colours only for some aspects of your dashboard (e.g. to track a cohort in your dataset, or to visualise one key metric which you show in various visualisations) and to keep the colours overall to an aesthetic minimum. Less is more. It has to make sense and enhance rather than distract from your message.

But I also recommend that you create a couple of custom colour palettes for yourself. They are fun to play with, they help you learn about colours and they provide you with additional options for your visualisations.

How do you create a custom colour palette?

Well, you are in luck! It is very easy to create a custom colour palette, as it requires only minor scripting. Most of the effort is in selecting colours and matching combinations. Unless you have a colour palette with HTML codes readily available and just need the code to make it happen.

But let’s go step by step.


1  Select your colours

  • Option 1: You already have a colour palette and the HTML codes available – jump to step 3
  • Option 2: You have a colour palette but don’t know the HTML codes – jump to step 2
  • Option 3: You’re starting from scratch and don’t really know what your colour palette should look like… Just keep reading…
  • Pick a couple of colours you would like to have in your colour palette. For this example I will pick Blue and Green because they happen to be my favourite colours. I use the google image search to find some nice shades of blue and green, but if you have a picture, logo or other object in your preferred colour, just keep it handy for the next step.
BlueGreen
Some colour samples from Google’s image search

2  Identify the HTML codes of your colours

  • Open Tableau Desktop and the Superstore Sales dataset – we need a little bit of data to help us here. Drag the Sales measure to rows to create a simple bar chart. This will help us use the Colour picker, which in turn will provide us with the HTML code for colours we want.

Bar Chart

  • Place your browser window and your Tableau Desktop window next to each other on the screen (or on two screens if you have that setup).

Colour Picker double screen

  • In your Bar chart visualisation click on the colour marks card, then on ‘More Colours…’

Bar Chart and Colour

  • and on ‘Pick Screen Colour…’

Colour Picker

  • This will let you hover over any pixel on your screen to pick up the colour you’re seeing.
  • Now hover over the relevant shade of your chosen colour and click on it to select it. Tableau will display the HTML code for your colour in the bottom right corner of the ‘Select Colour’ window

Colour picked


3  Enter your colours into this spreadsheet

  • Open the spreadsheet. This Excel file lets you keep track of your colour palette HTML codes and colour descriptions while also generating the necessary script to add to your preference file when you’re done.
  • Enter your colour code and a name (optional) into the spreadsheet. I recommend adding a name as this help arrange colours into the right order.

Colour palette template

Tip

Check the structure of Tableau’s inbuilt colour palettes. They follow a certain logic and you should follow the same approach when creating your own palettes. Let’s look at this:

  • The colours alternate dark and light before changing, i.e. dark blue, light blue, dark orange, light orange, dark green, light green, and so on.
  • Move from your main colour through lighter shades before changing colour rather than putting all your dark colours first and then the light shades.
  • Why? Because when you click ‘assign palette’ the colours are assigned in the order in which they are displayed…
Ugly colour palette
This colour palette does not have a good order…

 

Nice colour palette
Much easier on the eye – shades of a colour before changes of colour!
  • Continue like this until you have all the colours you want, up to a maximum of 20 colours for a regular colour palette.
  • Either keep searching for your colours in images etc. or use a website like www.colorhexa.com to start creating your colour palette. After entering your main colour, this page will provide you with complementary colours, gradients and various shades of your colour for you to mix and match until you have completed your list.

Colorhexa

  • In the spreadsheet you have the option of 3 colour palettes: regular, ordered sequential and ordered diverging. Most commonly, people will create regular palettes, but if you need a sequential one, pick your colour and add various shades in order from light to dark or in reverse. For a diverging palette, pick two colours as your end points of a continuum and Tableau will create the shading ‘in between’

4  Copy the script from your spreadsheet into your Tableau preferences file

  • Open your Tableau preferences file in Notepad or Wordpad

Preferences

  • When you have finished creating your palette and entering the relevant HTML codes into the spreadsheet, give it a name (cell H7) and copy the relevant script from column H and paste it into your preferences file between
    <?xml version=’1.0′?>
    <workbook>
    <preferences>
    and
    </preferences>
    </workbook>

Copy and Paste Preferences script


5  Save your preferences and restart Tableau Desktop


6  Drag a dimension to the colour pill and admire your new options!

New palette


 

Over to you!

How did you go? Did it all work?

I hope you enjoyed creating your own colour palettes and found this article useful. If any of the steps didn’t work for you or weren’t clear, please let me know so I can make the appropriate edits.

 

 

3 comments

    1. have you looked at the preferences syntax? You’re missing all the xml if the above is the only content of your file…

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s