如何避免等距HSV颜色(2011)

正如你们中的一些人在我上一篇帖子的评论中指出的那样，在HSV颜色空间中获取等距离的颜色并不是找到一组被认为是等距离的颜色的解决方案。这篇文章描述了HSV的问题所在，以及我们可以为此做些什么。请注意，由于这篇文章包含基于最新网络技术的交互式元素，您可能需要一个现代浏览器才能充分利用它。

嗯，主要的问题是HSV的值分量只是颜色物理亮度的度量，而不是感知亮度的度量。因此，完全饱和的黄色与蓝色具有相同的“价值”。HSL颜色空间也是如此。这里有一组相同值的六种颜色来演示这种效果。第二行显示通过Photoshop转换为灰度后的颜色外观。除了亮度的这种强烈的色调依赖性之外，在单个色调内也没有线性亮度梯度。例如，在下面的HSL色标中，第二和第三个红色之间的亮度阶跃看起来比第三和第四个颜色之间的阶跃大得多。更糟糕的是，这种效果似乎在不同的色调上有所不同，正如与蓝色比例的比较所显示的那样。毕竟，这应该是避免等距HSV/HSL比例的足够理由。但是我们有什么选择呢？

所以问题是，我们应该怎么做呢？在评论中有人提到ColorBrewer，对于那些只想得到一些颜色而不太在意细节的人来说，这实际上是一个很好的解决方案。这里有一些顺序的ColorBrewer秤精选。此解决方案的一个缺点是您只能使用固定数量的颜色。对于每个色阶，集合提供了从3到9种颜色的变体。另一个缺点是，坚持一套预定义的颜色意味着放弃一些艺术自由。而且，最重要的是，选择现有的解决方案不是一半的乐趣，不是吗？

在这一点上，你最好为一些终极色彩极客做好准备。多亏了David Dalrymple的温和介绍，我终于敢于进入CIE L ab*颜色空间的魔幻世界。为了更好地理解这个颜色模型，我将David的代码移植到JavaScript，并构建了一个小型Lab颜色选择器。垂直滑块允许您在空间中导航。您还可以使用滑块旁边的链接更改x和y轴。通常，Lab颜色空间有一个亮度分量和两个双极色分量a(黄蓝色)和b(绿色洋红色)。虽然亮度范围从0%到100%，但确定a和b的有效范围有点棘手。问题是CIE L ab*包含的颜色比RGB中提供的颜色多。例如，a的“有效”范围取决于亮度和第二颜色通道。另一个问题是很难通过混合四种颜色来选择颜色。为了绕过这些问题，大卫·达尔林普尔(David Dalrymple)建议对实验室空间进行花哨的改造。

诀窍很简单。您可以使用a和b分量来计算颜色角度(色调)和半径(色度)。因为它与HSV中的饱和度不完全相同，所以将其命名为c(色度)。基本上，这给了我们CSL颜色空间(虽然我不确定它在VIS科学中是如何命名的)。更新：多亏了凯尔西·希格汉姆，我现在知道颜色空间实际上被命名为色调-色度-亮度或孟塞尔颜色系统。正如Maureen Stone在评论中正确地注意到的那样，HCL实际上只是CIE L ab*的圆柱变换。L分量与孟塞尔颜色系统也有一些相似之处。虽然颜色不存在的问题仍然存在(特别是如果你增加饱和度的话)，这看起来像是我们可以开始解决的问题。例如，如果我们看一下相同亮度的等距离HCL颜色，我们会得到更好的结果。实际上，如果您再次将其转换为灰度，您会得到所有颜色的精确灰度值。这并不奇怪，我打赌Photoshop本身也使用CIE L ab*进行灰度转换。

这就是有趣的开始，所以我很高兴你能来到这里。为了更多地了解颜色空间中等距颜色的差异，我在颜色选择器中可视化了线性渐变。您可以随意试用它们，检查HCL颜色空间与其他空间(如LAB、HSV、HSL或RGB)的对比情况。此外，直接比较不同颜色空间中的插值颜色也很有趣：

为了简单起见，我将所有内容打包到一个名为chroma.js的小型JavaScript库中。它有一个简单但功能强大的API，请查看Github存储库了解更多信息。由于这仍处于早期测试阶段，如果您记录下可能会遇到的错误，l将不胜感激。

//HCL空间中最简单的插值。interpolate("；#383D41"；，"；#EFEE69"；，0.5，'；hcl'；).hex()；//return"；#5C9A7C"；//还可以直接实例化HCL颜色ychroma.h

是!。现在有两个新的基于网络的工具，可以让你使用Chroma.js创建漂亮的色阶。第一个工具名为“面向数据科学家的颜色”，由Mathieu Jacomy创建，它提供了生成、校正和完成调色板的高级工具。Mathieu还写了很多额外的解释，说明为什么使用Lab*颜色空间自动生成调色板更好。第二个工具更多的是针对那些仅仅想要从HCL颜色空间中快速挑选一些漂亮颜色的人。它基于本文中显示的颜色选择器，但允许您复制颜色的十六进制代码。它还向你展示了颜色的全息预览，这给它带来了一种特殊的Colorbrewer感觉，你还可以将你的调色板加入书签并分享。它是由特里斯滕·布朗创造的。

