Créer une couleur hexadécimale à partir d'une chaîne de caractères avec JavaScript

Question

Je souhaite créer une fonction qui acceptera n'importe quelle chaîne de caractères (généralement un seul mot) et à partir de laquelle d'une manière ou d'une autre génère une valeur hexadécimale comprise entre #000000 y #FFFFFF afin que je puisse l'utiliser comme couleur pour un élément HTML.

Peut-être même une valeur hexagonale abrégée (par ex : #FFF ) si c'est moins compliqué. En fait, une couleur issue d'une palette "web-safe" serait idéale.

Answer 1

Voici une adaptation de la réponse de CD Sanchez qui renvoie systématiquement un code couleur à 6 chiffres :

var stringToColour = function(str) {
  var hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  var colour = '#';
  for (var i = 0; i < 3; i++) {
    var value = (hash >> (i * 8)) & 0xFF;
    colour += ('00' + value.toString(16)).substr(-2);
  }
  return colour;
}

Utilisation :

stringToColour("greenish");
// -> #9bc63b

Ejemplo:

http://jsfiddle.net/sUK45/

(Une solution alternative/simple pourrait consister à renvoyer un code couleur de type "rgb(...)").

Answer 2

Il suffit de porter le Java de Calculer le code couleur hexadécimal d'une chaîne de caractères arbitraire à Javascript :

function hashCode(str) { // java String#hashCode
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
       hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    return hash;
} 

function intToRGB(i){
    var c = (i & 0x00FFFFFF)
        .toString(16)
        .toUpperCase();

    return "00000".substring(0, 6 - c.length) + c;
}

Pour convertir, il faut faire :

intToRGB(hashCode(your_string))

Answer 3

Je voulais une richesse de couleurs similaire pour les éléments HTML, j'ai été surpris de découvrir que CSS supporte maintenant les couleurs hsl(), donc une solution complète pour moi est ci-dessous :

Voir aussi Comment générer automatiquement N couleurs "distinctes" ? pour plus d'alternatives similaires à celle-ci.

Edit : mise à jour sur la base de Version de @zei (avec l'orthographe américaine)

var stringToColor = (string, saturation = 100, lightness = 75) => {
  let hash = 0;
  for (let i = 0; i < string.length; i++) {
hash = string.charCodeAt(i) + ((hash << 5) - hash);
hash = hash & hash;
  }
  return `hsl(${(hash % 360)}, ${saturation}%, ${lightness}%)`;
}

// For the sample on stackoverflow
function colorByHashCode(value) {
return "<span style='color:" + stringToColor(value) + "'>" + value + "</span>";
}

document.body.innerHTML = [
  "javascript",
  "is",
  "nice",
].map(colorByHashCode).join("<br/>");

span {
  font-size: 50px;
  font-weight: 800;
}

En HSL, il s'agit de la teinte, de la saturation et de la luminosité. La teinte, comprise entre 0 et 359, permet d'obtenir toutes les couleurs, la saturation correspond à la richesse de la couleur, 100 % me convient. Et la luminosité détermine la profondeur, 50% est normal, 25% correspond aux couleurs sombres, 75% aux couleurs pastel. J'ai choisi 30% parce que c'est ce qui correspond le mieux à mon schéma de couleurs.

Answer 4

Voici ma version 2021 avec la fonction de réduction et la couleur HSL.

function getBackgroundColor(stringInput) {
    let stringUniqueHash = [...stringInput].reduce((acc, char) => {
        return char.charCodeAt(0) + ((acc << 5) - acc);
    }, 0);
    return `hsl(${stringUniqueHash % 360}, 95%, 35%)`;
}

Answer 5

L'utilisation de la hashCode comme dans la réponse de Cristian Sanchez avec hsl et du javascript moderne, vous pouvez créer un sélecteur de couleurs avec un bon contraste comme celui-ci :

function hashCode(str) {
  let hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return hash;
}

function pickColor(str) {
  return `hsl(${hashCode(str) % 360}, 100%, 80%)`;
}

one.style.backgroundColor = pickColor(one.innerText)
two.style.backgroundColor = pickColor(two.innerText)

div {
  padding: 10px;
}

<div id="one">One</div>
<div id="two">Two</div>

Comme il s'agit d'un hsl, vous pouvez modifier la luminance pour obtenir le contraste que vous recherchez.

function hashCode(str) {
  let hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return hash;
}

function pickColor(str) {
  // Note the last value here is now 50% instead of 80%
  return `hsl(${hashCode(str) % 360}, 100%, 50%)`;
}

one.style.backgroundColor = pickColor(one.innerText)
two.style.backgroundColor = pickColor(two.innerText)

div {
  color: white;
  padding: 10px;
}

<div id="one">One</div>
<div id="two">Two</div>