【颜色的奥秘】透明色叠加计算

守一明法

在附件中，有4个矩形填充了简单的颜色，设置了不同的透明度，当它们放在白背景致上时，呈现出险些相同的视觉结果。固然，这不是靠肉眼微调出来的，接下来分析一下透明通道的颜色叠加计算。




第一节：一个透明色与背景致叠加
各种测试后归纳出公式：结果色=原色*(1-透明度)+背景致*透明度
其中透明度为0%-100%范围，数值越高越透明



公式很简单，但实际上我是先研究的两个透明颜色叠加，根据叠放顺序，呈现的结果不同，所以其实花了不少时间，单透明色叠加底色还是比较简单的，但为了方便理解透明多色叠加时的情形，所以对公式做以下分析：
把透明色换成打满小孔的不透明板好像更容易理解一些，比较透明度为30%时，可以理解为板上布满匀称小孔，小孔的总面积为30%，那么有颜色的面积就是70%，眼睛看到这个板的时候，板的反射光线直接射入眼睛，
这时眼睛得到的是70%的颜色信息；再来看背景致，它的光线只能透过小孔才气射入眼睛，所以只能通过30%面积的小孔，这时眼睛得到的是30%的背景致信息。把这两个颜色信息相加，就是眼睛得到的完整信息。


开头提到的附件里只有R通道有颜色，我们再用其他颜色验证一下，比如有一个颜色RGB=(40,58,190)
当背景致为纯白，透明度为30%时，用公式计算一下叠加后的颜色:

R=40        R'=40*(1-0.3)+255*0.3= 104.5  四舍五入取整105
G=58        G'=58*(1-0.3)+255*0.3= 117.1  四舍五入取整117
B=190        B'=190*(1-0.3)+255*0.3=209.5 四舍五入取整210

可以自己画两个图形分别设置一下颜色和透明度做对比

四个图片.zip

金广

第二节：两个透明色与背景色叠加
根据上面打孔板的理解方式，我们可以很简单的得出叠加计算公式
上层原色*(1-上层透明度)+下层原色*上层透明度*(1-下层透明度)+背景色*总透明度
其中总透明度=上层透明度*下层透明度

随意设置两个颜色及透明度：上层(40,58,190)，透明度30%；下层(192,79,21)，透明度45%
当背景色为纯白时，用公式计算叠加后的颜色


上层                下层                                                
R=40        R=192        R'=40*(1-0.3)+192*0.3*(1-0.45)+255*0.3*0.45=94.105 四舍五入取整94
G=58        G=79        G'=58*(1-0.3)+79*0.3*(1-0.45)+255*0.3*0.45=88.06     四舍五入取整88
B=190        B=21        B'=190*(1-0.3)+21*0.3*(1-0.45)+255*0.3*0.45=170.89 四舍五入取整171

可以再次绘图测试，也可以调整上下层顺序后再次计算验证

两粒尘

第三节 通过透明色与背景色叠加来呈现目标颜色（反推）
刚才的叠加计算，如果理解了原理（打孔板示例）的话，可以扩展到多张层叠的计算，不赘述。
按下来尝试，给定一个目标颜色，用其他颜色配合相应的透明度与背题色层叠来呈现接近目标色的效果（说接近是因为小数取整不可避免会有精度损失）

沈家辉

比如我有一个目标色RGB(192,79,21)，想用其他颜色通过透明度+白底来达成相同效果。
首先我把它最小值的颜色减少至0，其他颜色减少相同数值：RGB'(171,58,0)，然后通过白底来提供21的亮度，21/255=0.08235，所以我们设置透明度为8%（后面的小数无效），但实际使用RGB'(171,58,0)以及透明度8%测试可以发现并不符合预期。
再考虑一下，透明度不仅影响白背景的透光量，同样影响原来的颜色浓度，所以需要把原来的颜色值加大，计算公式为原色*(1+透明度)，最终结果为RGB'(185,63,0)，透明度8%
可以手绘并验证结果

机器鱼

那如果我想叠加黑底色实现相同效果呢，这个时候要注意，黑底色时不能通过调整底色透光量来实现了，因为底色根本不发光，那么只能用色浓度来处理。
首先我把它最大值颜色增加至255，其他颜色增加相应比例，注意这时增加的是比例而不是数值。255/192=1.328125，将另外两个颜色也乘以这个比例得到RGB'(255,105,28)；然后计算透明度，255的光要变成192，浓度为192/255=75%，则透明度为1-75%=25%
同样可以手绘并验证结果

红山牛

知识点讲得很系统，不是零散堆砌。

登峰造绩

逻辑很清晰，一步步跟着走就行。

远山暮霭

知识点讲得很系统，不是零散堆砌。

半瘦金山

步骤完整，不会出现半路卡住。

周述霞

博主经验丰富，写得很靠谱。