现在，在功能强大的D3.js可视化库中，还有一个插件可以方便地使用HCL(或CIE LCH，Mike这样称呼它)。您可以在这里看到它的运行情况。为了更清楚地说明如何使用HCL插值器，我创建了这个简单的示例片段(这里是现场演示)：

var data=[0，1，2，3，4，5，6，7，8，9，10]；var color=d3.scale.line().domain([0，10])//最小/最大数据.range(["；#FDFFCB"；，"；#232942"；]).interpolate(d3.cie.interpolateLch)；d3.select("；body"；).selectAll("；div"；).data(Data).enter().append("；div"；).style("；背景"；，函数(D){return color(D)})；

彩虹死了…。彩虹万岁！--第2部分：彩虹拼图«(2012年5月29日)。

我期待这样的事情已经很久了，但直到看了之后才意识到这一点。非常感谢，这是非常有用的，我期待着与我在康斯坦茨的研究小组分享它。我们对色标相当认真，我们有许多您可能会喜欢的工具：

请注意，Photoshop中的某些颜色到灰色转换使用不相等的通道混合，因此值会有所不同。

昨天发表评论后，我记得读过这篇关于体积可视化的调和色彩映射的论文。除了从色彩科学和设计角度来看非常有趣之外，它还展示了如何在HSV中从一种色调插值到另一种色调，以及如何推导出体绘制的等亮度色标(特别参见图3和图8)。再次感谢你那篇很棒的帖子。http://www.cs.sunysb.edu/~mueller/papers/vg08_final.pdf。

这是一个很棒的帖子。我真的很喜欢你解释从一个色调到另一个色调的非独一无二的亮度渐变，以及同一色调的两个步骤内的亮度渐变。该工具具有一定的指导性和实用性。谢谢!。如果您对Matlab感兴趣，我最近在我的博客上发布了一个示例代码，该代码可用于使用CIE L ab*空间中的亮度L*来评估任何现有调色板的感知排序/效果。http://mycarta.wordpress.com/2012/05/12/the-rainbow-is-dead-long-live-the-rainbow-part-1/

我还会很快发布一些我做的实验，以量化(使用强度)ROYGBIV中的7种颜色有多糟糕，以及对于色觉缺陷的人来说它们看起来是什么样子。到周末应该就能修好了。

简介这是关于彩虹和类似调色板的系列文章中的第一篇。我的目标是证明使用这些调色板来显示科学数据并不是一个好主意，然后回答这两个问题：(1)是否有什么我们需要(…)的东西。

特别是插值的颜色比较是一个很棒的例子，我会定期给学生们介绍。

[…]。js中的颜色在我的博客文章“如何避免等距HSV颜色”中，我创建了一个交互式颜色空间浏览器，也称为“颜色选择器”。[…]。

[…]。如何避免等距离的单纯疱疹病毒颜色(David d建议)推特(Function(){var po=Document.createElement('；script'；)；po.type='；text/javascript'；po.async=TRUE；po.src='；https://apis.google.com/js/plusone.js'；；var s=document.getElementsByTagName('；script'；)[0]；s.parentNode.insert tBefront(po，s)；})()；这篇文章由Katie Kuksenok发布在“开发、设备和应用”上。为固定链接添加书签。[…]。

还有一种叫做YIQ的替代颜色空间来处理感知到的发光。我编写了一个小函数，它可以告诉您给定的任意背景颜色，无论是白色文本还是黑色文本都最具可读性。您可以在这里查看：http://blog.nitriq.com/BlackVsWhiteText.aspx。

彩虹死了…。彩虹万岁！-第一部分«(2012年5月12日)。

看到更多有序的色彩空间被应用于可视化，这真的很棒。但是，到处都是一些错误的信息/过于简单化的说法。

为准确起见，CIELAB应精确编码您的显示颜色和设置(校准)。正在使用的CIELAB实施假定使用sRGB校准。这是一个很好的起点，但是像Photoshop这样的工具允许用户更具体地了解他们的显示参数(在颜色设置对话框中)。因此，我将游说对CIELAB实现进行增强。我一定会游说更多关于此实现中的近似值的完整信息。

第二点：HCL不是Munsell，它是一个基于有色样品的颜色订购系统，在这里可以买到(munsell.com)。L与孟塞尔值很匹配，但色调和色度不太相似。HCL只是实验室笛卡尔空间的柱面表示。

我同意，使用基于sRGB的CIELAB是非常接近的。我一直在用它。大多数情况下，只是游说人们写一张大意是这样的纸条，这样人们就会意识到这一点。

扩展定制的实现也会很好。我正在努力学习D3，也许我应该试一试(笑)。

这位老颜色极客的最后一个建议是更改上面的L/A和L/B图，使L位于Y轴上，而A或B从0开始。将创建用于显示的更典型的CIELAB视图。

非常感谢你的这篇帖子。我一直将其作为数据可视化的参考，现在我很高兴看到它扩展到了其他插件中。

