Question

我有一个数组，其值从n到n + 1

var numbrs=[1,2,3,4,5,6,7,8,9,10];

我想根据这些值创建不同的颜色。我认为最简单的方法是使用RGB创建它，通过更改R G＆amp; B在循环中。

类似的东西（仅举例）：

for(var i=0;i < 10;i++){

var r = i * 10;
var g = i * 5;
var b = i * i
var color = "rgb(" + r + "," + g + "," + b + ")";

}

然而，我得到的颜色是彼此接近的。我需要他们与众不同。

我尝试过添加，减去，乘法等等......但到目前为止还没有很好的结果。

我不想要相同颜色的阴影。我需要一个很好的组合。

有什么想法吗？

Answer 1

试试这个

DEMO

color = "#" + ((1 << 24) * Math.random() | 0).toString(16);

Answer 2

最好的方法是使用HSV色彩空间并在色调（H）上均匀分布颜色。对于不同的颜色使用中到饱和度（S）（较低的饱和度将为灰色）。您也可以使用两个不同的值（V）。参考：http://en.wikipedia.org/wiki/HSL_and_HSV（包括来回转换算法的RGB）简而言之，HSV颜色与我们感知颜色的方式更紧密地协作，因此更容易进行适当的调整以适应您的视觉需求（在这种情况下制作颜色不同）。

所以说你首先选择饱和度为0.75。低饱和度洗掉灰色。高饱和度可产生深色或鲜艳色彩。应该在所选颜色上保持饱和度，否则某些颜色看起来会有明显的不同，较高的饱和度值似乎意味着不同的颜色。

然后你决定你可以拥有多少个值（1,2或甚至3个），并且仍然提供良好的清晰度。低值接近黑色，而高值则明亮且充满活力。所以可能是0.5的值和0.8的值。如果你的价格低于0.4，你就会开始变得如此黑暗以至于失去了独特性。如果使用超过2或4个值，则仅会丢失仅在值上不同的颜色的独特性。

然后根据需要分配尽可能多的色调。 Hue控制我们通常称为“颜色”的东西。色调从0°开始（红色）并向前推进一个圆圈，开始时为绿色，120°，蓝色为240°。如果您使用两个单独的值，您将需要一半的颜色和颜色。因此，如果您有10种颜色，其中一半将是低值（0.4），其中一半将是高值（0.8）。然后分配5个等距的色调以与每个值一起使用。由于Hue是从0到360的度数，这意味着你将使用色调0和每72度（360/5 = 72）。所以色调0,72,144,216和288。

然后只需转换为RGB就可以了。

示例HSV基于10种所需颜色和两个选定值

进行设置

0°，0.75,0.4（深红色）
0°，0.75,0.8（鲜红色）
72°，0.75,0.4（深灰黄色）
72°，0.75,0.8（亮石灰黄色）
144°，0.75,0.4（深绿色，带蓝色）
144°，0.75,0.8（亮绿色，带蓝色）
216°，0.75,0.4（深色水）
216°，0.75,0.8（明亮的浅绿色）
288°，0.75,0.4（深紫色）
288°，0.75,0.8（亮紫）

一旦你有了HSVtoRGB功能的基本算法，你应该能够很容易地调整它以满足你的需求。

如何根据数组值创建不同的颜色？

2 个答案: