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

Regexp

gibt immer eine gültig hex 6-stellig Farbe

"#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16))

let c= "#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16));

console.log(c);
document.body.style.background=c

Answer 2

Der am höchsten bewertete Kommentar der Top-Antwort legt nahe, dass Martin Ankerls Ansatz besser ist als zufällige Hex-Zahlen, und obwohl ich Ankerls Methodik nicht verbessert habe, habe ich sie erfolgreich auf JavaScript übertragen.

Ich dachte, ich würde eine zusätzliche Antwort auf diese bereits mega-große Stack Overflow Frage posten, weil die obere Antwort einen anderen Kommentar hat, der auf eine Gist mit der JavaScript-Implementierung von Ankerls Logik verlinkt und dieser Link ist kaputt (404). Wenn ich den Ruf hätte, hätte ich einfach den von mir erstellten jsbin-Link kommentiert.

// Adapted from
// http://jsfiddle.net/Mottie/xcqpF/1/light/
const rgb2hex = (rgb) => {
  return (rgb && rgb.length === 3) ? "#" +
    ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) : '';
}

// The next two methods are converted from Ruby to JavaScript.
// It is sourced from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/

// # HSV values in [0..1[
// # returns [r, g, b] values from 0 to 255
const hsv_to_rgb = (h, s, v) => {
  const h_i = Math.floor(h*6)
  const f = h*6 - h_i
  const p = v * (1 - s)
  const q = v * (1 - (f * s))
  const t = v * (1 - (1 - f) * s)
  let r, g, b
  switch(h_i) {
    case(0):
      [r, g, b] = [v, t, p]
      break
    case(1):
      [r, g, b] = [q, v, p]
      break
    case(2):
      [r, g, b] = [p, v, t]
      break
    case(3):
      [r, g, b] = [p, q, v]
      break
    case(4):
      [r, g, b] = [t, p, v]
      break
    case(5):
      [r, g, b] = [v, p, q]
      break
  }
  return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)]
}

// # Use the golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # Use a random start value
const gen_hex = (numberOfColors) => {
  const colorArray = []
  while (numberOfColors > 0) {
    h += golden_ratio_conjugate
    h %= 1
    colorArray.push(rgb2hex(hsv_to_rgb(h, 0.99, 0.99)))
    numberOfColors -= 1
  }
  console.log(colorArray)
  return colorArray
}

gen_hex(100)

https://jsbin.com/qeyevoj/edit?js,console

Answer 3

var color = "#";
for (k = 0; k < 3; k++) {
    color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}

Eine Aufschlüsselung, wie das funktioniert:

Math.random()*256 liefert eine Zufallszahl (Fließkommazahl) von 0 bis 256 (0 bis einschließlich 255)
Beispielergebnis: 116.15200161933899

Hinzufügen der |0 entfernt alles nach dem Dezimalpunkt.
Beispiel: 116.15200161933899 -> 116

使用方法 .toString(16) wandelt diese Zahl in Hexadezimalzahlen (Basis 16) um.
Beispiel: 116 -> 74
Ein anderes Beispiel: 228 -> e4

Hinzufügen von "0" füllt es mit einer Null auf. Dies wird wichtig sein, wenn wir die Teilzeichenkette erhalten, da unser Endergebnis zwei Zeichen für jede Farbe haben muss.
Beispiel: 74 -> 074
Ein anderes Beispiel: 8 -> 08

.substr(-2) erhält nur die letzten beiden Zeichen.
Beispiel: 074 -> 74
Ein anderes Beispiel: 08 -> 08 (wenn wir nicht die "0" Dies hätte eine "8" statt einer "08" ergeben)

El for Schleife führt diese Schleife dreimal durch und fügt jedes Ergebnis der Farbzeichenkette hinzu, was in etwa so aussieht:
#7408e4

Answer 4

Eine kurze Antwort mit Auffüllung auf die genaue Größe:

'#' + ((1<<24)*(Math.random()+1)|0).toString(16).substr(1)

Answer 5

Während also alle Antworten hier gut sind, wollte ich etwas mehr Kontrolle über die Ausgabe haben. Zum Beispiel möchte ich verhindern, dass alle in der Nähe von weißen Schattierungen, während die Gewährleistung ich helle, lebendige Farben nicht ausgewaschen Schattierungen erhalten.

function generateColor(ranges) {
            if (!ranges) {
                ranges = [
                    [150,256],
                    [0, 190],
                    [0, 30]
                ];
            }
            var g = function() {
                //select random range and remove
                var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
                //pick a random number from within the range
                return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
            }
            return "rgb(" + g() + "," + g() + "," + g() +")";
        };

So jetzt kann ich 3 beliebige Bereiche angeben, um rgb-Werte aus. Sie können es ohne Argumente aufrufen und erhalten meine Standardeinstellung, die in der Regel eine ziemlich lebendige Farbe mit einmal offensichtlich dominanten Farbton erzeugen wird, oder Sie können Ihr eigenes Array von Bereichen liefern.