0

我目前正在使用以下内容在javascript中生成随机十六进制颜色：

function getColor(){
     return '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
}

每次生成这些颜色中的一种时，它们都会被推入一个数组：

var colors = new Array();

我希望 getColor 函数始终首先从“整体”​​颜色中选择。例如“红色”(#FF0000) 和“黄色”(#FFFF00)，并且只有在通过检查颜色数组确认所有这些“完整”颜色已经被采用后，它才应该继续提供更模糊/混合的颜色，例如如“GreenYellow”（#ADFF2F）等。

所以本质上，该函数最终应该用每种基于十六进制的颜色填充颜色数组，从最强的颜色（我描述为“整体”颜色）开始，然后转向较弱的“混合”颜色，最后以黑色结束因为它将被认为是最不可取的。

不幸的是，我真的不知道从哪里开始，除了按照我想要的确切顺序提供完整的颜色数组，然后遍历它们。

这似乎更像是用大锤敲碎坚果。任何其他更优雅的解决方案将不胜感激。

提前致谢。

请注意：我知道我在这里使用的术语并不正确，但希望人们能理解我所说的“整体”颜色是什么意思。我实在想不出更好的表达方式。

编辑：了解一些需要这个的原因可能会有所帮助。这些颜色将用于在视觉上识别开始于同一组的项目，因为用户将它们自己分组在一起。大多数时候只有几组，平均可能多达 20-30 组。因此，在使用可能看起来更相似的颜色之前，先使用清晰可见并相互区分的强烈颜色是有意义的。

4

2 回答 2

3

生成看起来不同的颜色更多的是关于人类的感知而不是数学。在 RGB 值中相隔相同距离的某些颜色对看起来比其他颜色对更相似。

即便如此，我认为您不想在 RGB 中解决这个问题。相反，请尝试在 HSL 或 HSV 中生成颜色：http ://en.wikipedia.org/wiki/HSL_and_HSV

这允许控制色调、饱和度和亮度，这更接近人类对颜色的感知属性。然后，您可以通过改变其他属性不变的色调来生成颜色。

// assume hue is in degrees here
// think of hue like a circle with each angle a different color.
red     = hsv(0,   1, 1);
green   = hsv(120, 1, 1);
blue    = hsv(240, 1, 1);

然后，您可以开始更紧密地细分色调空间。

yellow  = hsv(60,  1, 1);
cyan    = hsv(180, 1, 1);
magenta = hsv(300, 1, 1);

一旦色调接近接近，降低饱和度或亮度，然后再做一次。

// run through all hues again but with half the value
darkRed = hsv(0, 1, 0.5);

// run through all hues again but with half the saturation
lightRed = hsv(0, 0.5, 1);

// run through all hues again but with half the value and half the saturation
desatRad = hsv(0, 0.5, 0.5);

然后您甚至可以将饱和度/值空间细分为 0.25 和 0.75。我所描述的是一种递归算法的策略，它生成尽可能独特的颜色，首先返回最大胆/最亮的颜色。而且它也不是随机的，因为它不需要。

你所需要的只是一个 hsv/hsl 到 javascript 中的十六进制库，我敢肯定在某个地方有一个，还有一些数学。

于 2013-04-02T20:55:59.320 回答
0

如果您将色块减少到 256 种或更少颜色会更容易，前提是该颜色数量足够，因为人眼很难区分 #0000FF 和 #0000FE。

我不确定我是否理解您在该数组上需要不重复的颜色，如果是这样，您将需要检查以前的值以获得唯一的颜色。

于 2013-04-02T21:00:03.430 回答