【问题标题】:Generate unique colours生成独特的颜色
【发布时间】:2010-10-20 20:51:00
【问题描述】:

我想将一些数据绘制到纹理中:一行中的许多项目。它们不是按顺序创建的,而且它们的大小可能都不同(想想内存堆)。每个数据项都是一个小矩形,我希望能够将它们区分开来,因此我希望它们中的每一个都具有独特的颜色。

现在我可以只使用 rand() 来生成 RGB 值并希望它们都不同,但我怀疑我不会在 RGB 空间中获得良好的分布。还有比这更好的方法吗?例如。在它们(几乎)重复之前循环不同颜色的好方法是什么?

颜色不必与项目中的任何数据匹配。我只是希望能够查看许多值并发现它们是不同的,因为它们是相邻的。

我可以想办法,但我认为这是一个有趣的问题。 :)

【问题讨论】:

标签: algorithm visualization color-space


【解决方案1】:

使用 RGB 颜色模型并不是获得良好颜色混合的好方法。最好使用其他颜色模型生成颜色,然后从该颜色模型转换为 RGB。

我建议你改用HSV or HSL 颜色模型,特别是你想改变Hue

如果您想要 X 个不同的颜色值,请将它们从 0 更改为 360,步长为 360 除以 X。

【讨论】:

  • 0、360(同色)、180、300、390、102、162、213、258、298(基本上又是300)、334、367、(基本上是第三次360)。
【解决方案2】:

你的样本空间是多少...我们在谈论多少个项目。

您可以从

构建一个 RGB 三元组数组
for(int r = 0; r < 255; r = r+16)
   for(int g = 0; g < 255; g = g+16)
      for(int b = 0; b < 255; b = b+16)
           // take r, g, b and add it to a list

然后随机化您的列表并遍历它。 在重复颜色之前会给你 16^3 (4096) 种不同的颜色。

【讨论】:

  • 等同于 rand(0,16)
【解决方案3】:

一般来说,RGB 并不是一个很好的色彩空间来做这些事情,因为对于初学者来说,它在感知上是非线性的。这意味着在 RGB 三元组之间移动的相等距离​​在我们眼中看起来并不相同。

我可能会在 L*c*h* 空间 (see also) 空间或 HSL 空间中工作,并在色调中生成统一的间距。这些空间被设计成近似感知线性的。

【讨论】:

  • 即使在 hue 的 HSL 常规间距中也是 not perceptually linear
  • HSL 是 RGB 的直接数学转换,与特定色调无关。空间不是线性设计的。 LCH 是 LAB 的修改版,它实际上确实需要基于色调的处理以更好地适应人眼。
【解决方案4】:

这与着色地图相关的四色问题非常相似,这可能会为您提供一些有趣的解决方案:

Four colour theorem

【讨论】:

  • 这真的和4色问题完全不一样。尼克根据需要使用尽可能多的颜色,而着色问题则试图尽量减少您需要的颜色......
  • 其实和4色问题没有关系,4色只需要4色,只是作为“标签”使用。在这里,他关注所选颜色的光学质量(相同性)。
  • 我不同意,我认为这里的 4 色问题有优点。问题是通过使用颜色来区分排列在 2D 平面中的项目。 4 色问题证明您可以仅使用 4 种对比色来解决问题。
  • Nick 的问题围绕着拥有足以代表他正在显示的元素的调色板而没有彼此相邻的紧密对比色。我并不是建议他将自己限制在 4 种颜色,只是围绕代表“瓷砖”的理论以及需要多少颜色来确保清晰的对比度是相关的,并且可能会导致一些有趣的解决方案。各有千秋。
  • 拉撒路;上面我试图说明的一点是 4 色问题很难,因为你必须重复使用颜色。尼克可能有他想要的有效数量,只是需要一种方法来产生可区分的颜色。非常不同的问题(并非完全不相关,但非常不同)。
【解决方案5】:

谷歌“delta e cie 2000”;色差公式可用于确定两种颜色之间的表观(视觉)距离。 (在显示器上;颜料有不同的公式。)它对实验室空间中的颜色进行操作(西蒙的道具),但对差异进行感知计算。

我们发现 1.5 左右的数字足以确保在视觉上不同颜色(即,如果它们彼此靠近,您可以分辨出区别),但如果您希望 可识别 颜色(您可以在图例中找到任何颜色)您需要将其提升。

至于创建一组颜色...我可能会从 Lab 空间的某个角落开始,并使用可提供足够大视觉差异的步长在它周围走动(注意:它不是线性的,因此步长会可能必须是自适应的)然后随机化列表。

【讨论】:

    【解决方案6】:

    如果您只需要一组感知上不同的颜色(而不是生成它们的算法),我在我的网站上创建了一个免费工具,可以做到这一点:
    http://phrogz.net/css/distinct-colors.html

    该工具不仅可以在 RGB 或 HSV 空间中使用均匀间距(相对于人类感知而言分布不均匀),还允许您在 HSV 空间中生成值网格,然后使用CMC(I:c) 颜色标准距离以丢弃在感知上彼此太接近的颜色。 (第二个选项卡上的“阈值”滑块可让您控制颜色在视觉上的区别程度,实时向您显示结果。)

    最后,您可以按各种标准对生成的颜色列表进行排序,然后均匀地“打乱”该列表,以保证列表中的视觉上不同的值彼此相邻。 (我建议“交错”值约为 5。)

    在撰写本文时,该工具在 Chrome、Safari 和(通过 shim)Firefox 上运行良好; IE9 不支持 HTML5 范围输入滑块,UI 广泛用于交互式探索。

    【讨论】:

      猜你喜欢
      • 2010-11-13
      • 2011-03-09
      • 2013-02-23
      • 1970-01-01
      • 1970-01-01
      • 2013-08-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多