Wątpię, żeby cokolwiek było szybsze lub krótsze od tego:

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

Oto kolejne ujęcie tego problemu.

Jest to idealne rozwiązanie do tworzenia znaczników wyskakujących w Google Maps, które mają optymalną "wyjątkowość" (czyli żadne dwa znaczniki nie będą miały podobnych kolorów).

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

Jeśli chcesz zobaczyć jak to wygląda w akcji zobacz http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html .

Kto może to pokonać?

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

Gwarantowana praca przez cały czas: http://jsbin.com/OjELIfo/2/edit

Na podstawie komentarza @ eterps powyższy kod może nadal generować krótsze ciągi znaków, jeśli szesnastkowa reprezentacja losowego koloru jest bardzo krótka (0.730224609375 => 0.baf)

Ten kod powinien działać we wszystkich przypadkach:

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

Nie ma potrzeby stosowania skrótu szesnastkowego. JavaScript może to zrobić Sam:

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

Podoba mi się ten: '#' + (Math.random().toString(16) + "000000").substring(2,8)

Losowe generowanie kolorów z regulacją jasności:

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

Możesz również używać HSL dostępnego w każdej dobrej przeglądarce ( http://caniuse.com/#feat=css3-colors )

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

To daje tylko jasne kolory, można również bawić się z jasnością, nasyceniem i Alfa.

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

Oto zwrot na rozwiązanie dostarczone przez @ Anatoliy.

Musiałem wygenerować tylko jasne kolory (dla tła), więc wybrałem format trzyliterowy (#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;
}

Artykuł napisany przez Paul Irish Na Random Hex Color Code Generator w JavaScript jest absolutnie niesamowity. Użycie:

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

Oto link źródłowy:

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

Można to bardzo łatwo znaleźć za pomocą wyszukiwarki 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;
    }
}

Wersja zaktualizowana:

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

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

Podział jak to działa:

Math.random()*256 pobiera losową (zmiennoprzecinkową) liczbę od 0 do 256 (0 do 255 włącznie)
Przykładowy wynik: 116.15200161933899

Dodanie |0 usuwa wszystko po przecinku.
Ex: 116.15200161933899 - > 116

Using .toString(16) converts this number to hexadecimal (base 16).
Ex: 116 - > 74
Inny ex: 228 - > e4

Dodanie "0" oznacza zero. Będzie to ważne, gdy otrzymamy podłańcuch, ponieważ nasz wynik końcowy musi mieć dwa znaki dla każdego koloru.
Ex: 74 - > 074
Inny ex: 8 - > 08

.substr(-2) dostaje tylko dwa ostatnie znaki.
Ex: 074 - > 74
Inne ex: 08 - > 08 (gdybyśmy nie dodali "0", wytworzylibyśmy "8" zamiast "08")

Pętla for uruchamia tę pętlę trzy razy, dodając każdy wynik do ciągu kolorów, tworząc coś takiego:
#7408e4

Jeśli jesteś noobem takim jak ja, nie masz pojęcia o szesnastkach i tym podobnych, może to być bardziej intuicyjne.

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

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

Wystarczy skończyć z ciągiem takim jak 'rgb(255, 123, 220)'

Więc chociaż wszystkie odpowiedzi tutaj są dobre, chciałem trochę więcej kontroli nad wyjściem. Na przykład chciałbym zapobiec prawie białym odcieniom, zapewniając jednocześnie jasne żywe kolory, a nie wyprane odcienie.

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

Więc teraz mogę określić 3 dowolne zakresy, z których można wybrać wartości rgb. Możesz wywołać go bez argumentów i uzyskać mój domyślny zestaw, który zwykle generuje dość żywy kolor z oczywistym dominującym odcieniem, lub możesz podać własną tablicę zakresów.

Krótka odpowiedź z podkładką do dokładnego rozmiaru

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

Kolejny generator losowych kolorów:

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 sprawia, że jest bardzo czysty.

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

Potrzebuje shim dla starych przeglądarek.

Możesz użyć tej prostej funkcji

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

Głosowany komentarz top answer sugeruje, że podejście Martina Ankerla jest lepsze niż przypadkowe liczby szesnastkowe i chociaż nie poprawiłem metodologii Ankerla, z powodzeniem przetłumaczyłem ją na JavaScript. Pomyślałem, że wrzucę dodatkową odpowiedź do tego już mega dużego wątku, bo w górnej odpowiedzi jest jeszcze komentarz linkujący do Gista z implementacją JS logiki Ankerla i ten link jest zepsuty (404). Gdybym miał taką reputację, po prostu skomentowałbym łącze jsbin, które stworzyłem.

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

Wersja ES6.

Losowy kolor

`#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`

Losowa Alfa, losowy kolor.

`#${Math.floor(Math.random() * 0x100000000).toString(16).padStart(8, 0)}`

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

Http://jsfiddle.net/XmqDz/1/

Użyj distinct-colors.

Generuje paletę wizualnie różnych kolorów.

Distinct-colors jest wysoce konfigurowalny:

• Wybierz ile kolorów znajduje się w palecie
• Ogranicz odcień do określonego zakresu
• Ogranicz chroma (nasycenie) do określonego zakresu
• Ogranicz lekkość do określonego zakresu
• Konfiguracja ogólnej jakości palety

Oto moje dwie wersje generatora kodów sześciokątnych.

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

Ta funkcja wykracza poza inne odpowiedzi na dwa sposoby:

Próbuje wygenerować kolory jak najbardziej wyraziste, znajdując który kolor z 20 prób ma najdalszą odległość od pozostałe w stożku HSV

Pozwala ograniczyć odcień, nasycenia lub zakresu wartości, ale nadal próbuje wybrać kolory jako jak najbardziej w tym zakresie.

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

Prawie wszystkie poprzednie metody krótkiej ręki generują nieprawidłowe kody szesnastkowe (pięć cyfr). Natknąłem się na podobną technikę tylko bez tego problemu TUTAJ :

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

Test

Spróbuj tego w konsoli:

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

Jest tak wiele sposobów, aby to osiągnąć. Oto dwa zrobiłem:

Generuje sześć losowych cyfr szesnastkowych (0-F)

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

Generuje poszczególne komponenty RGB (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;
}

Możesz użyć colorchain.js do generowania sekwencji kolorów o różnych odcieniach.

Ta metoda uzyska losową liczbę, skonwertuje ją na sześciocyfrowy ciąg znaków, a następnie wyodrębni jego część, dając losowy sześciokąt.

function randomColor() {
    return "#" + Math.random().toString(16).slice(2,8);
}

Moja Wersja:

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