Creating spread-out colors

Question

I'm drawing graphs with Microsoft Chart Controls and I'm trying to generate different colors for each line in the graph (up to about 15-20 colors). If there are 14 lines to be drawn, I want to create a different color for each one of them.

Now, I've tried this with using HSV:

private Color GetSeriesColor(int seriesIndex,
                             int seriesCount)
{
    return ColorHelper.FromHsv(360.0*seriesIndex/seriesCount, 1, 1);
}

The problem is however that the green and blue colors look very similar:

enter image description here

Is there a way in C# to create x colors that look different to a human?

score 1 · Accepted Answer · edited Apr 13 '17 at 12:32

1

You could try dual pointers, each pointing to a different place in the spectrum. At least this way you'd end up with alternating colors.

private Color GetSeriesColor( int seriesIndex, 
                              int seriesCount, 
                              int steps ) {
    return ColorHelper.FromHsv( 
        ( 360.0 / steps ) * ( 1.0 * seriesIndex / seriesCount ) + 
        ( ( seriesIndex % steps ) * ( 360.0 / steps ) ),
        1, 1 );
}

Calling code:

GetSeriesColor( 5, 18, 2 );

This will create two "pointers". The first will start at position 0, the second at position 180. The function will alternate between the two pointers, giving a sort of "checkerboard" look to the graph.

If you don't like the effect, your best bet might be a color palette (stored in an array) with x number of predefined colors, looping when you've reached the end (or possible adding shading, such as darker colors to lighter colors).

EDIT
I'll add, though, that using color coding willy-nilly is often a poor design choice. You'd be better off using labels directly on the graph, if possible. Beyond about 8 colors the human eye begins to have trouble differentiating between them. See https://ux.stackexchange.com/questions/17964/how-many-visually-distinct-colors-can-accurately-be-associated-with-a-separate.

edited Apr 13 '17 at 12:32

Community

1
1

answered Oct 15 '12 at 14:55

JDB

25,172
5
72
123

I gave your code a try. And the problem is more or less the same. With 15 colors, both reds look very similar and the greens are still hard to separate. A custom color palette is a good idea of course, I can make one with 20 colours and be done with it. Still, I'm curious if there's a way to automate it. – Carra Oct 15 '12 at 15:04
One issue that you haven't addressed is color blindness, which effects about 11% of males. 1 in 10 of your potential users may not be able to distinguish between green and red, much less between light green and slightly lighter green. – JDB Oct 15 '12 at 15:12
1

You may also be interested in this: http://www.perceptualedge.com/articles/Whitepapers/Common_Pitfalls.pdf or even better: [Information Dashboard Design by Stephen Few](http://www.amazon.com/dp/0596100167/?tag=hyprod-20&hvadid=15474473619&hvpos=1o1&hvexid=&hvnetw=g&hvrand=820645365590233094&hvpone=&hvptwo=&hvqmt=&ref=asc_df_0596100167) (which I highly, highly recommend) – JDB Oct 15 '12 at 15:14
I'm aware of color blinds and took it into account. You can check/uncheck each of the 14 lines, there's a text next to each checkbox/color. I'll take a look at the other posts, thanks for the information! – Carra Oct 15 '12 at 15:24

Creating spread-out colors

1 Answers1