实现不同透明胶片的“相同”颜色答案

【问题标题】：Achieving "same" colour of different transparencies实现不同透明胶片的“相同”颜色
【发布时间】：2026-02-13 00:40:02
【问题描述】：

考虑两个或更多看起来“相同”颜色但透明度不同的盒子：

在此示例中，左侧 div 为 rgba(200,200,200,0.8)，右侧为 rgba(150,150,150,0.4)。第二行后面有一个红色条，表示它们的透明度不同。
我知道左右 div 不看起来一样（左侧 div 看起来稍微更暗）。我的问题是我怎样才能做到这一点：

给定一种颜色(r1, g1, b1, a1)，我怎样才能算出另一种“颜色”(r2, g2, b2, a2)，使a1 != a2 和两种颜色看起来“相同”。

这是我用来生成上图的小提琴：jsfiddle

目前，我只是选择了一些r2、g2 和b2，然后摆弄a2，直到这两种颜色看起来足够相似。但是颜色和它们的透明度之间应该存在关系，我们可以使用它来精确地计算出任何给定的颜色。

【问题讨论】：

标签： css colors

【解决方案1】：

我希望它会是您想要的。

编辑： 以下是上面链接中给出的公式的应用示例，基于您在帖子中描述的案例，因此您可以更好地了解如何使用它。

这是链接中给出的公式。我只是更改了变量的名称以使其更明确（“覆盖”变为“初始值”，“目标”变为“最终值”）：

finalValue = opacity x initialValue + (1 - opacity) x background

由此，我可以推导出以下公式：

opacity = (background - finalValue) / (background - initialValue)

所以，回到您的示例案例，应用于左侧 div 的第一个公式给出的 finalValue 为：

finalValue = 0.8 x 200 + 0.2 x 255 = 211

因此，正确 div 的目标是从初始值 150 计算匹配此最终值所需的不透明度：

opacity = (255 - 211) / (255 - 150) = 0.419

如果你在右边的 div 上尝试rgba(150, 150, 150, 0.419)，你会看到最终的颜色是一样的。

【讨论】：

太好了，当您更新答案时，我正在浏览网站。这是您计算出来的 0.419 不透明度：jsfiddle :) 这里的术语差异和网站有点令人困惑。
假设要对任何颜色进行推广，我可以按分量应用相同的公式，但我发现这次修复不透明度并推导出新的 rgb 最容易：different opacities of the same blue。我遇到的一个问题是我一开始尝试将不透明度固定为 0.4，但新的红色分量结果为负数。
所以你首先修复左右不透明度，然后例如左 rgb，最后计算右 rgb？
是的。我将不得不坐下来重命名 var 并重新排列公式，以便按照我想要的方式得到它。我认为，我们也应该能够说出可能的不透明度范围。
您可以简单地创建一个电子表格，根据您想要的给定最终输出颜色计算与圆形不透明度（0.1、0.2、0.3 等）相对应的一组 rgb 颜色。