Отличительная генерация цвета в 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, но они должны быть как можно более разными.Я взял hsvToRgb() реализацию от здесь .

Answer 2

Вы можете использовать, например. Color Scheme Designer .

Я не знаю ни одного фрагмента JavaScript, который делает это автоматически, но вы можете создать его, если правильно определите термин " различимые цвета ".

Существует также список по умолчанию из 16 основных цветов в CSS3 (из W3C) :

Вы можете использовать ихи добавьте столько других цветов, которые вам нравятся, для собственного использования.

Answer 3

В качестве временного решения я взял цвета из статьи в Википедии о веб-цветах :

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

Я создал библиотеку Javascript для этого.Вы можете использовать colorchain.js для генерации последовательности цветов с различными оттенками.

Answer 5

Может быть, эта ссылка может помочь вам:

http://kuler.adobe.com/

это очень полезный инструмент!

удачи