Mit dieser Funktion möchte ich die Farbe durch einen zufälligen Farbgenerator ersetzen .

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

Wie kann ich es tun?

Verwendung getRandomColor()anstelle von "#0000FF":

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}



function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">

</div>
<button onclick="setRandomColor()">Random Color</button>

Ich bezweifle, dass etwas schneller oder kürzer sein wird als dieses:

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

Herausforderung!

Hier ist eine andere Sichtweise auf dieses Problem.

Mein Ziel war es, lebendige und unverwechselbare Farben zu kreieren. Um sicherzustellen, dass die Farben unterschiedlich sind, vermeide ich die Verwendung eines Zufallsgenerators und wähle "gleichmäßig verteilte" Farben aus dem Regenbogen aus.

Dies ist ideal zum Erstellen von Popout-Markierungen in Google Maps mit optimaler "Eindeutigkeit" (dh keine zwei Markierungen haben ähnliche Farben).

function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = step / numOfSteps;
    var i = ~~(h * 6);
    var f = h * 6 - i;
    var q = 1 - f;
    switch(i % 6){
        case 0: r = 1; g = f; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = f; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = f; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
    }
    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}

Wenn Sie sehen möchten, wie dies in Aktion aussieht, lesen Sie http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html .

Wer kann es schlagen?

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

Garantiert die ganze Zeit zu arbeiten: http://jsbin.com/OjELIfo/2/edit

Basierend auf dem Kommentar von @eterps kann der obige Code immer noch kürzere Zeichenfolgen erzeugen, wenn die hexadezimale Darstellung der zufälligen Farbe sehr kurz ist (0.730224609375 => 0.baf).

Dieser Code sollte in allen Fällen funktionieren:

function makeRandomColor(){
  var c = '';
  while (c.length < 7) {
    c += (Math.random()).toString(16).substr(-6).substr(-1)
  }
  return '#'+c;
}

Es ist kein Hash mit hexadezimalen Buchstaben erforderlich. JavaScript kann dies selbst tun:

function get_random_color() {
  function c() {
    var hex = Math.floor(Math.random()*256).toString(16);
    return ("0"+String(hex)).substr(-2); // pad with zero
  }
  return "#"+c()+c()+c();
}

