Перебирать цвета в JavaScript

Я хочу составить список всех цветов, используемых в css, однако они, похоже, хранятся в формате base 16. Я думал, что-то вроде этого может сработать, но это не делает то, что я хочу,

for(x; x< 100; x++)
{
   color = x.toString(16);
}

3 ответа

В JavaScript вы можете использовать "0x" перед числом, чтобы сделать его шестнадцатеричным, и "0", чтобы сделать его восьмеричным. Используя этот метод, это должен быть лучший код. Это, вероятно, приведет к сбою в работе вашего веб-браузера, поскольку во всем CSS имеется 16 581 375 различных возможных шестнадцатеричных цветов. Это больше, чем количество байтов в мегабайте (около 1 миллиона), или сколько лет потребуется, чтобы взломать 17-строчный буквенный пароль.

var colors = new Array();
for(col=0x0;col<=0xFFFFFF;col++) {
  colors.push("#" + col);
}

Цвета, используемые в CSS 3, включают 8 бит каждого из красного, зеленого, синего и альфа-канала, который, как я считаю, равен 8 битам (но определяется как десятичное число, так что это сложнее сказать). Можно представить эти цвета как rgba или hsla. С шестнадцатеричным вы можете представлять только 100% непрозрачные цвета. Итерация по восьми битам одного цвета достаточно проста:

for (var i=0; i<256; i++) {
    var redChan = i;
}

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

// This is not intended to be the best solution, just to demonstrate the basic algorithm.
for (var r=0; r<256; r++) {
    for (var g=0; g<256; g++) {
        for (var b=0; b<256; b++) {
            // Assume we have 8 bits of alpha to use.
            for (var a=0; a<256; a++) {
                console.log('rgba(' + [r,g,b,a/255].join(',') + ')');
            }
        }
    }
}

Цвета в CSS обычно описываются их красными, зелеными и синими значениями (как целые числа от 0 до 255), а иногда и альфа-значением для прозрачности.

Если вас не интересует альфа-значение, вы пишете цвета в CSS в шестнадцатеричном формате #RRGGBB.

Если мы забудем, что мы используем группировки для красного, зеленого и синего, можно увидеть, что мы пишем число между 000000 (0) а также FFFFFF (16777215). Поэтому вы можете описать каждый цвет RGB как целое число в этом диапазоне.

var i = 0, colour;
for (; i < 16777216; ++i) { // this is a BIG loop, will freeze/crash a browser!
    colour = '#' + ('00000' + i.toString(16)).slice(-6); // pad to 6 digits
    // #000000
    // #000001
    // ... #000100 ...
    // #FFFFFE
    // #FFFFFF
}

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

Другие вопросы по тегам