web-dev-qa-db-fra.com

Générateur de couleur aléatoire

Étant donné cette fonction, je souhaite remplacer le color par un générateur de couleurs aléatoires.

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

Comment puis-je le faire?

341
n00ki3

Utilisez getRandomColor() à la place 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>

833
Anatoliy

Je doute que quelque chose soit plus rapide ou plus court que celui-ci:

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

Défi!

218
ZPiDER

Voici une autre prise sur ce problème.

Mon objectif était de créer des couleurs vives et distinctes. Pour éviter que les couleurs ne se distinguent, j’évite d’utiliser un générateur aléatoire et sélectionne les couleurs "à espacement régulier" dans Rainbow.

Cette fonctionnalité est idéale pour créer des repères instantanés dans Google Maps qui présentent une "unicité" optimale (en d’autres termes, aucun marqueur n’aura une couleur similaire).

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 vous souhaitez voir à quoi cela ressemble en action, voir http://blog.adamcole.ca/2011/11/simple-javascript-Rainbow-color.html .

135
Adam Cole

Qui peut le battre? 

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

Garanti de travailler tout le temps: http://jsbin.com/OjELIfo/2/edit

D'après le commentaire @eterps, le code ci-dessus peut toujours générer des chaînes plus courtes si la représentation hexadécimale de la couleur aléatoire est très courte (0.730224609375 => 0.baf).

Ce code devrait fonctionner dans tous les cas:

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

Il n'est pas nécessaire d'utiliser un hachage de lettres hexadécimales. JavaScript peut faire cela tout seul:

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

Génération aléatoire de couleurs avec contrôle de la luminosité:

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

J'aime celui-ci: '#' + (Math.random().toString(16) + "000000").substring(2,8)

25
Nicolas Buduroi