Sie können HSL auch in jedem guten Browser verwenden ( http://caniuse.com/#feat=css3-colors ).

function randomHsl() {
    return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}

Dies gibt Ihnen nur helle Farben, Sie können mit der Helligkeit, Sättigung und Alpha herumspielen.

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`

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

Zufällige Farberzeugung mit Helligkeitsregelung:

function getRandColor(brightness){

    // Six levels of brightness from 0 to 5, 0 being the darkest
    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})
    return "rgb(" + mixedrgb.join(",") + ")";
}

'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123

Der Artikel von Paul Irish über Random Hex Color Code Generator in JavaScript ist absolut erstaunlich. Verwenden:

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

Hier ist der Quelllink:

http://www.paulirish.com/2009/random-hex-color-code-snippets/

Hier ist eine Variante der von @Anatoliy bereitgestellten Lösung.

Ich musste nur helle Farben (für Hintergründe) erzeugen, also habe ich mich für das Drei-Buchstaben-Format (#AAA) entschieden:

function get_random_color() {
    var letters = 'ABCDE'.split('');
    var color = '#';
    for (var i=0; i<3; i++ ) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

Wenn Sie ein Noob wie ich sind und keine Ahnung von Hexadezimalen und dergleichen haben, ist dies möglicherweise intuitiver.

function r() { return Math.floor(Math.random() * 255) }

var color = 'rgb(' + r() + "," + r() + "," + r() + ')';

Sie müssen nur mit einer Zeichenfolge wie enden 'rgb(255, 123, 220)'

Dies kann sehr einfach mit der Google-Suche gefunden werden:

function random_color(format)
{
    var rint = Math.round(0xffffff * Math.random());
    switch(format)
    {
        case 'hex':
            return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
            break;

        case 'rgb':
            return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
            break;

        default:
            return rint;
            break;
    }
}

Aktualisierte Version:

function random_color( format ){
  var rint = Math.floor( 0x100000000 * Math.random());
  switch( format ){
    case 'hex':
      return '#' + ('00000'   + rint.toString(16)).slice(-6).toUpperCase();
    case 'hexa':
      return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase();
    case 'rgb':
      return 'rgb('  + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')';
    case 'rgba':
      return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255)/255 + ')';
    default:
      return rint;
  }
}

Kurze Antwort mit Block auf exakte Größe

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

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

Eine Aufschlüsselung, wie dies funktioniert:

Math.random()*256 erhält eine Zufallszahl (Gleitkommazahl) von 0 bis 256 (0 bis einschließlich 255)
Beispielergebnis: 116.15200161933899

Fügen Sie die |0Streifen von allem nach dem Dezimalpunkt hinzu.
Beispiel: 116.15200161933899 -> 116

Mit .toString(16)konvertiert diese Zahl in hexadezimal (Basis 16).
Beispiel: 116 -> 74
Ein weiteres Beispiel: 228 -> e4

Hinzufügen "0"Pads es mit einer Null. Dies ist wichtig, wenn wir den Teilstring erhalten, da unser Endergebnis zwei Zeichen für jede Farbe haben muss.
Beispiel: 74 -> 074
Ein weiteres Beispiel: 8 -> 08

.substr(-2)bekommt nur die letzten beiden Zeichen.
Beispiel: 074 -> 74
Ein weiteres Beispiel: 08 -> 08 (wenn wir das nicht hinzugefügt hätten"0" , hätte dies "8" anstelle von "08" ergeben)

Die forSchleife führt diese Schleife dreimal aus und fügt jedes Ergebnis der Farbzeichenfolge hinzu, wodurch Folgendes erzeugt wird:
#7408e4

Obwohl alle Antworten hier gut sind, wollte ich etwas mehr Kontrolle über die Ausgabe. Zum Beispiel möchte ich nahezu weiße Farbtöne vermeiden und gleichzeitig sicherstellen, dass ich helle, lebendige Farben erhalte, die nicht ausgewaschen sind.

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() +")";
        };

Jetzt kann ich 3 beliebige Bereiche angeben, aus denen RGB-Werte ausgewählt werden sollen. Sie können es ohne Argumente aufrufen und meinen Standardsatz erhalten, der normalerweise eine ziemlich lebendige Farbe mit einem einmal offensichtlich dominanten Farbton erzeugt, oder Sie können Ihre eigene Reihe von Bereichen angeben.

Der am besten bewertete Kommentar der Top-Antwort deutet darauf hin, dass Martin Ankerls Ansatz besser ist als zufällige Hex-Zahlen, und obwohl ich Ankerls Methodik nicht verbessert habe, habe ich ihn erfolgreich in JavaScript übersetzt. Ich dachte, ich würde eine zusätzliche Antwort auf diesen bereits mega-großen SO-Thread posten, da die oberste Antwort einen weiteren Kommentar enthält, der auf einen Gist mit der JS-Implementierung von Ankerls Logik verweist, und dieser Link ist unterbrochen (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) : '';
}

// next two methods converted from Ruby to JS
// soured 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 golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # use 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

Für anständige Zufälligkeit.

Zufällige Farbe

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`

Zufälliges Alpha, zufällige Farbe.

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`

Es gibt so viele Möglichkeiten, dies zu erreichen. Hier sind einige, die ich gemacht habe:

Erzeugt sechs zufällige Hex-Ziffern (0-F)

function randColor() {
    for (var i=0, col=''; i<6; i++) {
        col += (Math.random()*16|0).toString(16);
    }
    return '#'+col;
}

Extrem kurzer Einzeiler

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

Erzeugt einzelne HEX-Komponenten (00-FF)

function randColor2() {
    var r = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        g = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        b = ('0'+(Math.random()*256|0).toString(16)).slice(-2);
    return '#' +r+g+b;
}

Überentwickelte Hex-Zeichenfolge (XORs 3 gibt zusammen aus, um Farbe zu bilden)

function randColor3() {
    var str = Math.random().toString(16) + Math.random().toString(16),
    sg = str.replace(/0./g,'').match(/.{1,6}/g),
    col = parseInt(sg[0], 16) ^ 
          parseInt(sg[1], 16) ^ 
          parseInt(sg[2], 16);
    return '#' + ("000000" + col.toString(16)).slice(-6);
}

Noch ein zufälliger Farbgenerator:

var randomColor;
randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000 (randomColor is a float)
randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF (randomColor is an integer)
randomColor = randomColor.toString(16); // hex representation randomColor
randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
randomColor = "#" + randomColor; // # added

Array.prototype.reduce macht es sehr sauber.

["r","g","b"].reduce(function(res) {
    return res + ("0"+~~(Math.random()*256).toString(16)).slice(-2)
}, "#")

Benötigt eine Unterlegscheibe für alte Browser.

Sie können diese einfache Funktion verwenden

function getRandomColor(){
 var color =  "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
 return color;
}

function get_random_color() {
    return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}

http://jsfiddle.net/XmqDz/1/

Verwenden Sie unterschiedliche Farben .

Es wird eine Palette von visuell unterschiedlichen Farben erzeugt.

eindeutige Farben sind hoch konfigurierbar:

• Wählen Sie aus, wie viele Farben in der Palette enthalten sind
• Beschränken Sie den Farbton auf einen bestimmten Bereich
• Beschränken Sie die Farbintensität (Sättigung) auf einen bestimmten Bereich
• Beschränken Sie die Helligkeit auf einen bestimmten Bereich
• Konfigurieren Sie die allgemeine Qualität der Palette

Hier sind meine beiden Versionen für einen zufälligen Hex-Code-Generator.

/* Slowest but shortest. */
"#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});    

/* Good performance with small size. */
"#"+(function(a,b){while(a--){b+=""+(~~(Math.random()*16)).toString(16);} return b;})(6,"");

/* Remy Sharp provided one that's the fastest but a little bit too long */
(function(h){return '#000000'.substr(0,7-h.length)+h})((~~(Math.random()*(1<<24))).toString(16))

Diese Funktion geht in zweierlei Hinsicht über andere Antworten hinaus:

Es wird versucht, möglichst unterschiedliche Farben zu erzeugen, indem ermittelt wird, welche Farbe aus 20 Versuchen den weitesten euklidischen Abstand zu den anderen im HSV-Kegel aufweist

Sie können den Farbton, die Sättigung oder den Wertebereich einschränken, versuchen jedoch weiterhin, Farben auszuwählen, die innerhalb dieses Bereichs so unterschiedlich wie möglich sind.

Es ist nicht sehr effizient, aber für vernünftige Werte (wer könnte sogar 100 Farben leicht auseinander nehmen?) Ist es schnell genug.

Siehe JSFiddle

  /**
   * Generates a random palette of HSV colors.  Attempts to pick colors
   * that are as distinct as possible within the desired HSV range.
   *
   * @param {number}    [options.numColors=10] - the number of colors to generate
   * @param {number[]}  [options.hRange=[0,1]] - the maximum range for generated hue
   * @param {number[]}  [options.sRange=[0,1]] - the maximum range for generated saturation
   * @param {number[]}  [options.vRange=[0,1]] - the maximum range for generated value
   * @param {number[][]}[options.exclude=[[0,0,0],[0,0,1]]] - colors to exclude
   * 
   * @returns {number[][]} an array of HSV colors (each HSV color 
   * is a [hue, saturation, value] array)
   */
  function randomHSVPalette(options) {
    function random(min, max) {
      return min + Math.random() * (max - min);
    } 

    function HSVtoXYZ(hsv) {
      var h = hsv[0];
      var s = hsv[1];
      var v = hsv[2];
      var angle = h * Math.PI * 2;
      return [Math.sin(angle) * s * v,
              Math.cos(angle) * s * v,
              v];
    }

    function distSq(a, b) {
      var dx = a[0] - b[0];
      var dy = a[1] - b[1];
      var dz = a[2] - b[2];
      return dx * dx + dy * dy + dz * dz;
    }

    if (!options) {
      options = {};
    }

    var numColors = options.numColors || 10;
    var hRange = options.hRange || [0, 1];
    var sRange = options.sRange || [0, 1];
    var vRange = options.vRange || [0, 1];
    var exclude = options.exclude || [[0, 0, 0], [0, 0, 1]];

    var points = exclude.map(HSVtoXYZ);
    var result = [];

    while (result.length < numColors) {
      var bestHSV;
      var bestXYZ;
      var bestDist = 0;
      for (var i = 0; i < 20; i++) {
        var hsv = [random(hRange[0], hRange[1]), random(sRange[0], sRange[1]), random(vRange[0], vRange[1])];
        var xyz = HSVtoXYZ(hsv);
        var minDist = 10;
        points.forEach(function(point) {
          minDist = Math.min(minDist, distSq(xyz, point));
        });
        if (minDist > bestDist) {
          bestHSV = hsv;
          bestXYZ = xyz;
          bestDist = minDist;
        }
      }
      points.push(bestXYZ);
      result.push(bestHSV);
    }

    return result;
  }

  function HSVtoRGB(hsv) {
    var h = hsv[0];
    var s = hsv[1];
    var v = hsv[2];

    var i = ~~(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    v = ~~(255 * v);
    p = ~~(255 * p);
    q = ~~(255 * q); 
    t = ~~(255 * t);
    switch (i % 6) {
      case 0: return [v, t, p];
      case 1: return [q, v, p];
      case 2: return [p, v, t];
      case 3: return [p, q, v];
      case 4: return [t, p, v];
      case 5: return [v, p, q];
    }
  }

  function RGBtoCSS(rgb) {
    var r = rgb[0];
    var g = rgb[1];
    var b = rgb[2];
    var rgb = (r << 16) + (g << 8) + b;
    return '#' + ('000000' + rgb.toString(16)).slice(-6);
  }

Fast alle bisherigen Kurzhandmethoden generieren ungültige Hex-Codes (fünf Ziffern). Ich bin hier nur ohne dieses Problem auf eine ähnliche Technik gestoßen :

"#"+("000"+(Math.random()*(1<<24)|0).toString(16)).substr(-6)

Prüfung

Versuchen Sie dies in der Konsole:

for(i = 0; i < 200; i++) {
    console.log("#" + ("000" + (Math.random()*(1<<24)|0).toString(16)).substr(-6));
}

Meine Version:

function RandomColor() {
  var hex = (Math.round(Math.random()*0xffffff)).toString(16);
  while (hex.length < 6) hex = "0" + hex;
  return hex;
}

map (gibt immer gültige RGB-Farbe zurück)

`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`

let c= `rgb(${[1,2,3].map(x=>Math.random()*256|0)})`

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

Sie können colorchain.js verwenden , um eine Folge von Farben mit unterschiedlichen Farbtönen zu generieren.