实现不同透明度的“相同”颜色

Question

考虑两个或多个看起来是“相同”颜色但具有不同透明度的框：

在此示例中，左侧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摆弄，直到两种颜色看起来相似。但是颜色和它们的透明度之间应该有一种关系，我们可以用它来精确地解决这个问题和任何给定的颜色。

Answer 1

请看一下这个链接：https://viget.com/inspire/equating-color-and-transparency。

我希望它会成为你正在寻找的东西。

修改 以下是根据您在帖子中描述的案例应用上述链接中给出的公式的示例，以便您更好地了解如何使用它。

这是链接中给出的公式。我只是改变了变量的名称，使它们更加明确（＆＃34; overlay＆＃34;成为＆＃34; initialValue＆＃34;，＆＃34; target＆＃34;成为＆＃34; finalValue＆＃34;） ：

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)，您会看到最终颜色相同。