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

Posted 2023-02-23

【中文标题】在javascript中生成随机颜色的最佳方法？ [关闭]

【英文标题】：Best way to generate a random color in javascript? [closed]

【发布时间】：2010-11-12 05:28:50

【问题描述】：

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

有更好的方法吗？

【问题讨论】：

如果您正在为人类生成颜色并且需要大量可区分的颜色，您最好使用随机 HSV（参见 en.wikipedia.org/wiki/HSL_and_HSV）值。因为您可以为 S 和 V 提供更少的可能性，但仍然可以得到看起来不同的颜色。

Random color generator in JavaScript的可能重复

【参考方案1】：

更短的方法：

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

【讨论】：

确实是非常简短的解决方案 =) 我会给你 +1，但我可以在 Math.random 返回值如 0.0 或 0.5 的情况下（诚然非常罕见）看到这种失败。

是的，现在应该没问题（并且非常接近您的解决方案但更短:)

+1：使用相同的样式（即运算符之间的空格等），您的代码大约短 35 个字符 =) 这是我用于比较的代码的格式化版本：return '#' + (0x1000000 + Math.random() * 0xFFFFFF).toString(16).substr(1,6);

Soubok，您介意我在 javascriptcookbook.com 上使用您的解决方案吗？一位读者认为这是一个很好的补充。

如果您打算生成大量的随机颜色（数百万），则将数字设置为快一个数量级（因为toString 对整数的工作要少得多）：@987654328 @（请注意，乘法必须使用0x1000000 而不是0xFFFFFF，因为Math.random 返回范围[0, 1)——也就是说，它永远不会返回1.0）。 jsperf.com/random-hex-color

【参考方案2】：

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

【参考方案3】：

function randomColor()

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

     return color;

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

【参考方案4】：

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

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

【讨论】：

0.06029829654625929 => #f6fb5, 0.01086451193560456 => #2c804, 0.013915316490329177 => #38ff4, 0.0421506948772119 => #aca63, 0.0067180071741699265 => #1b845, 0.02415522842446105 => #62f09, 0.01397159804923187 => #393a4, 0.01909063159540958 => #4e31f

#333 与 #333333 颜色相同 - 这不是真正随机的

【参考方案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>

【讨论】：

请更新为什么这个答案是正确的。

【参考方案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)

【讨论】：

这是迄今为止我见过的基于 HSV 工作的最好的代码。很棒的工作。如果你想在你的页面中使用随机的浅色，请使用它。这里是一些进一步的阅读 martin.ankerl.com/2009/12/09/…

【参考方案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();
;

【讨论】：

是否有可能“添加”另一种颜色，并基本上让它从中断的地方重新开始？例如，假设您从 30 个项目开始着色，但用户添加了第 31 个项目。有没有办法让它继续当前生成的集合，并简单地生成符合先前色调和步骤的第 31 种颜色？

【参考方案8】：

最简洁：

function get_random_color()

  return '#' + Math.random().toString(16).substring(4);

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

【讨论】：

这会经常返回无效颜色，Math.random() 返回的小数位数变化很大。在 FF 中它返回超过 6 位的字符串，而 chrome/safari 可以低至 2 位

【参考方案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;

【讨论】：

我不认为substr 已被弃用，但它不如substring 和slice 标准。值得注意的是，substr 的行为也与 substring 不同。无论如何，我改为slice，因为它使代码更简单，作为额外的奖励。 =)

或者一行："#" + ("000000" + Math.floor(Math.random() * 16777216).toString(16)).substr(-6);

【参考方案10】：

更简洁：

function get_random_color2() 

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

【讨论】：

您应该在get_random_color2 函数之外定义函数...为每个调用重新定义一个函数感觉有点不必要。之前链接的解决方案更好，因为它只调用了一次Math.random，然后使用位移来获取红/绿/蓝分量。

@Blixt 你说的是：function randomRGB() var c = Math.random()*16777215; return 'rgb('+((c >> 16) & 0xff)+','+((c >> 8) & 0xff)+','+(c & 0xff)+')';