配色方案的产生-理论和算法

我将生成图表，并且我正在寻找有关配色方案和算法示例的一些理论。

问题示例：

• 如何产生互补或相似的颜色？
• 如何产生柔和，冷和暖的颜色？
• 如何生成任意数量的随机但截然不同的颜色？
• 如何将所有内容转换为十六进制三元组（网页颜色）？

我的实现将在AS3中进行，但欢迎使用伪代码中的任何示例。

在寻找有关此问题的更多信息（这也是我一直在努力解决的问题）时，我找到了此Blog。Stefano Mazzocchi解释了他的理论，为什么程序员会为UI设计选择颜色，并提供了一些有用的建议和链接。

他提供的第一点建议是这个明显的事实，为选择色相和饱和度奠定了基础：

与背景相比具有相同对比度的两条信息将被视为具有相同的重要性级别（在所有其他条件相同的情况下），而对比度越高则表明重要性越高，而对比度越低则表明重要性越低。

这为如何为前景和背景选择颜色提供了第一个线索-重要信息越少使用较低的对比度，重要信息越少使用较高的对比度。

第一个链接是“ 颜色方案设计器”（类似于Kuler的网站）。像Kuler一样，它是一种方便的交互式工具，但是它对如何选择颜色（即哪种黄色与哪种绿色或蓝色等等）没有任何见解。

他提供的下一个链接是一个名为“ 在信息显示图形中使用颜色”的NASA颜色使用研究实验室网站。该站点提供了有关如何选择颜色以获得适当对比度等的更多信息，并列出了用于测量诸如对比度之类的数学公式。我尚未在该站点上找到任何SW代码或伪代码算法，但仅浏览了几页。Stefano还指出，NASA色彩实验室使用了Munsell色彩系统，该系统类似于HSV，但经过加权后可以更准确地反映人类对色彩的感知，而不是可测量的色彩特性。

Stefano博客中提到的最后一个链接是一个名为Color Trends + Palettes :: COLOURlovers的网站。与“配色方案设计器”或“ Kuler”相比，该网站在寻找颜色选择算法方面没有提供更多帮助，但是在我们对某些颜色和调色板的短暂享受中，它强调了当前更改的可测量性较差。如果您希望自己的UI反映最新趋势，则值得一游。

再次访问NASA网站并浏览其中的某些页面，尤其是有关Color Science的页面，您应该能够提出一种可行的算法，以选择可以协同工作并提供所需对比度的颜色。

编辑： 我将在此区域添加其他有用的链接。

1. 色彩的交互式遗传算法.pdf
2. 一种感知颜色分割算法.pdf
3. 适用于Great Web Design.html的颜色和配色方案组合指南

就颜色生成工具而言，我最喜欢http://kuler.adobe.com。

当您在网站上创建一个调色板（5种颜色）时，您可以选择“相似”，“单色”，“三合色”，“互补”，“复合”和“阴影”。当然，您可以自定义颜色，而不是自动生成颜色。每个色块都以RGB和Hex（以及CMYK / HSV / Lab）形式显示数值。

如何产生互补或相似的颜色？

这涉及更多的颜色理论知识。您可以在此处查看一个不错的（基本）解释。请参见色轮。

如何产生柔和，冷和暖的颜色？

通常，柔和的颜色是“柔和的颜色”。它们是色调的较高和较低范围。请参阅Kuler的用户生成的柔和颜色部分。

如何生成任意数量的随机但截然不同的颜色？

为了您的图表目的，我不确定随机颜色是否会起作用。每种颜色选择均应手工挑选。

如何将所有内容转换为十六进制三元组（网页颜色）？

大多数图形软件显示颜色的十六进制值。十六进制是由##（红色），##（绿色），##（蓝色）组成的RGB字符串。

例如，纯红色为FF0000，纯蓝色为＃0000FF。紫色（通过混合红色和蓝色得到）为＃FF00FF。

