Dengan fungsi ini, saya ingin mengganti warnanya dengan generator warna acak.

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

Bagaimana saya bisa melakukannya?

Gunakan getRandomColor()di tempat "#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>

Saya ragu apa pun akan lebih cepat atau lebih pendek dari yang ini:

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

Tantangan!

Berikut ini adalah pendapat lain tentang masalah ini.

Tujuan saya adalah menciptakan warna-warna cerah dan berbeda. Untuk memastikan warnanya berbeda, saya menghindari menggunakan generator acak dan memilih warna "merata" dari pelangi.

Ini sangat cocok untuk membuat penanda pop-out di Google Maps yang memiliki "keunikan" yang optimal (yaitu, tidak ada dua penanda yang memiliki warna serupa).

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

Jika Anda ingin melihat seperti apa tindakan ini, lihat http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html .

Siapa yang bisa mengalahkannya?

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

Dijamin berfungsi sepanjang waktu: http://jsbin.com/OjELIfo/2/edit

Berdasarkan komentar @eterps kode di atas masih dapat menghasilkan string yang lebih pendek jika representasi heksadesimal dari warna acak sangat pendek ( 0.730224609375=> 0.baf)

Kode ini harus berfungsi dalam semua kasus:

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

Anda juga dapat menggunakan HSL yang tersedia di setiap browser yang bagus ( http://caniuse.com/#feat=css3-colors )

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

Ini hanya akan memberi Anda warna-warna cerah, Anda bisa bermain-main dengan kecerahan, saturasi dan alpha.

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

Tidak perlu hash huruf heksadesimal. JavaScript dapat melakukan ini sendiri:

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

Saya suka yang ini: '#' + (Math.random().toString(16) + "000000").substring(2,8)

Generasi warna acak dengan kontrol kecerahan:

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

Artikel yang ditulis oleh Paul Irish pada Random Hex Color Code Generator di JavaScript benar-benar menakjubkan. Menggunakan:

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

Inilah tautan sumber:

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

Berikut ini twist pada solusi yang disediakan oleh @Anatoliy.

Saya hanya perlu menghasilkan warna terang (untuk latar belakang), jadi saya menggunakan tiga huruf (#AA) format:

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

Jika Anda seorang pemula seperti saya, tidak mengerti tentang hexadecimal dan semacamnya, ini mungkin lebih intuitif.

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

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

Anda hanya perlu berakhir dengan string seperti 'rgb(255, 123, 220)'

Ini dapat dengan mudah ditemukan menggunakan Pencarian 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 terbaru:

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

Jawaban singkat dengan pad ke ukuran yang tepat

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

Rincian cara kerjanya:

Math.random()*256mendapat nomor acak (titik mengambang) dari 0 hingga 256 (termasuk 0 hingga 255)
Hasil contoh: 116.15200161933899

Menambahkan |0strip dari semuanya setelah titik desimal.
Contoh: 116.15200161933899 -> 116

Menggunakan .toString(16)konversi nomor ini ke heksadesimal (basis 16).
Contoh: 116 -> 74
contoh lain: 228 -> e4

Menambahkan "0"bantalan dengan nol. Ini akan menjadi penting ketika kita mendapatkan substring, karena hasil akhir kita harus memiliki dua karakter untuk setiap warna.
Mis: 74 -> 074
contoh lain: 8 -> 08

.substr(-2)hanya mendapatkan dua karakter terakhir.
Contoh: 074 -> 74
Contoh lain: 08 -> 08 (jika kami tidak menambahkannya "0", ini akan menghasilkan "8" bukannya "08")

The forloop berjalan lingkaran ini tiga kali, menambahkan setiap hasil ke string warna, menghasilkan sesuatu seperti ini:
#7408e4

Jadi sementara semua jawaban di sini bagus, saya ingin sedikit lebih banyak kontrol atas output. Misalnya saya ingin mencegah warna putih dekat, sambil memastikan saya mendapatkan warna-warna cerah yang cerah dan tidak luntur.

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

Jadi sekarang saya dapat menentukan 3 rentang acak untuk memilih nilai rgb. Anda dapat menyebutnya tanpa argumen dan mendapatkan set default saya yang biasanya akan menghasilkan warna yang cukup cerah dengan warna dominan yang jelas sekali, atau Anda dapat menyediakan berbagai rentang Anda sendiri.

Komentar pilihan teratas dari jawaban teratas menunjukkan bahwa pendekatan Martin Ankerl lebih baik daripada angka hex acak, dan meskipun saya belum memperbaiki metodologi Ankerl, saya telah berhasil menerjemahkannya ke JavaScript. Saya pikir saya akan mengirim jawaban tambahan untuk utas SO yang sudah berukuran mega ini karena jawaban teratas memiliki komentar lain yang menghubungkan ke inti dengan implementasi JS dari logika Ankerl dan tautan itu rusak (404). Jika saya memiliki reputasi, saya hanya akan berkomentar tautan jsbin yang saya buat.

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

Untuk keacakan yang layak.

Warna acak

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

Alfa acak, warna acak.

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

Ada begitu banyak cara untuk mencapai ini. Inilah yang saya lakukan:

Menghasilkan enam digit hex acak (0-F)

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

One-liner yang sangat singkat

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

Menghasilkan masing-masing komponen HEX (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;
}

String hex yang direkayasa secara berlebihan (XOR 3 output bersama-sama untuk membentuk warna)

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

Namun generator warna acak lainnya:

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 membuatnya sangat bersih.

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

Membutuhkan shim untuk browser lama.

Anda dapat menggunakan fungsi sederhana ini

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/

Gunakan warna berbeda .

Ini menghasilkan palet warna yang berbeda secara visual .

warna yang berbeda sangat dapat dikonfigurasi:

• Pilih berapa banyak warna dalam palet
• Batasi rona ke rentang tertentu
• Batasi kroma (saturasi) ke rentang tertentu
• Batasi cahaya ke rentang tertentu
• Konfigurasikan kualitas umum palet

Berikut adalah dua versi saya untuk generator kode hex acak.

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

Fungsi ini melampaui jawaban lainnya dengan dua cara:

Ia mencoba untuk menghasilkan warna sejelas mungkin dengan menemukan warna dari 20 percobaan yang memiliki jarak euclidian terjauh dari yang lain dalam kerucut HSV

Ini memungkinkan Anda untuk membatasi rona, saturasi, atau rentang nilai, tetapi masih berusaha untuk memilih warna sejelas mungkin dalam rentang itu.

Ini tidak super efisien, tetapi untuk nilai-nilai yang wajar (siapa yang bisa memilih 100 warna dengan mudah?) Cukup cepat.

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

Hampir semua metode tulisan tangan sebelumnya menghasilkan kode hex yang tidak valid (lima digit). Saya menemukan teknik yang sama hanya tanpa masalah itu di sini :

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

Uji

Coba ini di konsol:

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

Versi saya:

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

map (menghasilkan warna rgb yang selalu valid)

`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

Anda dapat menggunakan colorchain.js untuk menghasilkan urutan warna dengan beragam corak.