Zufallsgenerator für Farben

Question

Angesichts dieser Funktion möchte ich die Farbe mit einem Zufallsfarbgenerator.

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

Wie kann ich das tun?

Answer 1

Dieser Code ( Mohsens ) kann keine Farben wie #fcfc80 erzeugen.

'#' + Math.random().toString(16).substr(-6);

Die von Nicolas Buduroi funktioniert, es sei denn Math.random() gibt 0 zurück, vernünftig.

'#' + (Math.random().toString(16) + "000000").substring(2,8)

Dieser Code erzeugt viele illegale Farben (wie #abcde).

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

Und ich verwende weiterhin ( +1 oder etwas anderes ist auch in Ordnung, aber ich bin es gewohnt +2 ohne Grund)

"#" + ((Math.random()+2)*16777216|0).toString(16).slice(1)

Answer 2

Es gibt keine Notwendigkeit, JavaScript zu verwenden um eine zufällige CSS-Farbe zu erzeugen.

Zum Beispiel, in SCSS/Sass können Sie etwas wie dieses verwenden:

.rgb-color-selector {
    background-color: rgb(random(255), random(255), random(255));
}

o

.hsl-color-selector {
    color: hsl(random(360) * 1deg, floor(random() * 100%), floor(random() * 100%));;
}

CodePen-Beispiel .

Answer 3

Dieser erzeugt nur gesättigte Farben

let randomSaturatedColor = () => {
    let r = Math.random().toString(16).slice(2, 4)
    let value_012345 = Math.random().toString(6).slice(2, 3)
    let hex = {
        [0]: `${r}00FF`,
        [1]: `00${r}FF`,
        [2]: `00FF${r}`,
        [3]: `${r}FF00`,
        [4]: `FF${r}00`,
        [5]: `FF00${r}`,
    }[value_012345]
    return '#' + hex
}

Answer 4

Es gibt eine Reihe von Methoden zur Erstellung von zufälligen Hex-Farbcodes in diesem Blogbeitrag Zufälliger Hex-Farbcode-Generator in JavaScript . Sie müssen mit Nullen auffüllen, wenn der Zufallswert kleiner ist als 0×100000 Hier ist also die korrekte Version:

var randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});

Das ersetzt jede der sechs 0 s mit einer zufälligen Hexadezimalziffer, so dass am Ende mit Sicherheit ein vollständiger sechsstelliger gültiger Farbwert steht.

Answer 5

Nur weil ich es kann, habe ich ein unlesbares Snippet erstellt, das nach dem Zufallsprinzip zwischen minimalen und maximalen Hex-Codes wechselt...:

function a(f, s){
    if(!s || !s.length > 1) return "";
    var c = Math.floor(Math.random()*(parseInt("0x" + s.substr(0,2))-parseInt("0x" +     f.substr(0,2))+1)+parseInt("0x" + f.substr(0,2))).toString(16);
    return  (Array(3 - c.length).join("0")) + c + a(f.substr(2,f.length),s.substr(2,s.length));
}

a("990099","ff00ff") könnte randomisieren b5009e

Er tut es paarweise, also a("12","f2") könnte randomisieren 8f . Aber es geht nicht über 'f2' .

var color = "#" + a("11","22") + a("33","44") + a("55","66");

Es ist dasselbe wie:

var color = "#" + a("113355","224466")

Aber langsamer.