如何计算给定背景和叠加背景的透明叠加层的颜色和不透明度？

Question

我正在尝试对流行游戏中使用的颜色进行逆向工程。

请参阅此低质量屏幕截图作为示例：

左侧是“覆盖面”，具有背景颜色和覆盖层，右侧只是背景。

我的平台在技术上是简单的 HTML 和 CSS，我使用 Firefox，但我希望我能使用的任何技术都能转移到大多数平台。

我在互联网上查找，发现了“颜色混合模式”和“颜色混合模式”，但除了可用的选项之外，我无法找到有关每种模式背后的数学信息。

此外，我简单的测试看看这是否是一个简单的加法问题也不起作用：

Given RGBA values X, Y and Z, mix(X, Y) = Z.

X = rgba(32, 34, 35, 1.0)
Y = rgba(124, 123, 123, 0.65)
Z = rgba(93, 92, 93, 1.0)

Test: (X.r)(X.a) + (Y.r)(Y.a) = Z.r
      32 * 1 + 124 * 0.65 = 156.65

We can also rule out that it isn't multiplication, division or any sort of basic operation here.
There's either a non-simple formula or a coefficient being used here that I'm not aware of.
      

然后我查看了维基百科关于混合模式的内容，并找到了一篇关于Alpha 合成的文章。它看起来几乎描述了我想要的东西，并且为我提供了方程式。我开发了一个小 python 脚本来看看它是否能工作，但它没有。

Given RGBA values X, Y and Z, mix(X, Y) = Z.

X = rgba(32, 34, 35, 1.0)
Y = rgba(124, 123, 123, 0.65)
Z = rgba(93, 92, 93, 1.0)

Test: (X.r)(X.a) + (Y.r)(Y.a) = Z.r
      32 * 1 + 124 * 0.65 = 156.65

We can also rule out that it isn't multiplication, division or any sort of basic operation here.
There's either a non-simple formula or a coefficient being used here that I'm not aware of.
      

给定这两种颜色，我如何确定可以使用什么合适的叠加来达到相同的“叠加”颜色？我假设会有一个非常大的数字（但不是无限的，只要我们使用整数和整数百分比）。

Answer 1

简短回答

\n

CSS 规范中列出了执行 alpha 混合的数学原理。

\n

更长的答案

\n

第一的：

\n

\n

*Given RGBA values X, Y and Z, mix(X, Y) = Z*

\n

\n

XYZ 是一个颜色空间，理想情况下您不会使用名为 X、Y 或 Z 的变量，除非您实际使用 XYZ 颜色空间，因为会造成混乱......

\n

然后是这个：

\n

Test: (X.r)(X.a) + (Y.r)(Y.a) = Z.r\n      32 * 1 + 124 * 0.65 = 156.65 // ????\n

\n

曾经如此接近。我将重写它以删除 XYZ。另外，您写的答案不是 156.65，而是 112.6 记住 PEMDAS，在加法之前先乘法。124 * 0.65 = 80.6 但还有更多......

\n

let red = cBG.r * cBG.a + cOver.r * cOver.a;\n\n        32 * 1 + 124 * 0.65 = 112.6\n

\n

这里的错误在于，即使底层颜色的 alpha 值为 1，它也没有贡献全部的量。

\n

基础颜色的cBG 差异为 1 减去 的 alpha cOver。由于cOver.a是 0.65，cBG.a所以 是 0.35。换句话说，如果最大 alpha 为 1（确实如此），那么如果颜色cOver贡献 0.77，颜色cBG只能贡献 0.33 \xe2\x80\x94，则在进行简单遍历时，alpha 总和必须等于 1（或更少）。

\n

当第一种颜色是 alpha 1 的实心时，正确的数学是：

\n

let red = cBG.r * (1 - cOver.a) + cOver.r * cOver.a;\n\n      32 * 0.35 + 124 * 0.65 = 91.8\n

\n

如果两种颜色的 alpha 都小于 1，则数学会稍微复杂一点\xe2\x80\x94最简单的是始终从 alpha 为 1 的颜色开始，然后向上构建。

\n