Creating spread-out colors

212 Views Asked by At

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?

1

There are 1 best solutions below

4
On BEST ANSWER

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.