如何使颜色在不同背景上看起来相同?


17

颜色感知的背景:

由于人眼的本质和大脑的视觉处理,存在一种视觉上的幻觉,即相同的颜色根据背景而看起来会有所不同

这就是所谓的对比效果,如下图所示-中心矩形是相同的:

在此处输入图片说明资料来源:Wikimedia

NASA的插图(和报告)使背景颜色的影响更加明显:

在此处输入图片说明

在此处输入图片说明资料来源:NASA颜色使用研究实验室

(请注意,第二张图像中最上面的两种颜色看起来是一样的,但实际上是完全不同的。)


网页设计呢?

我的问题与网页设计有关,特别是在这种情况下,链接文字在不同背景上的颜色。

对于给定的文本颜色,如何找到互补色以使其在特定背景上看起来相同?


让我们看一个有关此问题的示例:

考虑下面的示例,#FFF000在以下背景上带有黄色文本:

  • 白色#FFFFFF
  • 黑色#000000
  • 和灰色#555555


比较网页设计文本在不同背景上的颜色


不出所料,看起来根本不一样。(在此处查看和下载.PSD文件。

我们如何才能使这三个外观都相同?显然,白色背景上的文本需要为较深的黄色,而灰色背景上的文本需要进行色相/色调调整。(周围的文字也会影响它-但这可能很难解释。)

可以基于十六进制,RGB或其他系统以某种方式计算出这种完美的颜色吗?这就是问题的症结所在,因为它比手动逼近要有效得多。


您需要使用黄色。请注意,在您的示例中,他们使用的颜色与他们试图使外观不同的颜色相似。
汉娜(Hanna)2013年

2
@约翰内斯,你是什么意思?
堡盟

在第一个示例中,所使用的颜色都是灰色阴影。在第二个示例中,通过使用非常明亮的紫色,使紫色看起来更蓝。然后在您的黄色示例中,您将白色,灰色和黑色对接成黄色。因此,我要说的是,您需要使用黄色代替,以使黄色在不同背景下看起来相同。
汉娜(Hanna)2013年


Answers:


10

似乎您正在寻找互补色的类似物,但要在明亮的空间而不是色相中。据我所知,没有这样的一般映射。

假设您可以通过假设背景与前景之间存在线性相关性来补偿这种影响,以使背景变暗时前景文本的亮度降低相同量。我认为色调保持不变。总是会有一个中点,背景和前景共享相同的颜色。

例如,考虑黑底白字。相同色相的相反亮度是黑底白字,但是如果您尝试为相同色相的每个中间背景寻找前景,则在中点时您会遇到灰色对灰色,根本看不到任何东西。

出于几乎相同的原因,我看不到存在任何相当简单的映射,甚至是有损映射。


1
为了解决这个问题,我认为我们需要建立(平均)人眼模型,并使用遗传算法找到最合适的模型
Baumr,2015年

1
@鲍姆:可能是一个很好的博士论文:)
与莫妮卡(Monica)进行的种族竞赛

0

怎么样:在不同背景下使用不同的灰色,涂成白色和黑色,这样前者看起来是一样的,但是当它们与中性色相抵触时就不一样了。

让我知道这两组补丁在黑白行的顶部看起来是否相同:

在此处输入图片说明

由于此图片描绘了这些补丁在中性灰色之上的外观,因此:

在此处输入图片说明

我使用了GIMP的图层混合模式(称为“谷物提取/合并”),该模式允许我通过从另一块中提取中性色块来找到最浅的灰色,然后将它们中的两个合并在一起来找到最暗的灰色。换句话说:我发现了两个灰度的加法平均为中性。

对于黑色或白色背景的颜色,可以使用“颗粒合并”来查找加法平均的颜色,而使用“谷物提取”可以补充后者的互补色。

编辑:检查出来。您可能会发现这些黄色看起来一样。

在此处输入图片说明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.