Erstellen Sie eine hexadezimale Farbe basierend auf einer Zeichenfolge mit JavaScript

Möchte ich eine Funktion erstellen, die akzeptieren keine alten string (wird in der Regel ein einziges Wort) und von diesem irgendwie generiert einen hexadezimalen Wert zwischen #000000 und #FFFFFF, so kann ich es verwenden, wie eine Farbe, die für ein HTML-element.

Vielleicht sogar ein Kürzel hex-Wert (e.g: #FFF), wenn das ist weniger kompliziert. In der Tat, eine Farbe aus einem "web-safe" palette wäre ideal.

Kommentar zu dem Problem

Könnte geben einige Beispiel-input und/oder links zu ähnlichen Fragen? Kommentarautor: qw3n

Keine Antwort, aber vielleicht finden Sie die folgenden nützlichen: Umwandlung einer hexadezimal-in eine Ganzzahl, verwenden Sie parseInt(hexstr, 10). Konvertieren einer Ganzzahl in einen hexadezimalen, verwenden Sie n.toString(16), wobei n eine Ganzzahl ist. Kommentarautor: Cristian Sanchez

@qw3n - Beispiel für die Eingabe: nur kurz, plain old text-strings... wie 'Medizin', 'Operation', 'Neurologie', 'Allgemeinmedizin', usw. Zwischen 3 und sagen, 20 Zeichen... nicht finden können, die anderen aber hier ist das java-Frage: stackoverflow.com/questions/2464745/... @Daniel - vielen Dank. Ich muss mich hinsetzen und ein anderes ernst, gehen auf diese. nützlich sein könnte. Kommentarautor: Darragh Enright

InformationsquelleAutor der Frage Darragh Enright | 2010-08-06

Nur die Portierung über das Java von Compute-hex-color-code für eine beliebige Zeichenfolge 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;
}

Konvertieren Sie tun würde:

intToRGB(hashCode(your_string))

InformationsquelleAutor der Antwort Cristian Sanchez

118

Hier ist eine Anpassung der CD-Sanchez' Antwort, die konsequent liefert einen 6-stelligen Farbcode:

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

Verwendung:

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

Beispiel:

http://jsfiddle.net/sUK45/

