产生在javascript随机颜色的最佳方式？ [关闭](Best way to generat

什么是产生在JavaScript中随机颜色不使用任何框架的最佳途径......

下面是我想出了几个解决方案：

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

是否有更好的方法来做到这一点？

Answer 1:

更短的方式：

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

Answer 2:

我喜欢你的第二个选项，但它可以制成一点点简单的：

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

Answer 3:

这里有一个方法来生成一个随机的颜色，并提供最低亮度：

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

从0-255用一个值调用randomColor，indicitating颜色应该有多亮是。 这是用于产生粉彩有帮助的，例如randomColor(220)

Answer 4:

正如乔治说，最好的方法是使用HSL，这样你就可以生成一串随机人为区分颜色。 类似的想法在实施亚当斯科尔回答到类似的问题，但他的代码有颜色随机发生器和捆绑在一起HSL->六角RGB翻译这使得它很难理解和修改。

如果您使用JavaScript色彩处理库之一（如jQuery的颜色 ）颜色生成变得简单：

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

Answer 5:

更简洁：

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

Answer 6:

这个答案是最好的方法。

你应该提供已知的颜色，而不是依靠纯数字的方法来选择。 您可以使用诸如网站在ColorBrewer选择能很好的根据问题的调色板（定性数据集，定量，或任何..）

['red','orange','yellow','green','blue','purple'][Math.random()*6|0]

 var colors = { rainbow: ['red', 'orange', 'yellow', 'green', 'blue', 'purple'], qual: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'], quant: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'], div: ['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#f7f7f7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061'] }; randc = function(array) { return array[Math.random() * array.length | 0] } genc = function() { var frag = []; var arr = colors[$("select").val()]; for (var i = 0; i < 1024; i++) { frag.push("<div style='background-color:" + randc(arr) + ";'></div>"); } $("#demo").html(frag.join('')); } genc(); $("select").on("change", genc); 

 #demo { margin-top: 10px; font-size: 0; } #demo div { display: inline-block; width: 24px; height: 24px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value='qual'>Qualitative (categorical)</option> <option value='quant'>Quantitative (sequential)</option> <option value='div'>Divergent (republicans versus democrats)</option> <option value='rainbow'>Rainbow (my little pony)</option> </select> <div id='demo'></div> 

Answer 7:

我做到了这样，与其他答案的帮助：

'#' + parseInt(Math.random() * 0xffffff).toString(16)

Answer 8:

function randomColor()
{
     color='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';

     return color;
}

这将返回一个随机RGB值。

Answer 9:

我创建了一个稍微复杂的解决方案，但一个可以让你控制颜色和亮度的饱和度。 你可以看看这里SwitchColors.js代码https://github.com/akulmehta/SwitchColors.js

Answer 10:

最简洁：

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

萨科Buduroi给上面的最好的代码以获得随机颜色的Javascript颜色随机发生器

文章来源: Best way to generate a random color in javascript? [closed]