web-dev-qa-db-fra.com

Le meilleur moyen de générer une couleur aléatoire en javascript?

Quel est le meilleur moyen de générer une couleur aléatoire en JavaScript sans utiliser de framework ...

Voici quelques solutions que j'ai proposées:

function get_random_color() 
{
    var color = "";
    for(var i = 0; i < 3; i++) {
        var sub = Math.floor(Math.random() * 256).toString(16);
        color += (sub.length == 1 ? "0" + sub : sub);
    }
    return "#" + color;
}

function get_Rand_color()
{
    var color = Math.floor(Math.random() * Math.pow(256, 3)).toString(16);
    while(color.length < 6) {
        color = "0" + color;
    }
    return "#" + color;
}

Y a-t-il de meilleures façons de le faire?

javascriptrandom
33
Dan

Un moyen plus court:

'#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
87
Franck Freiburger

J'aime votre deuxième option, même si cela peut être simplifié:

// Math.pow is slow, use constant instead.
var color = Math.floor(Math.random() * 16777216).toString(16);
// Avoid loops.
return '#000000'.slice(0, -color.length) + color;
13
Blixt

Voici un moyen de générer une couleur aléatoire et de fournir la luminosité minimale:

function randomColor(brightness){
  function randomChannel(brightness){
    var r = 255-brightness;
    var n = 0|((Math.random() * r) + brightness);
    var s = n.toString(16);
    return (s.length==1) ? '0'+s : s;
  }
  return '#' + randomChannel(brightness) + randomChannel(brightness) + randomChannel(brightness);
}

Appelez randomColor avec une valeur comprise entre 0 et 255 indiquant le niveau de luminosité de la couleur. Ceci est utile pour générer des pastels, par exemple randomColor(220)

9
David Mihal

Comme George l'a dit, le meilleur moyen consiste à utiliser HSL afin de générer un ensemble de couleurs aléatoires pouvant être distinguées par l'homme. La même idée est implémentée dans Adams Cole répond à la même question, mais son code a un générateur de couleurs aléatoires et un traducteur hsl-> hexagone ce qui rend difficile la compréhension et la modification. 

Si vous utilisez l'une des bibliothèques de manipulation de couleurs javascript (telle que la génération de couleurs jquery-color ) devient triviale: 

function Rainbow() {
  // 30 random hues with step of 12 degrees
  var hue = Math.floor(Math.random() * 30) * 12;

  return $.Color({
    hue: hue,
    saturation: 0.9,
    lightness: 0.6,
    alpha: 1
  }).toHexString();
};
8
Andrew

Plus succinct: 

function get_random_color2() 
{
    var r = function () { return Math.floor(Math.random()*256) };
    return "rgb(" + r() + "," + r() + "," + r() + ")";
}
5
Aaron Fi

Je l'ai fait comme ça, avec l'aide d'autres réponses:

'#' + parseInt(Math.random() * 0xffffff).toString(16)
2
Damjan Pavlica
function randomColor()
{
     color='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';

     return color;
}

Cela renvoie une valeur RVB aléatoire. 

2
user8085127

Le plus succinct:

function get_random_color()
{
  return '#' + Math.random().toString(16).substring(4);
}

Nicolas Buduroi a donné le meilleur code ci-dessus pour obtenir une couleur aléatoire à Générateur de couleur aléatoire en Javascript

0
Jack Liu Shurui

J'ai créé une solution légèrement plus compliquée mais qui permet de contrôler la saturation des couleurs et la luminosité. Vous pouvez consulter le code de SwitchColors.js ici https://github.com/akulmehta/SwitchColors.js

0
Coola