(Alternative/einfachere Lösung könnte mit der Rückkehr einer " rgb(...)'-Stil-Farb-code.)

InformationsquelleAutor der Antwort Joe Freeman

27

Wollte ich ähnlichen Reichtum an Farben für HTML-Elemente, war ich überrascht zu finden, dass CSS jetzt unterstützt hsl() Farben, also eine vollständige Lösung für mich ist unten:

Siehe auch Wie automatisch generieren " N "unterschiedliche" Farben? weitere alternativen, die mehr ähnlich wie diese.
```
function colorByHashCode(value) {
    return "<span style='color:" + value.getHashCode().intToHSL() + "'>" + value + "</span>";
}
String.prototype.getHashCode = function() {
    var hash = 0;
    if (this.length == 0) return hash;
    for (var i = 0; i < this.length; i++) {
        hash = this.charCodeAt(i) + ((hash << 5) - hash);
        hash = hash & hash; //Convert to 32bit integer
    }
    return hash;
};
Number.prototype.intToHSL = function() {
    var shortened = this % 360;
    return "hsl(" + shortened + ",100%,30%)";
};
```
Im HSL den Farbton, Sättigung, Helligkeit. Also der Farbton zwischen 0-359 bekommen alle Farben, die Sättigung ist, wie Reich Sie wollen, die Farbe, die 100% für mich funktioniert. Und Leichtigkeit bestimmt die Tiefe, 50% normale, 25% dunkle Farben, 75% ist Pastell. Ich habe 30%, weil es halt mit mein Farbschema am besten.

InformationsquelleAutor der Antwort Thymine

Ich finde, dass die Erzeugung von Zufallszahlen Farben neigt, um Farben, die nicht genügend Kontrast für meinen Geschmack. Der einfachste Weg, die ich gefunden habe, das zu umgehen, ist die pre-bevölkern eine Liste von sehr verschiedenen Farben. Für jeden neue string, weisen Sie die nächste Farbe in der Liste:

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

Während dies hat eine Beschränkung auf nur 64 Farben, ich finde die meisten Menschen können nicht wirklich sagen, der Unterschied, nachdem das sowieso nicht. Ich nehme an, man könnte immer noch mehr Farben.

Während dieser code wird hart codierte Farben, Sie sind zumindest garantiert, um zu wissen, bei der Entwicklung ganz genau, wie viel Kontrast zwischen den Farben in der Produktion.

Farbe Liste wurde gehoben von diese SO beantworten, gibt es andere Listen mit mehr Farben.

InformationsquelleAutor der Antwort Rick Smith

Wenn Sie Ihre Eingaben sind nicht Verschieden genug, für eine einfache hash zu verwenden, das gesamte Farbspektrum, können Sie mit einem körnigen random number generator anstelle einer hash-Funktion.

Ich bin mit der Farbe, die coder von Joe Freeman ' s Antwort, und David Bau entkernt random number generator.

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

InformationsquelleAutor der Antwort Nathan

4

Ich baute eine Funktion, passt die Rechnung in Please.js,
es ist noch nicht zusammengeführt mit der Haupt-repo, aber Sie können es hier sehen:

https://github.com/ibarrajo/PleaseJS

Ordnen Sie die Zeichenfolge für eine Farbe etwa so:
```
var color = Please.make_color({from_hash: 'any string goes here'});
```
"any string goes here" zurückkehren "#47291b"

und "another!" kehrt als "#1f0c3d"

InformationsquelleAutor der Antwort Josue Alexander Ibarra
3

Noch eine andere Lösung für den zufälligen Farben:
```
function colorize(str) {
    for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
    color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
    return '#' + Array(6 - color.length + 1).join('0') + color;
}
```
Es ist ein gemischter Dinge, die nicht den job für mich.
Ich verwendet JFreeman Hash-Funktion (auch eine Antwort in diesem thread) und Asykäri pseudo-random-Funktion von hier und einige Polsterung und Mathe von mir.

Bezweifle ich die Funktion erzeugt gleichmäßig verteilte Farben, aber es sieht nett aus und tut, was es tun sollte.

InformationsquelleAutor der Antwort estani

Hier ist die Lösung kam ich mit zu erzeugen ästhetisch ansprechende Pastellfarben basierend auf einer Eingabe-Zeichenfolge. Es verwendet die ersten zwei Zeichen des Strings als eine Zufallsverteilung, dann generiert der R/G/B, basierend auf den Samen.

Es könnte leicht erweitert werden, so dass der same ist das XOR aller Zeichen in der Zeichenfolge, anstatt nur die ersten beiden.

Inspiriert von David Crow ' s Antwort hier: Algorithmus, um nach dem Zufallsprinzip generieren eine ästhetisch-ansprechende Farbpalette

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

KERNAUSSAGE ist hier: https://gist.github.com/ro-sharp/49fd46a071a267d9e5dd

InformationsquelleAutor der Antwort Robert Sharp

Hier ist ein Versuch:

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

InformationsquelleAutor der Antwort kikito

Diese Funktion funktioniert der trick. Es ist eine Adaption von diesem, relativ längere diese repo ..

const color = (str) => {
    let rgb = [];
    //Changing non-hexadecimal characters to 0
    str = [...str].map(c => (/[0-9A-Fa-f]/g.test(c)) ? c : 0).join('');
    //Padding string with zeroes until it adds up to 3
    while (str.length % 3) str += '0';

    //Dividing string into 3 equally large arrays
    for (i = 0; i < str.length; i += str.length / 3)
        rgb.push(str.slice(i, i + str.length / 3));

    //Formatting a hex color from the first two letters of each portion
    return `#${rgb.map(string => string.slice(0, 2)).join('')}`;
}

InformationsquelleAutor der Antwort Theódór Ágúst Magnússon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.