如何确定白色背景下给定的部分透明 RGB 颜色的等效不透明 RGB 颜色

平面设计 颜色 透明度 色彩再现
2021-12-28 09:37:36

我发现降低白色背景的不透明度是找到可用的较浅且饱和度较低的基色色调的好方法。

以这张橙色的图片为例:

橘子

下排显示变体。百分比是不透明度。

当我搜索好的色调时,拥有白色背景并降低不透明度很好,但我喜欢在最终产品中使用等效的 100% 不透明 RGB 颜色。

当已经选择了基色和不透明度的 RGB 数字时,如何计算或以其他方式找到等效的 RGB 数字?

我已经尝试过颜色选择器,但在 Illustrator 中它至少只给出了基色。

4个回答

使用公式 Y=255 - P*(255-X) 其中 X 是一个 RGB 数字,P=不透明度 (0...1),Y=新的 RGB 数字,它应该给出与 X 给出的 100% 不透明度相同的外观白色背景下 100p% 的不透明度。

该公式是一般不透明度公式,仅针对这种特殊情况进行了简化 - 部分透明的顶层与纯白色相对。

注意:白色背景应该是白色物体,而不是画板白色。白色背景对象是颜色管理的。

如果您在 Illustrator 中并想使用颜色选择器复制颜色,请复制部分透明的对象并将其栅格化。在光栅化对话框中选择白色背景。现在颜色选择器给出颜色,不需要计算。

我为此编写了一个工具:https ://github.com/igrmk/blec 。对于您的具体情况,您可以这样使用它

blec white deadbeef

最后ef是 Alpha 通道的十六进制表示。或者你可以像这样使用它

blec white deadbe:0.75

将不透明度指定为小数部分。

请注意,由于伽马校正,建议的公式Y = 255 - P * (255 - X)不太准确。更准确的说法是Y = (255^G * (1 - P) + X^G * P) ^ (1 / G)——Y生成的 RGB 分量值X——覆盖 RGB 分量值P——它的不透明度G——一个伽玛值。最常见的伽马值是 2.2。在公式中包含伽马校正的原因是在计算时将组件移动到线性空间中。当今使用的几乎每个 RGB 空间都以非线性方式解释颜色分量,以便将更多颜色信息放在 8 位中。从历史上看,它是为了补偿 CRT 显示器的非线性而引入的。

这是一个为什么伽马校正对于混合很重要的示例。让我们来看看这张红色的图片

红色的

和这个蓝色的图像

蓝色

让我们将第一个完全不透明的图像设置为第二个图像的不透明度等于 x 轴,如下所示

蓝底白字

现在让我们在没有伽马校正的情况下混合它们(伽马 = 1)

伽玛=1

让我们启用伽玛校正并执行相同的操作(伽玛 = 2.2)

伽玛=2.2

如您所见,如果我们不使用伽马校正,则会有更多的局部过渡。中央明显有较深的颜色。如果我们使用伽马校正,那么过渡和亮度会变得更加平滑。

最后一个渐变是使用抖动构建的。

抖动

该图像仅包含两种颜色的像素,但蓝色的概率从左侧的 0 线性增加到右侧的 1。就亮度和过渡颜色而言,结果看起来更接近 gamma = 2.2 的图像。试着从远处看。这就是你可能期望混合两种颜色的结果。在这个例子中,我们通过像水彩画一样混合来真正地混合它们。所以伽玛对于混合非常重要,尤其是当不透明度接近 0.5 时。

最后让我们比较不透明的红色和蓝色与 0.5 的 alpha 的混合,其中 gamma 校正的效果最大。

伽玛=1 伽玛=2.2 抖动

第一张图像不使用伽马校正,第二张使用 2.2 的伽马,第三张使用抖动。如您所见,第一个与其他两个非常不同(如果您没有看到,请阅读下面的注释)。所以我建议总是使用伽玛校正。如果您使用任何像样的图像编辑器,那么您很可能是安全的,并且默认情况下启用了伽马校正。

注意 1: 要将抖动与混合进行比较,您需要以 100% 的比例查看图像,以便图像的每个像素恰好占据屏幕的一个像素。如果您使用手机或视网膜显示器,几乎不会出现这种情况。如果您查看不同比例的图像,您可能会查看抗锯齿图像。抗锯齿可能会导致非常不准确的结果,因为它目前不使用伽马校正。我可以为 Android 10 上的 Chrome 83 和 iOS 13 上的最新 Safari 确认它。我想它需要太多资源才能正确地做到这一点。因此,当您查看对比度非常高的噪声图像时,它可以有效地将显示器的伽马值降低到 1.8 左右。

注 2: 并非每个显示器都经过良好校准。如果您觉得 gamma 为 2.2 的图像和抖动的图像会产生不同的颜色,我有一个坏消息要告诉您。您可以在此处查看监视器的伽玛值http://web.mit.edu/jmorzins/www/gamma/adilger/gamma.html但是,如果您使用移动设备,最好使用应用程序,因为抗锯齿会导致非常不准确的结果。

这是获取这些图片的代码https://pastebin.com/fHYtWrMb

无需进行所有这些技术计算。您可以改为使用色板面板。您将原始颜色保存为带有全局选项的样本。

在此处输入图像描述

然后,您可以使用颜色面板并选择所需的百分比。这不使用透明度,它是不透明的。

在此处输入图像描述

当您需要查看最终色调的 RGB 或 Hex 代码时,您可以按下颜色面板上的 rgb 图标,您可以看到 RGB 和 Hex 值。

在此处输入图像描述

我发现这个线程正在寻找相反的过程。我得到了最终颜色和初始颜色(在 png 文件中展平),我颠倒了上面的等式,以找出如何找到产生较浅阴影的不透明度。只是想分享。

P = ( -Y + 255 ) / ( 255 - X )

在哪里:

P = [P] 不透明度百分比

Y = 浅色的 RGB

X = 深色调的 RGB