javascript中可区分的颜色生成

Question

我想知道是否有一个简单的算法（或jQuery插件）来选择可区分的颜色，最多约20种不同的颜色。如果没有，我在哪里可以找到一系列可以直接使用的可区分颜色？

我的用例是为饼图生成不同的颜色。

Answer 1

我的想法是从HSV颜色模型开始，以最大饱和度和值来绕着周边（色调）走动：

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

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

distinctColors(10)产生：

[[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]]

仅通过查看RGB值很难说，但它们应尽可能不同。我从here开始执行hsvToRgb()。

Answer 2

你可以使用例如。 Color Scheme Designer

我不知道任何自动执行此操作的JavaScript代码段，但如果您正确定义＆＃34; 可区分颜色＆＃34;

的术语，则可以创建一个。

还有默认list of 16 basic colors in CSS3 (from W3C)：

您可以使用它们并添加您喜欢的其他颜色以供您自己使用。

Answer 3

作为临时解决方案，我从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
];

Answer 4

也许这个链接可以帮助你：

http://kuler.adobe.com/

这是一个非常有用的工具！

祝你好运

Answer 5

我为此创建了一个Javascript库。您可以使用colorchain.js生成一系列具有不同色调的颜色。