在javascript中生成随机颜色的最佳方法？ [关闭]

Question

在不使用任何框架的情况下，在 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

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

Answer 3

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

     return color;
}

这会返回一个随机的 RGB 值。

Answer 4

在其他答案的帮助下，我这样做了：

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

Answer 5

这个答案是最好的方法。

您应该提供已知的颜色以供选择，而不是依赖纯粹的数字方法。您可以使用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 6

这是一种生成随机颜色并提供最小亮度的方法：

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，指示颜色应该有多亮。这有助于生成粉彩，例如randomColor(220)

Answer 7

正如乔治所说，最好的方法是使用 HSL，这样您就可以生成一堆随机的人类可区分的颜色。类似的想法在Adams Cole answer 中实现了类似的问题，但他的代码将随机颜色生成器和 hsl->hex rgb 转换器捆绑在一起，这使得它难以理解和修改。

如果您使用其中一个 javascript 颜色操作库（如 jquery-color），颜色生成变得微不足道：

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 8

最简洁：

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

Nicolas Buduroi 在Random Color generator in Javascript 给出了上述最佳代码以获取随机颜色

Answer 9

我喜欢你的第二个选项，虽然它可以更简单一点：

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

更简洁：

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