javascript - 减去颜色

Question

我将尝试用一个例子来解释我的问题:

1. 假设我们有一个红色阴影的背景(很容易找到 - 颜色选择器)
2. 前面有一个半透明的元素。它是蓝色的，但看起来是紫色的。
3. 再次得到的紫色阴影很容易找到，但是有没有办法找到/计算半透明的蓝色阴影？

给定:rgb(100,0,0) + x = rgb(100,0,100)

求 x = rgba(0,0,100,0.5)

---

我的实际情况:

背景:rgb(147,150,72)，元素rgb(44,100,62)

---

这个问题在白色背景的唯一情况下部分解决了，我实际上正在寻找更通用的解决方案。我曾尝试调整 javascript 代码，但我并不真正了解它是如何完成的，或者是否有可能采用通用解决方案。如果有人了解它的工作原理并告诉我，我也许可以自己编写代码。 (如果解决了我当然会在这里发布解决方案)

链接:

• Subtraction of colours - Need to get the transparent value of a colour
• Convert RGB to RGBA over white

Answer 1

一般的精确解不存在。

正如您链接到的答案中所述

C = X * a + Y * (a-1)

是从颜色 X 和 Y 中计算颜色 channel C 的公式，而 a是 X 的 alpha 值。

因此，当您尝试找出颜色 + alpha channel 时，您必须求解此等式 3 次(每种颜色一次)。这些方程中的每一个都有 2 个未知数。

因此，无需附加条件(例如第二个链接中提到的条件)即可应用，有无数种不同的解决方案(或者在每个颜色 channel 一个字节的特定情况下，最多 256 个)。

虽然确定一个精确的解决方案是不可能的，但您当然可以通过以下方式确定一个或多个可能的解决方案:

X = C/a - Y + Y/a // Formula from above solved for X

所以可能的解决方案是

r3 = r2/a - r1 + r1/a    
g3 = g2/a - g1 + g1/a
b3 = b2/a - b1 + b1/a

与

• rgb(r1, g1, b1) 为背景色，
• rgb(r2, g2, b2) 是混合色
• 和 rgba(r3, g3, b3, a) 是绘制在背景上的颜色。

如果您现在选择 a，则 r3、g3 和 b3 均不低于 0 或高于 255，您将获得有效的解决方案。