用不透明度找到“等价”的颜色
假设我有一个背景色，其上有一个“色带”以另一种纯色运行。 现在，我希望色带部分透明，让一些细节融合在一起，但仍然保持色带在背景上“相同的颜色”。
是否有一种方法可以很容易地确定，对于给定的不透明度/ alpha <100％的色带颜色，它应该与背景中的100％不透明度相同的RGB值是什么？
这是一张照片。 背景是rgb(72, 28, 97) ，丝带rgb(45, 34, 70) 。 我想要一个rgba(r, g, b, a)作为色带，使其看起来与此纯色相同。
颜色混合只是每个通道的线性插值，对吗？ 所以数学很简单。 如果您在RGB2上使用RGBA1，则有效的视觉效果RGB3将为：
r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1
... alpha通道从0.0到1.0。
合理性检查：如果alpha为0，RGB3是否与RGB2相同？ 是。 如果alpha是1，RGB3是否与RGB1相同？ 是。
如果仅锁定背景颜色和最终颜色，则会有大量的RGBA颜色（无限，在浮点空间中）可以满足要求。 所以你必须选择你想要的条形的颜色或不透明度，并找出其他的价值。
基于Alpha的颜色选择
如果你知道RGB3（最终所需的颜色），RGB2（背景颜色）和A1（你想要多少不透明度），并且你只是在寻找RGB1，那么我们可以重新排列这些方程：
r1 = (r3 - r2 + r2*a1)/a1
g1 = (g3 - g2 + g2*a1)/a1
b1 = (b3 - b2 + b2*a1)/a1
有一些理论上可能的颜色组合，但在标准RGBA范围内是不可能的。 例如，如果背景为纯黑色，所需的感知颜色为纯白色，并且所需的alpha值为1％，则需要：
r1 = g1 = b1 = 255/0.01 = 25500
...超过任何可用的超亮白色100倍。
基于颜色选择Alpha
如果您知道RGB3（最终所需颜色），RGB2（背景颜色）和RGB1（您想要改变不透明度的颜色），并且您只是在寻找A1，那么我们可以重新排列方程式如下：
a1 = (r3-r2) / (r1-r2)
a1 = (g3-g2) / (g1-g2)
a1 = (b3-b2) / (b1-b2)
如果这些给出不同的值，那么你不能完全匹配，但你可以平均alphas尽可能接近。 例如，世界上没有任何不透明的东西可以让你把绿色变成红色变成蓝色。
我用Phrogz的答案做了一个很少的mixin。 你输入：
代码如下：
.bg_alpha_calc (@desired_colour, @desired_alpha, @background_colour: white) {
@r3: red(@desired_colour);
@g3: green(@desired_colour);
@b3: blue(@desired_colour);
@r2: red(@background_colour);
@g2: green(@background_colour);
@b2: blue(@background_colour);
// r1 = (r3 - r2 + r2 * a1) / a1
@r1: ( @r3 - @r2 + (@r2 * @desired_alpha) ) / @desired_alpha;
@g1: ( @g3 - @g2 + (@g2 * @desired_alpha) ) / @desired_alpha;
@b1: ( @b3 - @b2 + (@b2 * @desired_alpha) ) / @desired_alpha;
background-color: @desired_colour;
background-color: rgba(@r1, @g1, @b1, @desired_alpha);
}
用法如下：
@mycolour: #abc;
@another_colour: blue;
.box_overlay {
// example:
.bg_alpha_calc (@mycolour, 0.97, @another_colour);
// or (for white bg) just:
.bg_alpha_calc (@mycolour, 0.97);
}
显然不适用于不可能的组合（如Phrogz所提到的），这意味着只支持轻微的透明度。 看看你如何去用它。
来自@Phrogz'回答：
r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1
所以：
r3 - r2 = (r1-r2)*a1
g3 - g2 = (g1-g2)*a1
b3 - b2 = (b1-b2)*a1
所以：
r1 = (r3 - r2) / a1 + r2
g1 = (g3 - g2) / a1 + g2
b1 = (b3 - b2) / a1 + b2
请注意，您可以选择a1任何值，并且会找到所需的r1 ， g1和b1的相应值。 例如，选择一个1的alpha会告诉你需要RGB1 = RGB3，但是选择一个0的alpha并不能解决（显然）。