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

平面设计 网站设计 颜色 颜色理论 颜色配置文件 颜色转换
2022-01-04 13:07:22

颜色感知的背景:

由于人眼的性质和大脑的视觉处理,存在一种视错觉,即相同的颜色会因背景而异

它被称为对比效果,如下图所示——中心矩形是相同的:

在此处输入图像描述资料来源:维基媒体

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

在此处输入图像描述

在此处输入图像描述资料来源:NASA 颜色使用研究实验室

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


网页设计呢?

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

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


让我们看一个这个问题的例子:

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

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


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


正如预期的那样,看起来完全不一样。在此处查看和下载 .PSD 文件。

我们怎样才能使它在所有三个上看起来都一样?显然,白色背景上的文字需要是深黄色,而灰色背景上的文字需要调整色调/色调。(周围的文字也会影响它——但这可能更难解释。)

这种完美的颜色是否可以根据 Hex、RGB 或其他系统以某种方式计算出来?这就是这个问题的症结所在,因为它比手动逼近要高效得多。

2个回答

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

假设您可以通过假设背景和前景之间的线性相关性来补偿这种影响,这样当背景变暗时,前景文本也会变亮相同的量。我假设色调保持不变。总会有一个背景和前景共享相同颜色的中点。

例如,考虑白底黑字。相同色调的相反亮度是黑底白字,但如果你试图为相同色调的每个中间背景找到前景,在中间点你会碰到灰底白字,根本看不到任何东西。

出于同样的原因,我看不出任何相当简单的映射——甚至是有损映射——都可以存在。

怎么样:在不同的背景下使用不同的灰色,涂成白色和黑色,使前者看起来相同,但当它们与中性色相对时则不然。

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

在此处输入图像描述

因为这张图片描绘了这些补丁在中性灰色之上的样子:

在此处输入图像描述

我使用了名为 Grain Extract/Merge 的 GIMP 图层混合模式,它允许我通过从中性色块中提取一个中性色块来找到最浅的灰色,然后通过将两者合并在一起来找到最暗的灰色。换句话说:我发现了两个灰色,它们的加法平均是中性的。

对于黑色或白色背景的颜色,您可以使用 Grain Merge 查找加法平均颜色,并使用 Grain Extract 查找后者的互补色。

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

在此处输入图像描述