Erstellen Sie einzigartige Farben mit javascript

Was ist der beste Weg zu Holen zufällige Farben für ein Balkendiagramm /Histogramm ein, so dass jede Farbe ist anders als die anderen.. und evtl im Gegensatz

Besprochener Weise ist

'#'+(Math.random()*0xFFFFFF<<0).toString(16);

aber diese erzeugen kann, die ähnliche Farben.. und manchmal unterscheiden Sie möglicherweise ein problem..
Beispiel
Erstellen Sie einzigartige Farben mit javascript

  • Jede Methode zu wählen zufällige Farben ist das manchmal gehen, zum generieren von ähnlichen Farben. Wenn Sie nie wollen, Ihnen ähnlich zu sein, nur bereiten Sie eine Liste von geeigneten Farben und wählen Sie (nach dem Zufallsprinzip, wenn Sie möchten).
  • Der größte Grund, warum Sie nicht wollen, verwenden Sie die Methode, die vorgeschlagen wird, dass das, was Menschen visuell wahrnehmen, wie das Farbspektrum ist nicht Linear proportional zu der hex-Farb Spektrum. Das ist, warum die "web-sicheren Farben" nicht aussieht wie ein Regenbogen.
  • phrogz.net/tmp/24colors.html
InformationsquelleAutor Kartik Dinesh | 2011-07-25
  1. 8

    Ist der beste Weg, um konvertieren von HSV-Werte. Sie können teilen Sie den maximalen Wert für "Hue", die von der Menge von Farben, die Sie brauchen und erhöhen Sie durch dieses Ergebnis.

    Für verbesserten Kontrast, Sie können auch wechseln zwischen high-und low-Werte von Leichtigkeit.

    • Allerdings, wie @Renesis sagt, gleichmäßig Aufteilung der Farbton ist nicht der gleiche wie Kommissionierung visuell-verschiedene Farben-wir sind weit weniger empfindlich gegenüber Variationen von grün im Vergleich zu unserer Empfindlichkeit für rot und (in geringerem Maße) blau. Unterscheidung der Gräser und Blätter, ist weniger wichtig als zu sehen, Feuer.
    • Guter Punkt, diese Methode ist nur gültig, wenn Sie müssen eine kleine Menge von verschiedenen Farben.
    InformationsquelleAutor slaphappy
  2. 24

    Ich würde generieren, die Farben, die mit HSV (Farbton, Sättigung, Wert) anstelle von RGB. Im HSV, die Farbe ist definiert durch Farbton, angefangen von 0-360. Also, wenn Sie wollen, z.B. 6 verschiedenen Farben, können Sie einfach teilen 360 durch 5 (denn wir wollen 0) und bekommen 72, so dass jede Farbe sollte Inkrement mit 72. Verwenden Sie eine Funktion wie diese eine umwandeln der generierten HSV-Farbe nach RGB.

    Die folgende Funktion gibt ein array von total verschiedenen Farben im RGB-format. Beachten Sie, dass die Farben nicht "zufällig" in diesem Beispiel, da Sie immer zwischen rot und pink.

    function randomColors(total)
{
    var i = 360 / (total - 1); //distribute the colors evenly on the hue range
    var r = []; //hold the generated colors
    for (var x=0; x<total; x++)
    {
        r.push(hsvToRgb(i * x, 100, 100)); //you can also alternate the saturation and value for even more contrast between the colors
    }
    return r;
}
    • +1, Aber ich bin kein fan von den Namen der Funktion, wie Sie sagen, es gibt keine Randomisierung Los.
    • Hier ist ein JSFiddle zeigt die Umsetzung über. Ich habe einige kleine änderungen.
    InformationsquelleAutor Håvard
  3. 5

    Den vorhandenen Antworten die erwähnen, Farbton, Sättigung, Wert Darstellung der Farben sind sehr elegant, sind näher an, wie die Menschen sich wahrnehmen Farbe, und es ist wahrscheinlich am besten, Ihrem Rat zu Folgen. Auch die Erstellung einer lange vorberechnete Liste von Farben und die Auswahl von Teilmengen nach Bedarf ist schnell und zuverlässig.

    Jedoch, hier ist etwas code, der beantwortet deine Frage direkt: es generiert zufällige Farben in RGB, die sind so unterschiedlich. Es gibt zwei Nachteile dieser Technik, die ich sehen kann. Erstens, diese Farben sind wirklich zufällig und konnte sehen irgendwie grob zusammen, und zweitens könnte es eine Weile dauern, den code zu stolpern Farben, dass die Arbeit, je nachdem, wie "weit auseinander" benötigen Sie die Farben zu.

    function hex2rgb(h) {
    return [(h & (255 << 16)) >> 16, (h & (255 << 8)) >> 8, h & 255];
}
function distance(a, b) {
    var d = [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
    return Math.sqrt((d[0]*d[0]) + (d[1]*d[1]) + (d[2]*d[2]));
}
function freshColor(sofar, d) {
    var n, ok;
    while(true) {
        ok = true;
        n = Math.random()*0xFFFFFF<<0;
        for(var c in sofar) {
            if(distance(hex2rgb(sofar[c]), hex2rgb(n)) < d) {
                ok = false;
                break;
            }
        }
        if(ok) { return n; }
    }
}
function getColors(n, d) {
    var a = [];
    for(; n > 0; n--) {
        a.push(freshColor(a, d));
    }
    return a;
}

    Den Abstand zwischen den Farben ist die Euklidische Distanz gemessen von der R -, G-und B-Komponenten. So ist die am weitesten, die zwei Farben (schwarz und weiß) sein kann, ist über 441.67.

    Diesen code verwenden, nennen getColors wo der erste parameter ist die Anzahl der Farben, und der zweite ist die minimale Distanz zwischen zwei beliebigen von Ihnen. Wird es wieder eine Reihe von numerischen RGB-Werten.

    InformationsquelleAutor Joe Nelson
  4. 3
    '#'+(Math.random()*0xFFFFFF<<0).toString(16);

    Ist nicht die beste Methode zu verwenden, da es erzeugen kann, die Werte wie #4567 die fehlenden zwei Ziffern anstatt der Generierung #004567

    Es ist besser, greifen jedes Zeichen einzeln wie: 

    '#'+Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16);

    Aber das kann leicht reduziert werden, um die Kommissionierung drei zahlen, da hex-Farben können auch abgekürzt werden. DH. #457 == #445577

    Dann, wenn Sie möchten, verringern Sie die Anzahl der Möglichkeiten und erweitern die Kluft zwischen Ihnen, die Sie verwenden können:

    '#'+(5*Math.floor(Math.random()*4)).toString(16)+
    (5*Math.floor(Math.random()*4)).toString(16)+
    (5*Math.floor(Math.random()*4)).toString(16);

    Unterteilt, die die Anzahl der Möglichkeiten für jede Farbe, die durch 5, und dann gleicht die Verteilung gleichmäßig.

    • Siehe mein Kommentar auf die Frage, für eine längere Erklärung, aber das ist schlecht, weil web-sicheren Farben (Farben gleichmäßig aufgeteilt über RGB-Werte) sind hässlich.
    InformationsquelleAutor Paulpro
  5. 2

    Nutze ich gerne die hsl-Werte für die Angabe von Farben auf diese Weise.

    So 

    "color: hsl(" + getRandomArbitary(0, 360) + ", 50%, 50%)";

    geben würde Sie zufällige Ergebnisse, aber das wird nicht geben Sie Ihre deutliche Trennungen. Also würde ich die Basis auf der ich den Wert einer Schleife. So etwas wie,

    for (var i = 0; i < whateverYourValue; i += 1) {
    color = "color: hsl(" + i * 10 + ", 50%, 50%)";

    //set your colour on whatever
}

    offensichtlich das obige ist bezeichnend, und nicht gültigen code auf seine eigene.

    Wollen Sie mehr wissen über hsl? Überprüfen Sie http://mothereffinghsl.com/ 'Ursache, die Sie wissen, es macht Spaß.

    InformationsquelleAutor Nicholas Evans
  6. 1

    Ich zweite, was kbok und Harpyon sagen über die Arbeit in den HSV-Farbraum und dieses kleine Bibliothek macht es super einfach zu wechseln zwischen RGB-und HSV - und andere.

    InformationsquelleAutor fvu
Schreibe einen Kommentar