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 solution que j'ai trouvée pour générer des couleurs pastel agréables à l'œil à partir d'une chaîne de caractères. Il utilise les deux premiers caractères de la chaîne comme graine aléatoire, puis génère des R/G/B en fonction de cette graine.

Il pourrait être facilement étendu pour que la graine soit le XOR de tous les caractères de la chaîne, plutôt que seulement les deux premiers.

Inspiré par la réponse de David Crow ici : Algorithme de génération aléatoire d'une palette de couleurs esthétiquement agréables

//magic to convert strings to a nice pastel colour based on first two chars
//
// every string with the same first two chars will generate the same pastel colour
function pastel_colour(input_str) {

    //TODO: adjust base colour values below based on theme
    var baseRed = 128;
    var baseGreen = 128;
    var baseBlue = 128;

    //lazy seeded random hack to get values from 0 - 256
    //for seed just take bitwise XOR of first two chars
    var seed = input_str.charCodeAt(0) ^ input_str.charCodeAt(1);
    var rand_1 = Math.abs((Math.sin(seed++) * 10000)) % 256;
    var rand_2 = Math.abs((Math.sin(seed++) * 10000)) % 256;
    var rand_3 = Math.abs((Math.sin(seed++) * 10000)) % 256;

    //build colour
    var red = Math.round((rand_1 + baseRed) / 2);
    var green = Math.round((rand_2 + baseGreen) / 2);
    var blue = Math.round((rand_3 + baseBlue) / 2);

    return { red: red, green: green, blue: blue };
}

La GIST est ici : https://gist.github.com/ro-sharp/49fd46a071a267d9e5dd

Answer 2

2023 version simple et claire de la fonction flèche TypeScript qui renvoie la couleur HSL.

const stringToColor = (value: string) => {
  let hash = 0;
  for (let i = 0; i < value.length; i++) {
    hash = value.charCodeAt(i) + ((hash << 5) - hash);
  }

  return `hsl(${hash % 360}, 85%, 35%)`;
};

Answer 3

Voici un autre essai :

function stringToColor(str){
  var hash = 0;
  for(var i=0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 3) - hash);
  }
  var color = Math.abs(hash).toString(16).substring(0, 6);

  return "#" + '000000'.substring(0, 6 - color.length) + color;
}

Answer 4

Tout ce dont vous avez besoin, c'est d'une bonne fonction de hachage. Sur node, j'utilise simplement

const crypto = require('crypto');
function strToColor(str) {
    return '#' + crypto.createHash('md5').update(str).digest('hex').substr(0, 6);
}

Answer 5

Après avoir jeté un coup d'œil sur les réponses, plutôt anciennes et exigeantes en termes de code, j'ai pensé revoir cette question d'un point de vue 2021, juste pour le plaisir, en espérant que cela puisse être utile à quelqu'un. Le modèle de couleur HSL et l'API cryptographique étant implémentés dans pratiquement tous les navigateurs (sauf IE bien sûr) aujourd'hui, le problème pourrait être résolu aussi simplement que cela :

async function getColor(text, minLightness = 40, maxLightness = 80, minSaturation = 30, maxSaturation = 100) {
  let hash = await window.crypto.subtle.digest("SHA-1", new TextEncoder().encode(text));
  hash = new Uint8Array(hash).join("").slice(16);

  return "hsl(" + (hash % 360) + ", " + (hash % (maxSaturation - minSaturation) + minSaturation) + "%, " + (hash % (maxLightness - minLightness) + minLightness) + "%)";
}

function generateColor() {
  getColor(document.getElementById("text-input").value).then(color => document.querySelector(".swatch").style.backgroundColor = color);
}

input {
  padding: 5px;
}

.swatch {
  margin-left: 10px;
  width: 28px;
  height: 28px;
  background-color: white;
  border: 1px solid gray;
}

.flex {
  display: flex;
}

<html>

<body>
  <div class="flex">
    <form>
      <input id="text-input" type="text" onInput="generateColor()" placeholder="Type here"></input>
    </form>
    <div class="swatch"></div>
  </div>
</body>

</html>

Cela devrait être beaucoup plus rapide que de générer des hachages manuellement, et offre également un moyen de définir la saturation et la luminosité au cas où vous ne voudriez pas de couleurs trop plates, trop lumineuses ou trop sombres (par exemple, si vous voulez écrire du texte sur ces couleurs).