Dada esta función, quiero reemplazar el color con un generador de color aleatorio.

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

¿Cómo puedo hacerlo?

Uso getRandomColor()en lugar de "#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>

Dudo que algo sea más rápido o más corto que este:

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

¡Desafío!

Aquí hay otra versión de este problema.

Mi objetivo era crear colores vibrantes y distintos. Para garantizar que los colores sean distintos, evito usar un generador aleatorio y selecciono colores "uniformemente espaciados" del arco iris.

Esto es perfecto para crear marcadores emergentes en Google Maps que tengan una "unicidad" óptima (es decir, no habrá dos marcadores con colores similares).

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

Si desea ver cómo se ve esto en acción, consulte http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html .

¿Quién puede vencerlo?

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

Garantizado para trabajar todo el tiempo: http://jsbin.com/OjELIfo/2/edit

Según el comentario de @eterps, el código anterior aún puede generar cadenas más cortas si la representación hexadecimal del color aleatorio es muy corta ( 0.730224609375=> 0.baf)

Este código debería funcionar en todos los casos:

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

No hay necesidad de un hash de letras hexadecimales. JavaScript puede hacer esto por sí mismo:

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

También puede usar HSL disponible en todos los buenos navegadores ( http://caniuse.com/#feat=css3-colors )

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

Esto solo le dará colores brillantes, puede jugar con el brillo, la saturación y el alfa.

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

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

Generación de color aleatorio con control de brillo:

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

El artículo escrito por Paul Irish sobre Random Hex Color Code Generator en JavaScript es absolutamente increíble. Utilizar:

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

Aquí está el enlace de origen:

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

Aquí hay un giro en la solución provista por @Anatoliy.

Necesitaba generar solo colores claros (para fondos), así que elegí el formato de tres letras (#AAA):

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

Si eres un novato como yo, ni idea de hexadecimales y demás, esto podría ser más intuitivo.

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

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

Solo necesita terminar con una cadena como 'rgb(255, 123, 220)'

Esto se puede encontrar fácilmente con la Búsqueda de Google:

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

Versión actualizada:

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

Respuesta corta con almohadilla al tamaño exacto

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

Un desglose de cómo funciona esto:

Math.random()*256obtiene un número aleatorio (punto flotante) de 0 a 256 (0 a 255 inclusive)
Resultado del ejemplo: 116.15200161933899

Agregar las |0tiras de todo después del punto decimal.
Ej: 116.15200161933899 -> 116

El uso .toString(16)convierte este número a hexadecimal (base 16).
Ej: 116 -> 74
Otro ex: 228 -> e4

Agregar "0"pads con un cero. Esto será importante cuando obtengamos la subcadena, ya que nuestro resultado final debe tener dos caracteres para cada color.
Ej: 74 -> 074
Otro ej .: 8 -> 08

.substr(-2)obtiene solo los dos últimos caracteres.
Ej: 074 -> 74
Otro ej .: 08 -> 08 (si no hubiéramos agregado el "0", esto habría producido "8" en lugar de "08")

El forciclo ejecuta este ciclo tres veces, agregando cada resultado a la cadena de color, produciendo algo como esto:
#7408e4

Entonces, aunque todas las respuestas aquí son buenas, quería un poco más de control sobre la salida. Por ejemplo, me gustaría evitar los tonos casi blancos, al tiempo que me aseguro de obtener colores brillantes y vibrantes que no se desvanezcan.

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

Entonces ahora puedo especificar 3 rangos arbitrarios para elegir valores rgb. Puede llamarlo sin argumentos y obtener mi conjunto predeterminado que generalmente generará un color bastante vibrante con un tono dominante una vez obvio, o puede proporcionar su propia gama de rangos.

El comentario más votado de la respuesta superior sugiere que el enfoque de Martin Ankerl es mejor que los números hexadecimales aleatorios, y aunque no he mejorado la metodología de Ankerl, lo he traducido con éxito a JavaScript. Pensé que publicaría una respuesta adicional a este hilo SO ya de gran tamaño porque la respuesta principal tiene otro comentario que se vincula a un Gist con la implementación JS de la lógica de Ankerl y ese enlace está roto (404). Si tuviera la reputación, simplemente habría comentado el enlace jsbin que creé.

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

Por aleatoriedad decente.

Color aleatorio

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

Alfa aleatorio, color aleatorio.

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

Hay muchas maneras de lograr esto. Aquí hay algunos que hice:

Genera seis dígitos hexadecimales aleatorios (0-F)

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

Una línea extremadamente corta

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

Genera componentes HEX individuales (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;
}

Cadena hexadecimal sobrediseñada (XOR 3 salidas juntas para formar color)

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

Otro generador de color aleatorio:

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 lo hace muy limpio

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

Necesita una cuña para los navegadores antiguos.

Podrías usar esta función simple

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/

Usa colores distintos .

Genera una paleta de colores visualmente distintos.

distintos colores es altamente configurable:

• Elige cuántos colores hay en la paleta
• Restringe el tono a un rango específico
• Restringe el croma (saturación) a un rango específico
• Restringe la ligereza a un rango específico
• Configurar la calidad general de la paleta

Aquí están mis dos versiones para un generador de código hexadecimal aleatorio.

/* 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))

Esta función va más allá de otras respuestas de dos maneras:

Intenta generar colores lo más distintos posible al encontrar qué color de 20 intentos tiene la distancia euclidiana más lejana de los otros en el cono HSV

Le permite restringir el tono, la saturación o el rango de valores, pero aún intenta elegir colores lo más distintos posible dentro de ese rango.

No es súper eficiente, pero para valores razonables (¿quién podría incluso separar 100 colores fácilmente?) Es lo suficientemente rápido.

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

Casi todos los métodos anteriores de mano corta generan códigos hexadecimales no válidos (cinco dígitos). Encontré una técnica similar solo sin ese problema aquí :

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

Prueba

Prueba esto en la consola:

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

Mi version:

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

mapa (devuelve color rgb siempre válido)

`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

Puede usar colorchain.js para generar una secuencia de colores con distintos tonos.