Javascript随机十六进制生成器返回互补色

Question

我有以下代码：

function get_random_color() {
    return '#' + Math.floor((Math.random() * 0xF00000) + 0x0FFFFF).toString(16);
}

for (var i=0; i<5; i++)
  {
      $(".colors").append("<div style='background:"+get_random_color()+"'></div>");
  }

HTML

<div class="colors"></div>

CSS

.colors > div{width:30px; height:30px;}

然而，“随机”一代似乎创造了各种几乎互补的颜色：

为什么我的代码不是完全随机的，颜色似乎总是匹配？

示例：

http://jsfiddle.net/SaRT6/

Answer 1

我不会说他们完全匹配，但我得到你的漂移！

我认为这可以归结为数学和概率，而不是我是该领域的专家，但是如果你想到它你有三个范围，并且最终以黑色为例，你需要所有这三个随机在该范围的最末端匹配的数字。与你想象的三个不匹配的数字相比，这种情况发生的可能性更小。你更有可能得到那个位于该范围内的数字而不是极端数字。如果你现在看一些常见的颜色，他们中的许多颜色将依赖于其中一个数字为零或接近于零，或者可能另一端为255.要获得黑色，你获得它的机率为1650万。任何灰色都一样。

那么解决方案呢？如果您不需要太多颜色，只需制作一组不同的“漂亮”颜色，然后使用随机索引从中挑选它们。

Answer 2

以下是我使用CSS3的HSL模型的建议。这使用固定的饱和度和亮度并稍微改变Hue - 您也可以以相同的方式改变S和L.

function get_random_color(H,S,L) {
  return 'hsl(' + ((H+Math.floor(Math.random() * 60))%360) + ','+S+'%,'+L+'%)' ;
}

randomS = Math.round(Math.random()*25)+75; // not too gray!
randomL = Math.round(Math.random()*20)+50-10; // not too light!
randomH = Math.floor(Math.random()*360);
for (var i=0; i<5; i++)
{
  $(".colors").append("<div style='background:"+get_random_color(randomH,randomS,randomL)+";'></div>");
}