1

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

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

我想根据这些值创建不同的颜色。我认为最简单的方法是使用 RGB 来创建它，方法是在循环中更改 RG 和 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 + ")";

}

但是我得到的颜色是相互接近的。我需要它们是不同的。

我试过加、减、乘等等……但到目前为止没有好的结果。

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

有任何想法吗？

4

2 回答 2

2

尝试这个

演示

color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
于 2013-09-15T02:34:32.070 回答
0

最好的方法是使用 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 函数的基本算法，你应该能够很容易地调整它以满足你的需要。

于 2013-09-15T04:02:19.377 回答