Преобразуйте любую строку в случайный цвет с помощью JavaScript

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

Вот как вы можете использовать эту функцию:

const color = getColorFromString("hello world");
console.log(color); // Output: "#d2df9f"

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

Как вы можете использовать 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";
  });
});

В этом примере мы сначала используем document.querySelectorAllдля выбора всех элементов класс «раскрасить». Затем мы перебираем каждый элемент с помощью forEachметода и устанавливаем его цвет фона на случайный цвет, сгенерированный функцией, getColorFromStringиспользуя текстовое содержимое элемента в качестве входной строки.