Subscribe | Alerts via Email
View All Quotes
“Design is not just what it looks like and feels like. Design is how it works.”
-Steve Jobs
<September 2010>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

©2010 Cal Zant
Sign In
Total Posts: 106
This Year: 5
This Month: 0
This Week: 0
Comments: 2

During my career, I have written a few components that used colors to visually encode data.  Recently I found myself looking at a color chart and trying to choose colors that were easy to distinguish from one another ... again.  It seems like I have done that a few times during my career, so this time I wanted to put it to bed for good.  Instead of relying on my unscientific approach, I figured this had to be a problem that someone solved before ... and Excel came to mind.

When you create a chart in Excel, it automatically assigns each series a different color.  Microsoft almost certainly poured a ton of research/money into this same problem I was trying to solve:

Which set of colors are easiest to differentiate from one another?

They probably also took visual disabilities into account, like color blindness (which I have) and poor vision.  So why reinvent the wheel with this stuff?  Here is a pie chart that displays default color series Excel 2007 automatically assigned to a simple pie chart, which includes the HEX and RGB values for each series color:

Default Excel Color Series Easy Colors To Tell Apart

A few things to keep in mind

  • Here is an helpful excerpt from Information Dashboard Design (a very research driven book) on this topic: "When organizing data into distinct groups using different expressions of any preattentive attribute, you should be careful not to exceed five distinct expressions. ... When using hue, keep in mind that even though we can easily distinguish more than five hues, short-term memory can't simultaneously retain the meaning of more than about nine in total."
  • When using colors to visual encode information, think about what it would look like if printed in black and white.  Would you still be able to distinguish between the different series or groups, or would that encoding be lost without color?  Although the project you are working on may never be printed black and white, almost 10% of males have some type of color blindness ... so thinking through this scenario can help you understand their perspective.  Usually adding a label (like the numbers in the example above) or patterns (e.g. stripes) in addition to color would be enough to enable someone to make sense of the encoding, even if they aren't able to process it preattentively like the color coding.

Here is a C# code snippet that I use, which returns a list of the related colors outlined above:

/// <summary>
/// Returns a list of colors derived from the defaults Excel uses for chart series.
/// These colors should be very easy to differentiate from one another.
/// </summary>

public static List<Color> DefaultExcelColors
{
    get
    {
        return new List<Color>()
            {
                Color.FromArgb(69,114,167),
                Color.FromArgb(170,70,67),
                Color.FromArgb(137,165,78),
                Color.FromArgb(113,88,143),
                Color.FromArgb(65,152,175),
                Color.FromArgb(219,132,61),
                Color.FromArgb(147,169,207),
                Color.FromArgb(209,147,146),
                Color.FromArgb(185,205,150),
                Color.FromArgb(169,155,189)
            };
    }
}

Tuesday, April 06, 2010 6:50:28 AM (Central Standard Time, UTC-06:00)  #