Создание уникальных цветов с помощью javascript

Ответ 1

Лучший способ - преобразовать из значения HSV. Вы можете разделить максимальное значение "Hue" на количество цветов, которое вам нужно, а затем увеличивать этот результат.

Для улучшения контрастности вы также можете чередовать высокие и низкие значения яркости.

Ответ 2

Я бы генерировал цвета, используя HSV (оттенок, насыщенность, значение) вместо RGB. В HSV цвет определяется оттенком в диапазоне от 0 до 360. Таким образом, если вы хотите, например, 6 разные цвета, вы можете просто разделить 360 на 5 (потому что мы хотим включить 0) и получить 72, поэтому каждый цвет должен увеличиваться с помощью 72. Используйте функцию, например этот, чтобы преобразовать сгенерированный цвет HSV в RGB.

Следующая функция возвращает массив из total разных цветов в формате RGB. Обратите внимание, что в этом примере цвета не будут "случайными", так как они всегда будут варьироваться от красного до розового.

function randomColors(total)
{
    var i = 360 / (total - 1); // distribute the colors evenly on the hue range
    var r = []; // hold the generated colors
    for (var x=0; x<total; x++)
    {
        r.push(hsvToRgb(i * x, 100, 100)); // you can also alternate the saturation and value for even more contrast between the colors
    }
    return r;
}

Ответ 3

Существующие ответы, в которых упоминаются цветовые оттенки Hue, Saturation, Value, очень элегантны, ближе к тому, как люди воспринимают цвет, и, вероятно, лучше следовать их советам. Кроме того, создание длинного предварительно просчитанного списка цветов и выбор подмножеств из них по мере необходимости является быстрым и надежным.

Однако, вот какой-то код, который напрямую отвечает на ваш вопрос: он генерирует случайные цвета в RGB, которые достаточно разные. Есть два недостатка в этом методе, которые я вижу. Во-первых, эти цвета действительно случайны и могут выглядеть грубо вместе, и, во-вторых, может потребоваться некоторое время, чтобы код наткнулся на цвета, которые работают, в зависимости от того, как "далеко друг от друга" вам нужны цвета.

function hex2rgb(h) {
    return [(h & (255 << 16)) >> 16, (h & (255 << 8)) >> 8, h & 255];
}
function distance(a, b) {
    var d = [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
    return Math.sqrt((d[0]*d[0]) + (d[1]*d[1]) + (d[2]*d[2]));
}
function freshColor(sofar, d) {
    var n, ok;
    while(true) {
        ok = true;
        n = Math.random()*0xFFFFFF<<0;
        for(var c in sofar) {
            if(distance(hex2rgb(sofar[c]), hex2rgb(n)) < d) {
                ok = false;
                break;
            }
        }
        if(ok) { return n; }
    }
}
function getColors(n, d) {
    var a = [];
    for(; n > 0; n--) {
        a.push(freshColor(a, d));
    }
    return a;
}

Расстояние между цветами - это Евклидово расстояние, измеренное компонентами R, G и B. Таким образом, самый дальний из двух цветов (черно-белый) может составлять около 441,67.

Чтобы использовать этот код, вызовите getColors, где первым параметром является количество цветов, а второе - минимальное расстояние между любыми двумя из них. Он вернет массив числовых значений RGB.

Ответ 4

'#'+(Math.random()*0xFFFFFF<<0).toString(16);

Не лучший метод для использования, поскольку он может генерировать значения типа #4567, который пропускает две цифры вместо генерации # 004567

Лучше выбрать каждого персонажа индивидуально, например:

'#'+Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16);

Но это легко можно свести к выбору трех чисел, так как гексагоны могут быть сокращены. IE. #457 == #445577

Затем, если вы хотите уменьшить количество возможностей и увеличить разрыв между ними, вы можете использовать:

'#'+(5*Math.floor(Math.random()*4)).toString(16)+
    (5*Math.floor(Math.random()*4)).toString(16)+
    (5*Math.floor(Math.random()*4)).toString(16);

Что делит количество вариантов для каждого цвета на 5, а затем равномерно распределяет распределение.

Ответ 5

Мне нравится использовать значения hsl для указания цвета таким образом.

So

"color: hsl(" + getRandomArbitary(0, 360) + ", 50%, 50%)";

даст вам случайные результаты, но это не даст вам ваших отдельных разделов. Поэтому я бы основал его на значении я цикла. Что-то вроде,

for (var i = 0; i < whateverYourValue; i += 1) {
    color = "color: hsl(" + i * 10 + ", 50%, 50%)";

    // set your colour on whatever
}

очевидно, что приведенное выше является индикативным и недействительным кодом на нем.

Хотите узнать больше о hsl? Проверьте http://mothereffinghsl.com/, потому что вы знаете, это весело.

Ответ 6

Во-вторых, что kbok и Harpyon говорят о работе в цветовом пространстве HSV, и эта небольшая библиотека позволяет легко переключаться между RGB и HSV - и другие.