你如何避免渐变中突出的颜色带?

平面设计 颜色 坡度 颜色理论 颜色空间
2022-01-22 02:01:19

所以这是比平面设计更科学的可视化,但我认为理论是一样的。在用于可视化数据的颜色图中,通常会有一些不应该突出的颜色带。我相信他们是马赫乐队的一种形式?

例如,我使用了这个双极颜色图,它会生成如下图像:

在此处输入图像描述

它几乎就像一圈约 0.2 的霓虹橙环,以及约 -0.2 的蓝色圈。这是 RGB 分量的图,以及黑色相对亮度的计算:

在此处输入图像描述

我手动调整它以试图摆脱乐队,并取得了一定的成功,但我并不真正理解它背后的理论:

在此处输入图像描述

在此处输入图像描述

它更好,但我仍然在其中看到乐队。

再举一个例子,对于热色图,我想也许我必须线性化亮度图以防止条带化,但它并没有真正起作用:

在此处输入图像描述 在此处输入图像描述

黄色和橙色的条带仍然存在,只是被移动了一点点。因此,亮度图中的不连续性不是问题的原因。

如何在没有条纹的情况下平滑过渡颜色?是否有通过Lab 色彩空间或其他东西制作平滑曲线的规则?编辑:哦,我找到了一个例子:“色阶是使用 L a b* 颜色空间计算的。它沿着 L* 方向遵循一个均匀的斜坡,它遵循 a*-b 中的半圆形路径* 飞机。”)

更新:这是 RGB 立方体中此颜色图的图,显示了 user568458 正在谈论的锐角:

在此处输入图像描述

2个回答

不要忘记,即使您使用的是 LAB 颜色值,也必须输出 RGB 值才能在屏幕上显示。在某些时候,它必须告诉屏幕的红色、绿色和蓝色像素该做什么。

从 RGB 的角度来看,这些条带的原因其实很简单。

拿起一个颜色选择器并查看渐变,您会注意到这些条带位于渐变性质发生变化的点周围:

  • 在红色中,它从平滑增加 RGB 中的 R 变为添加 G 变为黄色 - 大约 #FF0000 到 #FF2500
  • 在蓝色中,它从平滑增加 RGB 中的 B 到添加 G 变为青色 - 大约 #0000FF 到 #0025FF

与底部的情节类似,将黄色添加到白色:它们本质上是三个渐变连接在一起。以红色渐变为例:

  • 它是 #000000 到 #FF0000(在 HSB 术语中增加亮度,在 RGB 中增加红色通道)
  • 然后 #FF0000 到 #FFFF00 (在 HSB 术语中更改色调,在 RGB 中增加绿色通道)
  • 然后 #FFFF00 到 #FFFFFF (改变HSB 术语中的饱和度,增加 RGB 中的蓝色通道)

在此处输入图像描述

所以总会有一个可见的连接,如果它是这样设置的。作为一般规则,在精度和线性是主要目标的情况下,最好保持梯度简单,不断改变一个特征(除非你想要条带,例如在某些类型的脑部扫描中)。


也就是说,如果您决心通过更广泛的光谱(它看起来不错),我会考虑在第一个通道完成之前开始添加第二个通道,在渐变之间形成一个桥接部分,或者有一个与添加第二个通道的速率略有相反的 S 形曲线(可能两者兼而有之)。

所以而不是:

  • 000000 到 #FF0000,100% 黑色到 100% 红色

  • FF0000 到 #FFFF00,100% 红色到 100% 黄色

  • FFFF00 到 #FFFFFF,100% 黄色到 100% 白色

...它可能是(只是猜测我的头顶,需要调整):

  • 000000 到 #E90000,100% 黑色到鲜红色

  • E90000 至#FF2500,(SHORT BRIDGE)鲜红色(暗)至鲜红色(略带橙色)

  • FF2500 至#FFE900,亮红色(略带橙色)至亮黄色(略带橙色)

  • FFE900 至#FFFF25,(SHORT BRIDGE)亮黄色(略带橙色)至亮黄色(浅色)

  • FFFF25 到 #FFFFFF,亮黄色(浅色)到 100% 白色

...然后根据口味调整每个部分的曲线:-)


编辑:这是“偷工减料”建议的演示。它并不完美 - 它相当粗略,只是我在几分钟内使用 Illustrator 混合工具(未混合的对象在底部显示色点)用眼睛拼凑的东西。每个色点之间渐变的每一段都是 100% 线性的,而您可能想要更圆润的东西 - 因此,如果您仔细观察,您可以发现色带。

显示器之间的结果自然会有所不同:在我的“好”显示器上,它很流畅;在我用来检查网络图像弹性的“坏”监视器上(原始条带显示不很清楚),橙色总是显得柔和,使得红色和黄色区域看起来比连接的橙色更亮,过度强调红色和黄色区域 - 但您仍然可以看到原始波段的“边缘”已基本消失。

无论哪种方式,与原始渐变相比,您都可以清楚地看到差异。(至于这背后的数学 - 不知道,我不是数学家,但希望这有助于确定问题和解决方案)

在此处输入图像描述

另一个优点是,您可以自由地使用更清晰的黑色 > 一个通道过渡。


或者 RGB 颜色立方体上的相同想法(请原谅粗略,它的目的是说明性不准确......):

在此处输入图像描述

这可能更清楚地显示了我所说的示例渐变可以通过使从主段到切角段的过渡平滑而不是有角度来改进的意思。

也许这可以帮助你,它对我有用,但我不知道手动方式来完成它。

http://nomorebanding.com/