Transforme qualquer string em uma cor aleatória com JavaScript

Você já precisou gerar uma cor exclusiva com base em uma string, como um nome de usuário ou um título? Me pareceu interessante em um projeto criar representações únicas das tags, mas não consegui atribuir uma cor a cada tag. Com JavaScript, você pode fazer isso facilmente! Neste artigo, mostraremos como escrever um código simples que converte qualquer string em uma cor aleatória usando o espaço de cores HSL.

O código que usaremos é baseado em duas funções: getColorFromString.

Aqui está o 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 recebe uma string e alguns parâmetros opcionais e retorna um código de cor correspondente na forma de uma string hexadecimal.

Aqui está o que a função faz, passo a passo:

1. verifica se o stringargumento é nulo, vazio ou tem menos de 3 caracteres. Se alguma dessas condições for atendida, ele retorna o defaultColorvalor, que é #000000(preto).
2. calcula um huevalor com base nos três primeiros caracteres do stringargumento, multiplicando seus códigos de caracteres.
3. converte os valores saturatione lightnessde porcentagens em decimais entre 0 e 1.
4. calcula um alphavalor com base nos valores saturatione lightness.
5. define uma função auxiliar chamada fque recebe um número inteiro ne calcula o valor de vermelho, verde ou azul para esse índice.
6. usa a ffunção auxiliar para calcular os valores de vermelho, verde e azul para o código de cor final.
7. retorna o código de cor final como uma string hexadecimal.

Veja como você pode usar a função:

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

É isso! Com apenas algumas linhas de código, você pode transformar qualquer string em uma cor única. Isso pode ser útil em vários aplicativos, como geração de cores de avatar, realce de nomes de usuários e muito mais.

Como você pode usar a getColorFromStringfunção para alterar a cor de todos os componentes com uma determinada tag de classe

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

Neste exemplo, primeiro usamos document.querySelectorAllpara selecionar todos os elementos com a classe "colorize". Em seguida, percorremos cada elemento usando o forEachmétodo e definimos sua cor de fundo para uma cor aleatória gerada pela getColorFromStringfunção usando o conteúdo de texto do elemento como string de entrada.