Erstellen Sie eine hexadezimale Farbe basierend auf einem String mit JavaScript

Ich möchte eine Funktion erstellen, die jede alte Zeichenfolge akzeptiert (normalerweise ein einzelnes Wort) und daraus irgendwie generiert einen Hexadezimalwert zwischen #000000 und #FFFFFFsodass ich es als Farbe für ein HTML-Element verwenden kann.

Vielleicht sogar ein abgekürzter Hex-Wert (z. B.: #FFF) wenn das weniger kompliziert ist. Tatsächlich wäre eine Farbe aus einer „websicheren“ Palette ideal.

Hier ist eine Adaption der Antwort von CD Sanchez, die durchgehend einen 6-stelligen Farbcode zurückgibt:

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

Verwendungszweck:

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

Beispiel:

http://jsfiddle.net/sUK45/

(Eine alternative/einfachere Lösung könnte darin bestehen, einen Farbcode im rgb(…)-Stil zurückzugeben.)

Portieren Sie einfach den Java-Hex-Farbcode von Compute für eine beliebige Zeichenfolge nach 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;
}

Zum Konvertieren würden Sie Folgendes tun:

intToRGB(hashCode(your_string))

Ich wollte einen ähnlichen Farbreichtum für HTML-Elemente, ich war überrascht, dass CSS jetzt hsl()-Farben unterstützt, also ist eine vollständige Lösung für mich unten:

Siehe auch Wie generiert man automatisch N “unterschiedliche” Farben? für weitere Alternativen, die dieser ähnlicher sind.

Bearbeiten: Aktualisierung basierend auf @zeis Version (mit amerikanischer Schreibweise)

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

In HSL ist es Farbton, Sättigung, Helligkeit. Der Farbton zwischen 0-359 erhält also alle Farben, Sättigung ist, wie satt die Farbe sein soll, 100% funktioniert für mich. Und Helligkeit bestimmt die Tiefe, 50 % sind normal, 25 % sind dunkle Farben, 75 % sind Pastellfarben. Ich habe 30%, weil es am besten zu meinem Farbschema passt.

Hier ist meine 2021-Version mit Reduce-Funktion und HSL-Farbe.

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

Verwendung der hashCode wie in der Antwort von Cristian Sanchez mit hsl und modernem Javascript können Sie einen Farbwähler mit gutem Kontrast wie folgt erstellen:

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>

Da es hsl ist, können Sie die Luminanz skalieren, um den gewünschten Kontrast zu erhalten.

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>

Ich finde, dass das Generieren zufälliger Farben dazu neigt, Farben zu erzeugen, die für meinen Geschmack nicht genug Kontrast haben. Der einfachste Weg, das zu umgehen, besteht darin, eine Liste mit sehr unterschiedlichen Farben vorab auszufüllen. Für jeden Neu string, weisen Sie die nächste Farbe in der Liste zu:

// Takes any string and converts it into a #RRGGBB color.
var StringToColor = (function(){
    var instance = null;

    return {
    next: function stringToColor(str) {
        if(instance === null) {
            instance = {};
            instance.stringToColorHash = {};
            instance.nextVeryDifferntColorIdx = 0;
            instance.veryDifferentColors = ["#000000","#00FF00","#0000FF","#FF0000","#01FFFE","#FFA6FE","#FFDB66","#006401","#010067","#95003A","#007DB5","#FF00F6","#FFEEE8","#774D00","#90FB92","#0076FF","#D5FF00","#FF937E","#6A826C","#FF029D","#FE8900","#7A4782","#7E2DD2","#85A900","#FF0056","#A42400","#00AE7E","#683D3B","#BDC6FF","#263400","#BDD393","#00B917","#9E008E","#001544","#C28C9F","#FF74A3","#01D0FF","#004754","#E56FFE","#788231","#0E4CA1","#91D0CB","#BE9970","#968AE8","#BB8800","#43002C","#DEFF74","#00FFC6","#FFE502","#620E00","#008F9C","#98FF52","#7544B1","#B500FF","#00FF78","#FF6E41","#005F39","#6B6882","#5FAD4E","#A75740","#A5FFD2","#FFB167","#009BFF","#E85EBE"];
        }

        if(!instance.stringToColorHash[str])
            instance.stringToColorHash[str] = instance.veryDifferentColors[instance.nextVeryDifferntColorIdx++];

            return instance.stringToColorHash[str];
        }
    }
})();

// Get a new color for each string
StringToColor.next("get first color");
StringToColor.next("get second color");

// Will return the same color as the first time
StringToColor.next("get first color");

Obwohl dies auf nur 64 Farben begrenzt ist, finde ich, dass die meisten Menschen danach ohnehin keinen wirklichen Unterschied mehr erkennen können. Ich nehme an, Sie könnten immer mehr Farben hinzufügen.

Während dieser Code fest codierte Farben verwendet, wissen Sie während der Entwicklung zumindest garantiert genau, wie viel Kontrast Sie zwischen den Farben in der Produktion sehen werden.

Die Farbliste wurde aus dieser SO-Antwort entfernt, es gibt andere Listen mit mehr Farben.

Wenn Ihre Eingaben für einen einfachen Hash nicht unterschiedlich genug sind, um das gesamte Farbspektrum zu verwenden, können Sie anstelle einer Hash-Funktion einen Seed-Zufallszahlengenerator verwenden.

Ich verwende den Farbcodierer aus Joe Freemans Antwort und Der Seed-Zufallszahlengenerator von David Bau.

function stringToColour(str) {
    Math.seedrandom(str);
    var rand = Math.random() * Math.pow(255,3);
    Math.seedrandom(); // don't leave a non-random seed in the generator
    for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((rand >> i++ * 8) & 0xFF).toString(16)).slice(-2));
    return colour;
}