Transforma cualquier cadena a un color aleatorio con JavaScript

¿Alguna vez ha necesitado generar un color único basado en una cadena, como un nombre de usuario o un título? Me pareció interesante en un proyecto crear representaciones únicas de las etiquetas, pero no pude asignar un color a cada etiqueta. ¡Con JavaScript, puedes hacer eso fácilmente! En este artículo, le mostraremos cómo escribir un código simple que convierte cualquier cadena en un color aleatorio utilizando el espacio de color HSL.

El código que usaremos se basa en dos funciones: getColorFromString.

Aquí está el código:

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;
}

que toma una cadena y algunos parámetros opcionales y devuelve un código de color correspondiente en forma de cadena hexadecimal.

Esto es lo que hace la función, paso a paso:

1. comprueba si el stringargumento es nulo, está vacío o tiene menos de 3 caracteres. Si se cumple alguna de estas condiciones, devuelve el defaultColorvalor, que es #000000(negro).
2. calcula un huevalor basado en los tres primeros caracteres del stringargumento multiplicando sus códigos de caracteres.
3. convierte los valores saturationy lightnessde porcentajes a decimales entre 0 y 1.
4. calcula un alphavalor basado en los valores saturationy lightness.
5. define una función auxiliar llamada fque toma un número entero ny calcula el valor rojo, verde o azul para ese índice.
6. utiliza la ffunción auxiliar para calcular los valores de rojo, verde y azul para el código de color final.
7. devuelve el código de color final como una cadena hexadecimal.

Así es como puede usar la función:

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

¡Eso es todo! Con solo unas pocas líneas de código, puede transformar cualquier cadena en un color único. Esto puede ser útil en varias aplicaciones, como generar colores de avatar, resaltar nombres de usuario y más.

Cómo puede usar la getColorFromStringfunción para cambiar el color de todos los componentes con una determinada etiqueta de clase

<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";
  });
});

En este ejemplo, primero usamos document.querySelectorAllpara seleccionar todos los elementos con la clase "colorear". Luego recorremos cada elemento usando el forEachmétodo y establecemos su color de fondo en un color aleatorio generado por la getColorFromStringfunción usando el contenido de texto del elemento como la cadena de entrada.