1

我有以下代码：

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/

4

2 回答 2

1

这是我使用 CSS3HSL模型的建议。这使用固定的饱和度和亮度，并稍微改变色调——你也可以用同样的方式改变 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>");
}
于 2013-09-10T15:48:04.613 回答
1

我不会说它们完全匹配，但我明白你的意思！

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

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

于 2013-09-10T15:14:51.260 回答