Day 15: Custom Color Palettes

One of the things I harp on when it comes to designing something for a client (or anyone really), is context.  Ryan Robitaille (of Tableau Zen Master and now Facebook fame) wrote one of my favorite blog posts of all time last October during Tableau Design Month.  It's an awesome and hilarious read, but focused on one point - you're dashboard better make sense contextually, or it's going to be a dud (that's the nice version of his headline "If content is king, then CONTEXT IS GOD").  One of the easiest ways of doing that is to be thoughtful with color.  Today's quick trick focuses on how to get the right colors every time.

Learn About Tableau

It's amazing to see the brand recognition that some companies have.  The most basic piece of a brand is it's logo - nothing more than text, colors, and images - that become recognized everywhere.  















Just looking at some of the bigger Atlanta brands, color is amazingly impactful - think of Coca-Cola red, Home Depot orange, UPS brown ("what can brown do for you?" - see?).  I actually found a website that profiles the color palettes of brands:

But you can even use something as simple as a browser add-in to pick up colors online.  I use this snazzy one called Colorzilla as a Chrome Extension.  It's baller.

So what am I getting at?  Color matters! A lot.  I'm all about not only creating insightful and functional dashboards, but also ones that have look and feel that match their environment.  That's why you have to get color right.  Getting context right is what drives end user adoption - and if you don't get adoption, it's as if you didn't make the viz in the first place (because the same number of people are using it - zero).

So here's how you nail your colors every time.  Tableau has a little gem of an article that outlines how you write some super simple xml (If I can do it, you can do it), in a blank little file called Preferences that's sitting in your "My Tableau Repository".

The article outlines how you can write in three different types of color palettes: categorical color palette (individual colors), a sequential color palette (from your color fading to white), and custom diverging color palette (from one color to another, think red to green (if it's Christmas time, then never again, right Stephen Few?)).

Here are examples of an NBA color palette I used for some vizzes a while back (yes, it really is this easy):
- Categorical color palette (red, blue, white):
   <color-palette name="NBA Test" type="regular">
      <color>#D53D52</color>
      <color>#0B68AD</color>
      <color>#FFFFFF</color>
    </color-palette>

- Diverging color palette (red to blue, think hot to cold)
    <color-palette name="NBA Sequential" type="ordered-sequential">
      <color>#D53D52</color>
      <color>#0B68AD</color>
    </color-palette>

Load up that preferences file with all sorts of great color schemes.  I'd love to see everything that Kelley Martin has in there.

Hope that was helpful.  Thanks for hanging out.  Hasta manana!
Nelson