由于您将要创建图表，因此建议您访问以下博客以获取灵感：

http://infosthetics.com

http://flowingdata.com

如果有时间，请通读色彩理论课

我有一段时间的想法是为尽可能多的颜色生成尽可能不同的颜色（在限制范围内）。额外的麻烦是，如果以后我需要为同一张图表添加额外的几种颜色（也许添加了一些额外的条形），则它们需要适合相同的方案，以使现有颜色保持相同。

我提出的想法有点摆弄。想象一个颜色的圆圈（尽管每种颜色空间都可以定义任何圆圈，但是每种颜色可能具有相同的饱和度和亮度。与其为该圆提供度数，不如将其范围设置为零至255。在二进制中，其范围为00000000至11111111。将8加到255上会加1，它会溢出回到零，因此自然地充当“圆值” （在技术上，加法和减法是模256）。

诀窍是当您选择颜色零，颜色一等以对这些数字进行位反转时。要在C中做到这一点，我会使用...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

因此序列0、1、2、3、4转换为0、128、64、192、32。

关键是您有256种不同的颜色，最早的颜色之间的间隔非常宽，而后面的颜色间隔较小，并填补了空白（64是0和128之间的一半，32是一半）在0到64之间，等等）。

如果您调整位反转，则特定“角度”的任何位宽都将起作用，并且当然您可以针对颜色的不同参数一次运行多个循环（色相旋转得很快，而饱和度旋转得更慢）。

剩下的问题就是如何将“角度”映射到特定的RGB数字或其他任何东西，我不是专家-哦，还有ActionScript是否支持位调制的问题。

在此有一个有趣的堆栈溢出问题“ 创建色轮的功能 ”。您可能还需要阅读推荐的论文之一（PDF）。

这个问题使我着迷，所以我开始进行谷歌搜索。:)不要期望基于经验的答案。

基本上，要使用颜色进行计算，最好是对色轮进行操作，该色轮以HSL格式表示。

这篇文章的作者很友好，可以提供一些有关将RGB转换为HSL的信息，以及有关如何计算补色的示例代码。

如果您很幸运，并且以下其中一个笨拙的AS3库都可以为您工作，则您无需了解其中的任何内容。

• 卡洛吉兹
• 莫霍色

我使用了以下代码。注意：它不使用关于眼睛/大脑工作原理的理论，我只是想能够创建一种颜色调色板，使得red + green + blue = 1，并且颜色大致均匀地分布。参数“ me”是总共num种可能的颜色中的哪种颜色。它的工作量大约为91 ish。注意我应该从零到num-1。可能还有其他事情，上面给出的约束是任意的，但是至少它会产生不同的颜色-假设您不需要太多颜色。

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

再次，它不使用颜色理论，因此不存在任何差异都可以优化区分的问题-尤其是当您担心偶尔出现部分色盲的用户时。

您也可以简单地将原色变量设置为随机数，但是它们形成视觉上不同的集合的可能性更低。

在过去，我只是通过手工选择20种左右的颜色来完成此任务，而不是尝试生成它们。除非您的图非常复杂，否则通常不需要更多。这种方法虽然简单，但也可以让您将相同的颜色分配给图形中的相同因素（例如，您始终可以使“销售”使用相同的颜色，从而使图形更易于解释）。

我喜欢从照片中取样颜色。作为设计师，我手动执行此操作。作为程序员，我通常选择一个随机像素。如果您想获得更多控制权，则可以创建自己的符合特定规则集的“照片”。

我一直喜欢VisiBone的在线实用程序，因为您可以选择多种颜色，并以交互方式评估它们之间的冲突程度： http //www.visibone.com/colorlab/

我之所以说它们之间的冲突非常严重，是因为我对适用于“模拟”艺术的色彩对比非常熟悉，并为我选择的色彩在数码艺术中相互碰撞而感到惊讶。（虽然我显然不是设计师）