Вам когда-нибудь приходилось генерировать уникальный цвет на основе строки, такой как имя пользователя или заголовок? Мне показалось интересным в проекте создавать уникальные представления тегов, но я не мог назначить каждому тегу свой цвет. С помощью 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;
}

Давайте пройдемся по функции.

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

Вот что делает функция, шаг за шагом:

  1. проверяет, является ли аргумент string нулевым, пустым или содержит менее 3 символов. Если какое-либо из этих условий выполняется, возвращается значение defaultColor, то есть #000000 (черный).
  2. вычисляет значение hue на основе первых трех символов аргумента string путем перемножения их кодов символов.
  3. преобразует значения saturation и lightness из процентов в десятичные числа от 0 до 1.
  4. вычисляет значение alpha на основе значений saturation и lightness.
  5. определяет вспомогательную функцию с именем f, которая принимает целое число n и вычисляет красное, зеленое или синее значение для этого индекса.
  6. использует вспомогательную функцию f для вычисления значений красного, зеленого и синего для окончательного цветового кода.
  7. возвращает окончательный код цвета в виде шестнадцатеричной строки.

Если окончательный код цвета по какой-то причине пуст или нулевой, функция вернет значение 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, используя текстовое содержимое элемента в качестве входной строки.