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

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

函数get\u random\u color（） { var color=“”； 对于（变量i=0；i<3；i++）{ var sub=Math.floor（Math.random（）*256）.toString（16）； 颜色+=（子长度==1？“0”+子：子）； } 返回“#”+颜色； } 函数get_rand_color（） { var color=Math.floor（Math.random（）*Math.pow（256,3））.toString（16）； while（color.length<6）{ color=“0”+颜色； } 返回“#”+颜色； } 有更好的方法吗？

更简洁：

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

---

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

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

较短的方式：

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

最简洁的：

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

---

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

如果使用其中一个javascript颜色操纵库（如），则颜色生成变得很简单：

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

---

以下是生成随机颜色并提供最小亮度的方法：

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）

这个答案是最好的方法

您应该提供已知的颜色供选择，而不是依赖纯数字方法。您可以使用一些站点，例如根据问题选择效果良好的调色板（定性数据集、定量数据集或其他任何类型的）

[‘红色’、‘橙色’、‘黄色’、‘绿色’、‘蓝色’、‘紫色’][Math.random（）*6|0]

var颜色={
彩虹：[“红”、“橙”、“黄”、“绿”、“蓝”、“紫”]，
资格：[“8dd3c7”、“ffffb3”、“bebada”、“fb8072”、“80b1d3”、“fdb462”、“b3de69”、“fccde5”、“D9D9”、“bc80bd”、“ccebc5”、“ffed6f”]，
数量：[“fff7ec”、“fee8c8”、“fdd49e”、“fdbb84”、“fc8d59”、“ef6548”、“d7301f”、“b30000”、“7f0000”]，
分区：[“67001f”、“b2182b”、“d6604d”、“f4a582”、“fddbc7”、“f7f7f7”、“d1e5f0”、“92c5de”、“439C3”、“2166ac”、“053061”]
};
randc=函数（数组）{
返回数组[Math.random（）*array.length | 0]
}
genc=函数（）{
var frag=[]；
var arr=colors[$（“select”）.val（）；
对于（变量i=0；i<1024；i++）{
框架推送（“”）；
}
$（“#demo”）.html（frag.join（“”））；
}
genc（）；
$（“选择”）。在（“更改”，genc）
#演示{
边缘顶部：10px；
字号：0；
}
#示范组{
显示：内联块；
宽度：24px；
高度：24px；
}

定性（分类）
定量（顺序）
分歧（共和党对民主党）
彩虹（我的小马）
在其他答案的帮助下，我这样做了：

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

这将返回一个随机RGB值
 我创建了一个稍微复杂一点的解决方案，但它可以控制颜色的饱和度和亮度。您可以在这里查看SwitchColors.js的代码
我不认为
substr
是不受欢迎的，但它不如
substring
和
slice
标准。值得注意的是，
substr
的行为也不同于
substring
。无论如何，我改为
slice
，因为它使代码更简单，这是额外的奖励或者在一行：
“#”+（“000000”+Math.floor（Math.random（）*16777216）.toString（16））.substr（-6）
您应该在
get\u random\u color2
函数之外定义函数。。。为每个调用重新定义函数感觉有点不必要。前面链接的解决方案更好，因为它只调用了
Math.random
一次，然后使用位移位来获取红色/绿色/蓝色组件。@blix这里是您所讨论的：
function randomRGB（）{var c=Math.random（）*16777215；返回'rgb（+（（c>>16）和0xff）+'，+（（c>>8）和0xff）+'，+（c&0xff）+'；'
如果您正在为人类生成颜色，并且需要大量可分辨的颜色，则最好使用随机HSV（请参阅）值。因为你可以为S和V提供更少的可能性，但仍然得到看起来不同的颜色。很短的解决方案的可能副本确实=）我会给你+1，但我可以看到在
Math.random
返回值如
0.0
或
0.5
的情况下（公认非常罕见）会失败。是的，现在应该可以了（非常接近您的解决方案，但更短：）是的，但现在您遇到了必须用0填充字符串的问题（如果结果是
+1：使用相同的样式（即运算符之间的空格等），您的代码大约短35个字符=）这是我用于比较的格式化代码版本：
返回'#'+（0x1000000+Math.random（）*0xFFFFFF）.toString（16）.substr（1,6）；
Soubok，你介意我在javascriptcookbook.com上使用你的解决方案吗？一位读者认为这是一个很好的加法。这通常会返回无效的颜色，即小数位数Math.random（）返回值变化很大。在FF中，它返回的字符串长度超过6位，chrome/safari可以低至2位。这是迄今为止我见过的基于HSV的最佳代码。做得好。如果你想在页面中使用随机灯光颜色，请使用它。下面是一些进一步的阅读，请更新此答案的正确性。是否可以“添加”另一种颜色，基本上让它从它停止的地方开始着色？例如，假设你从30个要着色的项目开始，但用户添加了31个项目。有没有办法让它继续使用当前生成的集，并简单地生成一个符合先前颜色和步骤的31个颜色？
0.06029829654625929=>#f6fb5
，
0.01086451193560456=>2c
function randomColor()
{
     color='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';

     return color;
}