Question

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

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

每当生成其中一种颜色时，它们就会被推入一个数组：

var colors = new Array();

我希望getColor函数始终首先从“整个”颜色中选择。如“红色”（＃FF0000）和“黄”（＃FFFF00），并且仅在确认所有这些“整体”颜色已经采取的对抗颜色阵列检查之后，应该然后继续，以提供更多晦涩/混合颜色，例如作为'GreenYellow'（＃ADFF2F）等。

所以基本上这个函数应该最终用每个基于十六进制的颜色填充颜色数组，从最强的颜色开始（我描述为'整个'颜色）然后继续使用较弱的'混合'颜色，最后完成黑色，因为它将被认为是最不可取的。

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

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

提前致谢。

请注意：我知道我在这里使用的术语并不是真的正确，但希望人们会理解“整体”颜色的含义。我真的想不出任何更好的表达方式。

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

Answer 1

生成看似不同的颜色更多是关于人类感知而不是数学。 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。我所描述的是一种递归算法的策略，该算法尽可能生成唯一的颜色，首先返回最大胆/最亮的颜色。并且也不是随机的，因为它不需要。

你需要的只是javascript中的hsv / hsl到hex库，我确信它有一个地方，还有一些数学。

Answer 2

如果将颜色斑点减少到256或更少颜色，如果颜色数量足够，那将会更容易，因为人眼很难区分＃0000FF和＃0000FE。

我不确定我是否理解你在该阵列上需要非重复的颜色，如果是这样，你需要检查以前的值以获得独特的颜色。

Javascript随机颜色生成器，但偏爱强烈的颜色

2 个答案: