在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

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

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

调用 randomColor，其值介于 0-255 之间，指示颜色应该有多亮。这对于生成粉彩很有帮助，例如

randomColor(220)

Answer 3

我喜欢你的第二个选择，尽管它可以变得更简单一点：

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

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

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

Answer 5

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

更简洁：

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

Answer 7

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

     return color;
}

这将返回一个随机 RGB 值。

Answer 8

这个答案是最好的方法。

您应该提供已知的颜色以供选择，而不是依赖于纯数字方法。您可以使用像 ColorBrewer 这样的网站来根据问题选择效果良好的调色板（定性数据集、定量数据集或其他......）

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

const palettes = {
  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']
};
let pickRandom = function(array) {
  return array[Math.random() * array.length | 0];
}
let generateColors = function() {
  const frag = [];
  const selectedColor = document.getElementById("palette").value;
  const colors = palettes[selectedColor];
  if (!colors) {
    console.err(`No matching palette found for '${selectedColor}'`);
    return;
  }
  for (var i = 0; i < 1024; i++) {
    const color = pickRandom(colors);
    frag.push(`<div style='background-color:${color};'></div>`);
  }
  document.getElementById("demo").innerHTML = frag.join('');
}
generateColors();
document.getElementById("palette").addEventListener("change", generateColors);

#demo {
  margin-top: 10px;
  font-size: 0;
}

#demo div {
  display: inline-block;
  width: 24px;
  height: 24px;
}

<select id='palette'>
  <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 9

最简洁：

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

Nicolas Buduroi给出了上述最佳代码，以在Javascript中的随机颜色生成器中获取随机颜色

Answer 10

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