Здесь мы рассмотрим случайное назначение цвета. Оно бывает очень полезным для различных опытов в JS или на страницах реальных сайтов. Поскольку JavaScript назначает цвет html-элементам, исходя из CSS-правил, то будем рассматривать способы в привязке к css-свойствам color и background-color.

Способ 1. Получаем цвет в системе rgb()

Система RGB предполагает, что мы задаем 3 значения цвета по 3-м каналам Red, Green, Blue числами от 0 до 255. Поэтому мы будем трижды генерировать случайное число в этом диапазоне, а затем сформируем строку, которая будет содержать значение вида rgb(120,33, 212).

Для начала определим функцию, которая будет нам возвращать случайное целое число в определенном диапазоне.

Теперь определим функцию, которая будет назначать случайный цвет для document.body:

Пример вживую:

See the Pen Generate Random Colors with JavaScript by Elen (@ambassador) on CodePen.

Получаем Hex цвета

Способ 1.  HEX-цвета на основе массива

HEX - это 16-ричная система цвета, в которой можно записать любой цвет в формате "#f9ca30", используя цифры от 0 до 9 и латинские буквы от  a до f. Именно их мы соберем в массив, а затем используем описанную выше функцию getRandomNumber() для выбора случайного числа из этого массива.

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().

Рабочий пример:

See the Pen Generate Random Hex Color with JS 2 by Elen (@ambassador) on CodePen.

Способ 3. Hex цвета на основе бинарной операции

В этом способе мы получаем диапазон цвета с помощью бинарной операции и превращаем его в 16-ричное значение. Т.е. 1<<24 - это все равно, что 2 в степени 24, или число 16777216, которое уже нам попадалось.

Кстати, в 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() для заполнения нулями.

Пример работает так:

See the Pen Generate Random Hex Color with JS 4 by Elen (@ambassador) on CodePen.

Получаем цвет в системе HSL

Способ 1. Случайное число в широком диапазоне

Система HSL подразумевает, что первое значение указывается в градусах (deg от англ. слова degrees), а 2 других - в процентах. Поэтому используем тот же подход и ту же функцию, что была в начале для генерации случайного числа, но уже в другом диапазоне и получаем такой результат:

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%, т.к. получите черный цвет.

В результате код будет таким:

Результат:

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 на цветовом квадрате и выбрать, в какой системе нужно отображать цвет вашего элемента.

Изменяем систему отображения цвета в Chrome Dev Tools

 

 

Автор: Alex

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *