Здесь мы рассмотрим случайное назначение цвета. Оно бывает очень полезным для различных опытов в JS или на страницах реальных сайтов. Поскольку JavaScript назначает цвет html-элементам, исходя из CSS-правил, то будем рассматривать способы в привязке к css-свойствам color
и background-color
.
Способ 1. Получаем цвет в системе rgb()
Система RGB предполагает, что мы задаем 3 значения цвета по 3-м каналам Red, Green, Blue числами от 0 до 255. Поэтому мы будем трижды генерировать случайное число в этом диапазоне, а затем сформируем строку, которая будет содержать значение вида rgb(120,33, 212)
.
Для начала определим функцию, которая будет нам возвращать случайное целое число в определенном диапазоне.
1 | const getRandomNumber = (maxNum) => Math.floor(Math.random() * maxNum) |
Теперь определим функцию, которая будет назначать случайный цвет для document.body
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Функция, получающая цвет для body function randomBgColor() { let r = getRandomNumber(256); let g = getRandomNumber(256); let b = getRandomNumber(256); // строка в формате rgb. let bgColor = `rgb(${r},${g},${b})`; // можно вывести значение в console. console.log(bgColor); // назначаем цвет для ищвн. document.body.style.background = bgColor; } // вызываем функцию randomBgColor(); |
Пример вживую:
See the Pen Generate Random Colors with JavaScript by Elen (@ambassador) on CodePen.
Получаем Hex цвета
Способ 1. HEX-цвета на основе массива
HEX - это 16-ричная система цвета, в которой можно записать любой цвет в формате "#f9ca30
", используя цифры от 0
до 9
и латинские буквы от a
до f
. Именно их мы соберем в массив, а затем используем описанную выше функцию getRandomNumber()
для выбора случайного числа из этого массива.
1 2 3 4 5 6 7 8 9 10 11 12 13 | function hexColor() { let hexNumbers = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f" ]; let hexColorCode = "#"; for (var i = 0; i < 6; i++) { let index = getRandomNumber(hexNumbers.length); hexColorCode += hexNumbers[index]; } return hexColorCode; } document.body.style.background = hexColor(); |
See the Pen Generate Random Hex Color with JS 1 by Elen (@ambassador) on CodePen.
Способ 2. Hex цвета на основе числа, преобразованного в 16-ричную строку
Дело в том, что цвет в системе RGB фактически представляет собой число, которое будет равно 256 (максимум цвета в канале), умноженному на себя трижды 256*256*256
, т.е. 16777216
. Кроме того, чуть меньшее число 16777215
является представлением числа 'ffffff'
в десятичном формате. Поэтому мы можем взять это число и преобразовать его в 16-ричную систему с помощью метода toString(16)
.
Единственная проблема - временами при генерации малого числа мы будем получать значение из 5 или даже 4-х цифр, что не является валидным значением для цвета текста или фона. Поэтому в коде мы заполняем нулями в начале отсутствующие значения цвета с помощью метода строк padStart()
.
1 2 3 4 5 6 7 8 9 | const setBg = () => { let randomColor = Math.floor(Math.random()*16777215).toString(16); //console.log(randomColor, randomColor.length); // вы можете вывести значение цвета в консоль if (randomColor.length<6) randomColor = randomColor.padStart(6,"0"); document.body.style.backgroundColor = "#" + randomColor; output.innerHTML = "#" + randomColor; } setBg(); |
Рабочий пример:
See the Pen Generate Random Hex Color with JS 2 by Elen (@ambassador) on CodePen.
Способ 3. Hex цвета на основе бинарной операции
В этом способе мы получаем диапазон цвета с помощью бинарной операции и превращаем его в 16-ричное значение. Т.е. 1<<24
- это все равно, что 2 в степени 24, или число 16777216
, которое уже нам попадалось.
1 2 3 4 5 6 7 8 9 | const setBg = () => { const randomColor = (((1+Math.random())*(1<<24)|0).toString(16)).substr(-6); //let randomColor = (~~(Math.random()*2**24)).toString(16); //console.log(randomColor); if (randomColor.length<6) randomColor = randomColor.padStart(6,"0"); document.body.style.backgroundColor = "#" + randomColor; output.innerHTML = "#" + randomColor; } setBg(); |
Кстати, в 3-й строке кода здесь закомментирована строка, где 2 возводится в степень 24, и таким образом также формируется цвет. Вы можете выбирать способ создания 16-ричного кода.
Давайте посмотрим, как это работает:
See the Pen Generate New Random Hex Color with JavaScript by Elen (@ambassador) on CodePen.
Способ 4. Hex цвета на основе генерации отдельных значений
Тут мы используем функцию hexVal("", 6)
, которая генерирует в каждой своей итерации внутри цикла while
одну букву или цифру из диапазона от 0 до 16 в десятичной системе, а потом мы переводим ее в 16-ричную систему с помощью метода toString(16)
. Опять-таки здесь можно столкнуться с получением 5- или даже 4-хзначного числа, поэтому используем метод padStart()
для заполнения нулями.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const setBg = () => { let randomColor = hexVal(6,""); //console.log(randomColor, randomColor.length) if (randomColor.length<6) randomColor = randomColor.padStart(6,"0"); document.body.style.backgroundColor = "#" + randomColor; output.innerHTML = "#" + randomColor; } function hexVal (a,b){ while(a--){ b+=""+( ~~(Math.random()*16) ) .toString(16); } return b; } setBg(); |
Пример работает так:
See the Pen Generate Random Hex Color with JS 4 by Elen (@ambassador) on CodePen.
Получаем цвет в системе HSL
Способ 1. Случайное число в широком диапазоне
Система HSL подразумевает, что первое значение указывается в градусах (deg
от англ. слова degrees), а 2 других - в процентах. Поэтому используем тот же подход и ту же функцию, что была в начале для генерации случайного числа, но уже в другом диапазоне и получаем такой результат:
1 2 3 4 5 6 7 8 | const getHSLColor = () => { const h = getRandomNumber(360); const s = getRandomNumber(100); const l = getRandomNumber(100); return `hsl(${h}deg, ${s}%, ${l}%)`; }; document.body.style.background = getHSLColor(); |
See the Pen Generate Random Colors with JavaScript by Elen (@ambassador) on CodePen.
Способ 2. Только темные цвета в системе HSL
Давайте посмотрим на систему HSL с точки зрения ее составляющих. H, или Hue - оттенок отвечает за сам цвет, который мы называем словами "красный", "синий", "фиолетовый", "зеленый" и т.п. S, или Saturation - насыщенность отвечает, насколько ярким будет цвет, а L, или Lightness - осветление указывает насколько светлым или темным будет цвет.
Поскольку нам нужны разные цвета, то H будет будет меняться от 0 до 360 градусов. Поскольку нужны насыщенные цвета, то можем оставить значение 50% для S. И поскольку нужны темные, то оставляем 10-20% для L, но не 0%, т.к. получите черный цвет.
В результате код будет таким:
1 2 3 4 5 6 7 8 9 10 11 12 13 | const getRandomNumber = (maxNum) => Math.floor(Math.random() * maxNum) const getRandomColor = () => { const h = getRandomNumber(360); return `hsl(${h}deg, 50%, 10%)`; }; const setBackgroundColor = () => { const tempColor = getRandomColor(); document.body.style.backgroundColor = tempColor; }; setBackgroundColor(); |
Результат:
See the Pen Generate HSL Random Colors with JavaScript by Elen (@ambassador) on CodePen.
Соответственно, для светлых цветов вам понадобится значение L (Lightness) в районе 80-90%. Только не выбирайте 100%, т.к. получите белый цвет.
Подбор цветов с помощью HSL
В примере ниже вы можете получить набор цветов на основе выбранного вами. В коде от есть функция, преобразующая цвета в системе HSL в систему RGB.
See the Pen color picker with hsl by Mateusz (@mateuszpigula) on CodePen.
Кстати, в Инструментах разработчика в Chrome вы можете кликнуть с Shift
на цветовом квадрате и выбрать, в какой системе нужно отображать цвет вашего элемента.