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

Question

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

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

我想根据这些值创建不同的颜色。我认为最简单的方法是使用 RGB 来创建它，通过循环更改 R G & 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 个值，那么仅值不同的颜色的独特性将会丢失。

然后，您可以根据需要分配尽可能多的色调。色调控制着我们通常所说的“颜色”。色调从 0°（红色）开始，然后通过一个圆圈回到起点，绿色在 120°，蓝色在 240°。如果您使用两个单独的值，则需要的色调数量将是颜色数量的一半。所以如果你有 10 种颜色，其中一半是低值（0.4），一半是高值（0.8）。然后为每个值分配 5 个等距的色调。由于色调是从 0 到 360 的度数，这意味着您将使用色调 0 和每 72 度 (360/5 = 72)。所以色相 0、72、144、216 和 288。

然后只需转换为 RGB 即可。

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

• 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 函数配合使用的基本算法，您应该能够很容易地对其进行调整以满足您的需求。