谢谢你的邮件。我是在浏览这个网站上一些无关的东西时发现的，但我最近对HSL/HSV感到沮丧，所以我很惊讶地发现了这篇文章，它为我的问题指明了解决方案。

这不是Lab的圆柱变换。它是圆锥形的，圆锥体的尖端固定在彩色固体的黑色尖端。调整“C”可调整圆锥体的展开。

这意味着“C”变量与色度不对应。例如，当“H/L”图中的C设置为1时，只有“底部”的颜色色度为1，中间的颜色色度为0.5，最接近黑色的颜色色度非常低。在“C/L”图中，蓝色超出了图表，因为它正好延伸过锥体的狭窄部分，而黄色则严重发育不良，看起来“暗”黄色和“浅”黄色一样多，而实际上浅黄色要多得多。这就好像所有的深色都被涂到了右边很远的地方。所以现在的函数不是真正的H/C/L，而是类似H/CL/L的函数。

David Dalrymple的公式旨在指定没有间隙的二维工作表，但在此上下文中并不需要，因为您可以控制公式试图保持静态的内容。我看到您在调整后的L中添加了一个“色度”乘数(大概是为了保留公式)，但是如果您在代码的该部分(var r=c；)中用C替换了L，您就会得到一个正确的柱面变换，它可以被正确地称为HCL。

彩虹死了…。彩虹万岁！-第一部分|Lukor.net(2012年7月25日)。

首先，感谢您的评论。我相应地改变了对孟塞尔的评论。

您说得对，Chroma.js使用sRGB，这只是一个近似值。在理想情况下，您应该知道在哪种设备(打印机、显示器等)上显示颜色，以及如何校准这些设备。然而，在随意的、基于网络的可视化世界(我从事的工作)中，你不能假设颜色将在哪里显示。这就是为什么您必须近似(至少除非有用于传输输出设备更详细的属性和配置的Web标准)。

在使用Chroma.js之前，我觉得技术色彩空间(如RGB/HSV/HSL)和感知的、设备校准的色彩空间(如CIE)之间有一条清晰的界限。每个人都知道，在颜色方面做了更多的研究，但几乎没有人在实际项目中使用它。其中一个原因是，CIE背后的理论和公式比从RGB转换为HSV要复杂得多。

话虽如此，您关于过于简单化的看法是完全正确的。但是，毕竟，HCL输出了一些比HSV或HSL更少的错误，并且比ColorBrewer更容易定制的漂亮色标。这就是为什么我发布了Chroma.js，人们喜欢使用/派生它。

[…]。我绝对必须通过编程来做事情，我使用HCL的配色方案。好的方面是它在感知上是一致的。不好的部分是：并不是每个插值都是有效的[…]

关于这个主题的最好的论文在这里：http://magnaview.nl/documents/MagnaView-M_Wijffelaars-Generating_color_palettes_using_intuitive_parameters.pdf(Wijffelaars M，Vliegen R，Van Wijk JJ等人)。2008年)。

同样值得一读的还有：Martin Krzywinski关于元组颜色编码http://mkweb.bcgsc.ca/tupleencode/的文章和关于基于感知的颜色空间的论文。

彩虹死了…。彩虹万岁！-第3部分«我的宪章(2012年10月6日)。

彩虹死了…。彩虹万岁！-第4部分-CIE实验室加热身体«MyCarta(2012年10月14日)。

彩虹死了…。彩虹万岁！-第5部分-CIE实验室线性L*彩虹«MyCarta(2012年12月6日)。

太棒了-非常感谢你把这些放在一起-我历史上读过很多关于颜色的书(因为我描述了水果和蔬菜成熟过程中的颜色转变)，最近我大胆地开始了，在色轮周围均匀间隔地选择7种颜色的集合。简而言之，我们陷入了相当大的泥潭，您的文章已经很好地解释了原因。我需要回去仔细阅读的是解决方案，因为这听起来很接近我使用色调、色度和亮度值的历史老家，所以最终解决方案应该一直就在我的眼皮底下。无论如何，在我的末端，有一些更仔细的阅读和反思要做。在你那边，谢谢你！为了把这些指针/解决方案放在一起，干杯，N。

彩虹死了…。彩虹万岁！-第三部分|MyCarta(2013年1月03日)。

[…]。创建感性的人工制品，使你试图展示的趋势变得模糊不清。感知色彩图是更好的选择。而ColorBrewer色彩图是最知名的。-Python的[…]

精彩的帖子，谢谢你把这些放在一起！玩你的拾色器我只是在想：在C/L模式下，画布左边缘的颜色不应该是中性灰色吗？因为色度是0？

我尝试使用选取器创建自定义发散调色板，中间颜色为中性灰色。对这项任务有什么建议吗？

马丁：左边的颜色是中性灰色。由于Lab的白点/标准光源，它们具有温暖的色调。您将看到它们在您调整色调时不会改变色调。

要创建分叉调色板，请将选择器的一端放在“CL”的左侧，其余的水平放置。这会产生一束从轴线射出的光束。记录颜色。现在通过添加180到色调来旋转形状，并记录调色板的另一面。另请参阅我下面的评论，以获得关于这一点的注释。