I would like to know if there is a simple algorithm (or jQuery plugin) to select distinguishable colors, up to about 20 different colors. If there is not, where can I find an array of distinguishable colors that I could use directly ?

My use case is to generate different colors for pie charts.

I would like to know if there is a simple algorithm (or jQuery plugin) to select distinguishable colors, up to about 20 different colors. If there is not, where can I find an array of distinguishable colors that I could use directly ?

My use case is to generate different colors for pie charts.

• javascript
• colors

4 Answers 4

My idea is to start from HSV color model and walk around the perimeter (hue) with maximal saturation and value:

function hsvToRgb(h, s, v) {
  //... see e.g.: http://snipplr./view/14590
}

function distinctColors(count) {
    var colors = [];
    for(hue = 0; hue < 360; hue += 360 / count) {
        colors.push(hsvToRgb(hue, 100, 100));
    }
    return colors;
}

The distinctColors(10) produces:

[[255, 0, 0], [255, 153, 0], [204, 255, 0], [51, 255, 0], [0, 255, 102], [0, 255, 255], [0, 102, 255], [51, 0, 255], [204, 0, 255], [255, 0, 153]]

Hard to tell by only looking at RGB values, but they should be as different as possible. I have taken the hsvToRgb() implementation from here.

You can use eg. Color Scheme Designer.

I do not know about any JavaScript snippet that does that automatically, but you can create one if you properly define the term of "distinguishable colors".

There is also a default list of 16 basic colors in CSS3 (from W3C):

You can use them and add as many other colors your like for your own usage.

As temporary solution, I picked up colors from the Wikipedia article on web colors:

var colors = [
    '#0000FF', //blue
    '#FFFF00', //yellow
    '#008000', //green
    '#FFA500', // orange
    '#FF0000', //red
    '#800080', //purple
    '#808000', //olive
    '#00FF00', //lime
    '#800000', //maroon
    '#00FFFF', //aqua
    '#008080', //team
    '#000080', //navy
    '#FF00FF', //fushua
    '#808080' //gray
];

I've created a Javascript library for this. You can use colorchain.js to generate a sequence of colors with varying hues.