Vous pouvez également utiliser HSL disponible sur tout bon navigateur ( http://caniuse.com/#feat=css3-colors )

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

Cela ne vous donnera que des couleurs vives, vous pouvez jouer avec la luminosité, la saturation et l'alpha.

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`
19
kigiri
'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123
18
jt3k

L'article écrit par Paul Irish sur Random Hex Color Code Generator en JavaScript est absolument incroyable. Utilisation: 

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

Voici le lien source: 

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

17
way2vin

Voici une version de la solution fournie par @Anatoliy.

Je n'avais besoin que de générer des couleurs claires (pour les arrière-plans), je suis donc allé au format trois lettres (#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;
}
14
Andrei R

Ceci peut être très facilement trouvé en utilisant Google Search:

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

Version mise à jour:

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;
  }
}
13
Funky Dude
var color = "#";
for (k = 0; k < 3; k++) {
    color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}

Voici comment cela fonctionne:

Math.random()*256 obtient un nombre aléatoire (à virgule flottante) compris entre 0 et 256 (0 à 255 inclus)
Exemple de résultat: 116.15200161933899

Ajouter le |0 supprime tout ce qui suit le point décimal.
Ex: 116.15200161933899 -> 116

Utiliser .toString(16) convertit ce nombre en hexadécimal (base 16).
Ex: 116 -> 74
Un autre ex: 228 -> e4

Ajouter "0" le compresse avec un zéro. Ce sera important lorsque nous aurons la sous-chaîne, car notre résultat final doit avoir deux caractères pour chaque couleur.
Ex: 74 -> 074
Un autre ex: 8 -> 08

.substr(-2) obtient uniquement les deux derniers caractères.
Ex: 074 -> 74
Un autre ex: 08 -> 08 (si nous n'avions pas ajouté le "0", cela aurait produit "8" au lieu de "08")

La boucle for exécute cette boucle trois fois, ajoutant chaque résultat à la chaîne de couleur, produisant quelque chose comme ceci:
#7408e4

10
Erin Heyming

Si vous êtes un noob comme moi, ignorant tout des hexadécimaux et autres, cela pourrait être plus intuitif.

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

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

Vous devez juste vous retrouver avec une chaîne telle que 'rgb(255, 123, 220)'

9
ICoffeeConsumer

Réponse courte avec un tampon à la taille exacte

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

9
Taha Jahangir

Donc, même si toutes les réponses sont bonnes, je souhaitais un peu plus de contrôle sur la sortie. Par exemple, j'aimerais éviter les teintes proches du blanc, tout en m'assurant d'obtenir des couleurs vives et éclatantes, non délavées.

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

Alors maintenant, je peux spécifier 3 plages arbitraires dans lesquelles choisir les valeurs rgb. Vous pouvez l'appeler sans argument et obtenir mon jeu par défaut qui générera généralement une couleur assez vive avec une nuance dominante évidente, ou vous pouvez fournir votre propre gamme de plages.

8
Ollie Edwards

Le commentaire le plus voté de la réponse la plus élevée suggère que l'approche de Martin Ankerl est meilleure que les nombres hexadécimaux aléatoires, et bien que je n'aie pas amélioré la méthodologie d'Ankerl, je l'ai traduite avec succès en JavaScript. J'ai pensé poster une réponse supplémentaire à ce fil SO déjà de taille considérable, car la réponse la plus élevée comporte un autre commentaire lié à un Gist avec l'implémentation JS de la logique d'Ankerl et ce lien est rompu (404). Si j'avais la réputation, j'aurais simplement commenté le lien jsbin que j'ai créé.

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

6
spakmad

Array.prototype.reduce le rend très propre.

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

Besoin d'une cale pour les anciens navigateurs.

6
user1106925

Encore un autre générateur de couleur aléatoire:

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
6
Salman A

Version ES6.

Couleur aléatoire

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

Alpha aléatoire, couleur aléatoire.

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

Vous pouvez utiliser cette fonction simple 

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

Utilisez couleurs distinctes .

Il génère une palette de visuellement couleurs distinctes.

couleurs distinctes est hautement configurable:

  • Choisissez combien de couleurs sont dans la palette
  • Limiter la teinte à une plage spécifique
  • Limiter la chrominance (saturation) à une plage spécifique
  • Limiter la légèreté à une plage spécifique
  • Configurer la qualité générale de la palette
5
InternalFX
function get_random_color() {
    return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}

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

5
user2102611

Voici mes deux versions pour un générateur de code hexadécimal aléatoire.


/* 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))
3
Larry Battle

Cette fonction va au-delà des autres réponses de deux manières:

Il tente de générer des couleurs aussi distinctes que possible en recherchant quelle couleur sur 20 essais a la plus grande distance euclidienne de les autres dans le cône HSV

Cela vous permet de limiter la teinte, saturation ou plage de valeurs, mais tente toujours de sélectionner les couleurs comme aussi distincts que possible dans cette plage.

Ce n'est pas très efficace, mais pour des valeurs raisonnables (qui pourrait même distinguer facilement 100 couleurs?), C'est assez rapide.

Voir 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);
  }
3
Andy

Presque toutes les méthodes précédentes réduisent des codes hexadécimaux invalides (cinq chiffres). Je suis tombé sur une technique similaire seulement sans ce problème ici :

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

Tester

Essayez ceci dans la console:

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

Il y a tellement de façons d'accomplir cela. En voici quelques unes:

Génère six chiffres hexadécimaux aléatoires (0-F)

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

One-Liner extrêmement court

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

Génère des composants RVB individuels (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;
}

Chaîne hexagonale sur-conçue (XOR 3 sorties ensemble pour former la couleur)

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

Ma version:

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

Vous pouvez utiliser colorchain.js pour générer une séquence de couleurs avec différentes nuances.

2
alexishacks

Je n'ai pas encore vu la réponse la plus simple.

C'est le moyen le plus efficace de générer une couleur aléatoire:

var color = "#" + Math.floor(Math.random() * 16777215).toString(16);

A expliqué ce qu'il fait:

  • Il n'y a que 16777216 variantes de couleur RVB (256 * 256 * 256)
  • Choisissez un nombre aléatoire compris entre 0 et 16777216
  • Number.toString (16) vous donnera une chaîne hexagonale.
2
Azarus

Cette méthode va obtenir un nombre aléatoire, la convertir en chaîne hexadécimale, puis en extraire une partie, ce qui vous donnera un hex aléatoire.

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

Juste parce que je le pouvais, j'ai créé un extrait illisible aléatoire entre les codes hexadécimaux min et max ...:

function a(f, s){
    if(!s || !s.length > 1) return "";
    var c = Math.floor(Math.random()*(parseInt("0x" + s.substr(0,2))-parseInt("0x" +     f.substr(0,2))+1)+parseInt("0x" + f.substr(0,2))).toString(16);
    return  (Array(3 - c.length).join("0")) + c + a(f.substr(2,f.length),s.substr(2,s.length));
}

a("990099","ff00ff") → peut être aléatoire → b5009e

Il le fait par paires, donc a("12","f2") → → peut aléatoire → 8f. Mais il ne dépassera pas 'f2'.

var color = "#" + a("11","22") + a("33","44") + a("55","66");

C'est la même chose que:

var color = "#" + a("113355","224466")

Mais plus lentement.

2
zenril

Vous pouvez essayer ça. C'est un générateur de couleur absolument aléatoire et confortable))

var Color = '#';
var myElement;
for (var i = 0; i < 6; i++) {
    function Random1(from, to) {
      return Math.floor((Math.random() * (70 - 65 + 1)) + 65);
}
    function Random2(from, to) {
      return Math.floor((Math.random() * (1 - 0 + 1)) + 0);
}
    function Random3(from, to) {
      return Math.floor((Math.random() * (9 - 0 + 1)) + 0);
}
if (Random2()) {
     myElement = Random3();
}
else {
     myElement = String.fromCharCode(Random1());
}
Color += myElement;
}
1
Duke

De nombreuses réponses font plus que des appels nécessaires à Math.random(). Ou ils espèrent que la représentation hexadécimale de ce nombre aura 6 caractères.

D'abord, multipliez le nombre aléatoire flottant pour qu'il soit dans la plage [0, 0xffffff + 1). Notre numéro a maintenant la forme 0xRRRRRR et un changement, qui est un nombre avec 24 bits significatifs. Lisez 4 bits à la fois, utilisez ce nombre aléatoire [0, 15] et convertissez-le en son caractère hexadécimal correspondant dans lookup.

function randomColor() {
    var lookup = "0123456789abcdef";
    var seed = Math.random() * 0x1000000;
    return (
        "#" +
        lookup[(seed & 0xf00000) >> 20] +
        lookup[(seed & 0x0f0000) >> 16] +
        lookup[(seed & 0x00f000) >> 12] +
        lookup[(seed & 0x000f00) >> 8] +
        lookup[(seed & 0x0000f0) >> 4] +
        lookup[seed & 0x00000f]
    );
};
1
cdosborn

Je pense que la première réponse est la plus succincte/utile, mais je viens d’en écrire une qui serait probablement plus facile à comprendre pour un débutant.

function randomHexColor(){
    var hexColor=[]; //new Array()
    hexColor[0] = "#"; //first value of array needs to be hash tag for hex color val, could also prepend this later

    for (i = 1; i < 7; i++)
    {
        var x = Math.floor((Math.random()*16)); //Tricky: Hex has 16 numbers, but 0 is one of them

        if (x >=10 && x <= 15) //hex:0123456789ABCDEF, this takes care of last 6 
        {
            switch(x)
            {
                case 10: x="a" 
                break;
                case 11: x="b" 
                break;
                case 12: x="c" 
                break;
                case 13: x="d" 
                break;
                case 14: x="e" 
                break;
                case 15: x="f" 
                break;  
            }
        }
        hexColor[i] = x;
    }
    var cString = hexColor.join(""); //this argument for join method ensures there will be no separation with a comma
    return cString;
}
1
mv.danj
function getRandomColor()
{
    var color = "#";

    for (var i = 0; i < 3; i++)
    {
        var part = Math.round(Math.random() * 255).toString(16);

        color += (part.length > 1) ? part : "0" + part;
    }

    return color;
}
1
TheDarkIn1978

regexp (retourne toujours une couleur hexadécimale valide à 6 chiffres)

"#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
1
Kamil Kiełczewski

Cette ligne devrait changer la couleur de façon aléatoire pour vous:

setInterval(function(){y.style.color=''+"rgb(1"+Math.floor(Math.random() * 100)+",1"+Math.floor(Math.random() * 100)+",1"+Math.floor(Math.random() * 100)+")"+'';},1000);
0
sandeep

solution de travail sur une seule ligne (avec un remplissage composé de zéros):

var color="#"+"colors".split("").map(function(){return parseInt(Math.random()*0x10).toString(16);}).join("");
0
alexroat

One-Liner un peu amélioré pour rendre l'approche plus vivante 

'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)
0
alexfedotov
var html = '';
var red;
var green;
var blue;
var rgbColor;

for ( var i = 1; i <= 100; i += 1) {
  red = Math.floor(Math.random() * 256 );
  green = Math.floor(Math.random() * 256 );
  blue = Math.floor(Math.random() * 256 );
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';  
}

document.write(html);
0
Durul Dalkanat

Essayez ce paquet - https://www.npmjs.com/package/gen-random-colors Il vous permet également de configurer le jeu de couleurs de 0 à 5 (0 étant le plus sombre).

0
kurumkan

Ce code (Mohsen) ne peut pas générer de couleurs telles que # fcfc80. 

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

Celui de Nicolas Buduroi ne peut générer le # 008a80.

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

Ce code génère beaucoup de couleurs illégales (comme #abcde).

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

Et je continue à utiliser

"#"+((Math.random()+2)*16777216|0).toString(16).slice(1)
0
l4m2

J'ai généré 100 couleurs différentes de contraste différent, vous pouvez augmenter les valeurs en fonction de vos besoins:

Feedle Par exemple: http://jsfiddle.net/zFbfE/29/

Cela fonctionne pour moi et je pense que ce serait utile pour vous aussi

Une des meilleures choses dans cet exemple est qu'il générera 100 couleurs aléatoires et que les couleurs seront les mêmes à chaque chargement de page.

0
Shubham Nigam

J'aime parseInt pour ce cas:

parseInt(Math.random()*0xFFFFFFFF).toString(16)
0
Jony-Y

avec récursion

var randomColor = (s='') => s.length === 6 ? '#' + s : randomColor(s + '0123456789ABCDEF'[Math.floor(Math.random() * 16)]);
randomColor();
0
REDDY PRASAD

en utilisant la méthode Array.from () d'ES6, j'ai créé cette solution:

function randomColor() {
  return "#"+ Array.from({length: 6},()=> Math.floor(Math.random()*16).toString(16)).join("");
}

les autres implémentations que j'ai vues doivent s'assurer que si la valeur hexadécimale est précédée de zéros, le nombre contient toujours 6 chiffres.

La réponse de K ._ a utilisé le padStart de ES6 pour cela

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

L’autre bonne solution monoligne que j’ai vue est

function randomColor() {
  return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}
0
Alexander Rice
function randomColor(format = 'hex') {
    const rnd = Math.random().toString(16).slice(-6);
    if (format === 'hex') {
        return '#' + rnd;
    }
    if (format === 'rgb') {
        const [r, g, b] = rnd.match(/.{2}/g).map(c=>parseInt(c, 16));
        return `rgb(${r}, ${g}, ${b})`;
    }
}
0
jt3k

function getHashColor() {
  var hash = "0123456789ABCDEF";
  var hashColor = "#";
  for (var i = 0; i < 6; i++)
    hashColor += hash[Math.floor(Math.random() * hash.length)];

  document.getElementById('demo').style.background = hashColor
}
<div id="demo" style="background:red;height:300px;width:300px"></div>
<button type="button" onclick="getHashColor()">Clik Me</button>

0
Tariq Javed

map (retourne toujours la couleur RGB valide)

`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
0
Kamil Kiełczewski