8

I'm currently implementing the Google Visualization API into an existing platform, one requirement of which is the ability to choose custom colours for chart elements (such as pie slices and columns).

We will be producing pie charts, (optionally stacked) bar charts, (optionally stacked) column charts (and possibly scatterplots at some point in the future).

There is some consternation over whether to provide colour palettes as groups of similar colours to match the company branding (#138181) or to provide colour palettes of disparate colours such as those in the example links below.

I'm of the view that using disparate colours is easier to comprehend than similar colours, particularly when number of slices > 4. I have only ever seen similar colours used in the professional media when the maximum number of slices is around 5.

The kicker is that generated charts will have between 1 and 20 slices (pie slices, columns, or dot arrays in the case of scatterplots).

1
  • Do you need to show the data to external parties or is it only for internal use. Are the users going to copy charts etc into powerpoint presentations or is this simply a user performance dashboard. Our application to create reports contains a simple Color Pallete selector and editor so users can export the colors they want and set a pallete as a default.
    – Barfieldmv
    Jan 25, 2012 at 9:57

3 Answers 3

7

According to the principles of grouping, partly described by the Gestalt principle of Prägnanz, same-colored elements are grouped as a collective in the mind:

The law of similarity – The mind groups similar elements into collective entities or totalities. This similarity might depend on relationships of form, color, size, or brightness.

If the elements, in this case chart elements, are to be treated as differentiated entities, then you should use disparate colors. The only use where similar colors would be advisable would be if the chart elements had to be grouped when sharing similarities.

This is taken from an informational point of view. Other POV can be taken into account, as using similar colored elements for graphic design purposes.

Examples

enter image description here

This chart is a perfect example (never mind the labels). Green-hued pieces would represent a global similar attribute, in contrast with red-hued pieces (for example healthy vs. unhealthy types of food).


enter image description here

This is a common use of colors. Same-colored bars represent the same data at different times.


enter image description here

Here, the disparity of colors represents different type of elements, not to be grouped in any way.


enter image description here

Lastly, similar-colored elements can be used for aesthetic reasons.


As a bonus, I would recommend getting inspiration from Information is Beautiful's incredible charts (who, by the way, make a very good use of colors.)

1
  • I've always had an affinity for The Economist's graphs; thanks!
    – msanford
    Jan 25, 2012 at 15:29
3

This depends on your goal: if the goal is to drive home company branding, use the similar colours. On the other hand if the goal is to produce charts that are comprehensible, use dissimilar colours.

I would go with dissimilar colours every time. Whole point of graphs is to illustrate something in easily digestible form. Using very similar colours actually tries to defeat this point.

1
  • 1
    That's precisely what I have in mind. Still, I'm interested to see what else comes up.
    – msanford
    Jan 24, 2012 at 22:00
1

It should be possible to develop a color scheme that combines well with the brand color while still maintaining sufficient contrast between the colors. Because producing a chart with 20 slices of roughly the same color is not a good idea. Here's a great resource for this type of design: The NASA Color Usage Site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.