rgba混色css

Question

试图使一个函数获得两个RGBa值，并得到第三个值。第一个值为opacity: 1 (例如：color: rbga((0,0,0,1);)，第二个值为任意不透明度(由用户设置)。然后目标是混合这两种颜色，就好像你有A颜色，然后有人拿了一个油漆工具，用半透明的颜色B对它进行了检查。

这是我想要创造的效果。

not code, just some values: 

(0,0,0,1) & (255,255,255,0.5)  = (128,128,128,1)

(255,0,0,1) & (255,255,255,0.5) = (225,128,128,1)

(0,255,255,1) & (255,255,255,0.5) = (128,255,128,1)

(0,0,255,1) & (255,255,255,0.5) = (128,128,255,1)

(81,188,187,1) & (252,0,255,0.5) = (167,94,221,1)

(81,188,187,1) & (102,192,110,0.5) = (92,190,148,1)

(81,188,187,1) & (255,228,0,0.5) = (168,208,93,1)

这是视觉上的：(想起来与上面的数据不完全一样)

​

​

这里有价值：

​

​

我最终将使用javascript来创建函数，但我真正需要弄清楚的是颜色1和颜色2之间的关系，我可以将它们放入代码中。我只是数学不够好，弄不清楚这个问题。所以，我来了

提前感谢！

Answer 1

这是简单的合成:)

C = Ca*Aa*(1-Ab) + Cb*Ab

其中Ca依次为A的组成(红色、绿色或蓝色)，Cb为B的组分，Aa和Ab分别为A和B的α值(本例中Aa为1)。

所以对于(81,188,87,1)和(239,133,11,0.75)，你可以得到

81*1*(1-0.75) + 239*0.75 = 199.5
188*1*(1-0.75) + 133*0.75 = 146.75
87*1*(1-0.75) + 11*0.75 = 30

结果(199 146 30 1)

(Alpha是用A= Aa*(1-Ab) + Ab计算的，但如果任一alpha值为1时，则总是1 )