Вам когда-нибудь приходилось генерировать уникальный цвет на основе строки, такой как имя пользователя или заголовок? Мне показалось интересным в проекте создавать уникальные представления тегов, но я не мог назначить каждому тегу свой цвет. С помощью JavaScript вы можете легко это сделать! В этой статье мы покажем вам, как написать простой код, который преобразует любую строку в случайный цвет, используя цветовое пространство HSL.
Код, который мы будем использовать, основан на двух функциях: getColorFromString
.
Вот код:
function getColorFromString(string, saturation = 50, lightness = 75, defaultColor = '#000000') { // Check if the string is empty or null or has less then 3 characters if (!string) { return defaultColor; } if (string.trim().length < 3) { return defaultColor; } // Calculate the hue value based on the first three characters of the string const hue = string.charCodeAt(0) * string.charCodeAt(1) * string.charCodeAt(2); // Convert the saturation and lightness values from percentages to decimals between 0 and 1 const s = saturation / 100; const l = lightness / 100; // Calculate the alpha value const a = s * Math.min(l, 1 - l); // Calculate the red, green, and blue values const f = (n) => { const k = (n + hue / 30) % 12; const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return Math.round(255 * color).toString(16).padStart(2, '0'); }; // Return the hex color code const hexCode = `#${f(0)}${f(8)}${f(4)}`; return hexCode || defaultColor; }
Давайте пройдемся по функции.
который принимает строку и некоторые необязательные параметры и возвращает соответствующий цветовой код в виде шестнадцатеричной строки.
Вот что делает функция, шаг за шагом:
- проверяет, является ли аргумент
string
нулевым, пустым или содержит менее 3 символов. Если какое-либо из этих условий выполняется, возвращается значениеdefaultColor
, то есть#000000
(черный). - вычисляет значение
hue
на основе первых трех символов аргументаstring
путем перемножения их кодов символов. - преобразует значения
saturation
иlightness
из процентов в десятичные числа от 0 до 1. - вычисляет значение
alpha
на основе значенийsaturation
иlightness
. - определяет вспомогательную функцию с именем
f
, которая принимает целое числоn
и вычисляет красное, зеленое или синее значение для этого индекса. - использует вспомогательную функцию
f
для вычисления значений красного, зеленого и синего для окончательного цветового кода. - возвращает окончательный код цвета в виде шестнадцатеричной строки.
Если окончательный код цвета по какой-то причине пуст или нулевой, функция вернет значение defaultColor
.
Вот как вы можете использовать эту функцию:
const color = getColorFromString("hello world"); console.log(color); // Output: "#d2df9f"
В этом примере строка «hello world» преобразуется в цвет #02ba5b
. Попробуйте изменить строку и посмотрите, как изменится цвет!
Вот и все! Всего несколькими строками кода вы можете преобразовать любую строку в уникальный цвет. Это может быть полезно в различных приложениях, таких как генерация цветов аватара, выделение имен пользователей и многое другое.
Как вы можете использовать функцию getColorFromString
для изменения цвета всех компонентов с определенным тегом класса
<div class="colorize">item 1</div> <div class="colorize">item 2</div> <div class="colorize">item 3</div> document.addEventListener("DOMContentLoaded", function() { const elements = document.querySelectorAll('.colorize'); elements.forEach((el) => { const text = el.textContent.trim(); const color = getColorFromString(text); el.style.backgroundColor = color; el.style.color = "#ffffff"; }); });
Наш код заключен в прослушиватель событий DOMContentLoaded
. Это гарантирует, что код будет выполнен только после завершения загрузки HTML-документа.
В этом примере мы сначала используем document.querySelectorAll
для выбора всех элементов с классом «colorize». Затем мы перебираем каждый элемент, используя метод forEach
, и устанавливаем его цвет фона на случайный цвет, сгенерированный функцией getColorFromString
, используя текстовое содержимое элемента в качестве входной строки.