Trasforma qualsiasi stringa in un colore casuale con JavaScript

Hai mai avuto bisogno di generare un colore univoco basato su una stringa, come un nome utente o un titolo? Mi sembrava interessante in un progetto creare rappresentazioni uniche dei tag, ma non potevo assegnare un colore a ciascun tag. Con JavaScript, puoi farlo facilmente! In questo articolo, ti mostreremo come scrivere un semplice codice che converte qualsiasi stringa in un colore casuale utilizzando lo spazio colore HSL.

Il codice che useremo si basa su due funzioni: getColorFromString.

Ecco il codice:

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

che accetta una stringa e alcuni parametri opzionali e restituisce un codice colore corrispondente sotto forma di una stringa esadecimale.

Ecco cosa fa la funzione, passo dopo passo:

1. controlla se l' stringargomento è nullo, vuoto o ha meno di 3 caratteri. Se una di queste condizioni è soddisfatta, restituisce il defaultColorvalore, che è #000000(nero).
2. calcola un huevalore basato sui primi tre caratteri dell'argomento stringmoltiplicando tra loro i codici dei caratteri.
3. converte i valori saturatione lightnessda percentuali a decimali compresi tra 0 e 1.
4. calcola un alphavalore in base ai valori saturatione lightness.
5. definisce una funzione di supporto chiamata fche accetta un numero intero ne calcola il valore rosso, verde o blu per quell'indice.
6. utilizza la ffunzione helper per calcolare i valori rosso, verde e blu per il codice colore finale.
7. restituisce il codice colore finale come stringa esadecimale.

Ecco come puoi utilizzare la funzione:

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

Questo è tutto! Con poche righe di codice, puoi trasformare qualsiasi stringa in un colore unico. Questo può essere utile in varie applicazioni, come la generazione di colori avatar, l'evidenziazione di nomi utente e altro.

Come puoi utilizzare la getColorFromStringfunzione per cambiare il colore di tutti i componenti con un determinato tag di 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";
  });
});

In questo esempio, per prima cosa usiamo document.querySelectorAllper selezionare tutti gli elementi con la classe "colorize". Quindi eseguiamo il looping di ciascun elemento utilizzando il forEachmetodo e impostiamo il colore di sfondo su un colore casuale generato dalla getColorFromStringfunzione utilizzando il contenuto di testo dell'elemento come stringa di input.