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

我喜欢你的第二种选择，虽然它可以更简单一些：

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

Answer 4

正如乔治所说，最好的方法是使用HSL，这样你就可以产生一堆随机的人类可区分的颜色。类似的想法在Adams Cole answer中针对类似的问题实现，但是他的代码将随机颜色生成器和hsl-＆gt; 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 5

更简洁：

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

Answer 6

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

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

Answer 7

这个答案是最好的方法。

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

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

处查看SwitchColors.js的代码。

Answer 10

最简洁：

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

Nicolas Buduroi提供了以上最佳代码，以便在Random Color generator in Javascript

获取随机颜色

在javascript中生成随机颜色的最佳方法？

10 个答案: