两个颜色叠加之后是什么颜色

约定

• 这里只讨论显示器的颜色, 也就是加法混色算法
• 两个颜色叠加, 至少有一个颜色是有透明度的, 不然一点都不透明的话, 下面的颜色就看不见了
• 颜色模型是rgb模型,
• 为了简化计算, argb四个通道的值范围定为0~1
  
  
  

定义变量

• 前景色 c1, argb通道: a1, r1, g1, b1
• 背景色 c2, argb通道: a2, r2, g2, b2
• 叠加后的颜色 c3, argb通道: a3, r3, g3, b3

​

颜色实体

把颜色想象成为, 一个有颜色的玻璃, 且玻璃可以调节反射率,
比如玻璃反射0.5, 那么剩下的0.5就是折射, 反射率 + 折射率 = 1
​

两个颜色叠加模型

计算叠加颜色的数值

靠近眼睛的玻璃板令其颜色为蓝色, 代号玻璃1号, 玻璃反射率为0.5, 折射率为0.5
远离眼睛的玻璃板令其颜色为红色, 代号玻璃2号, 玻璃反射率为0.5, 折射率为0.5
​

玻璃颜色数值

玻璃1号: a1: 0.5, r1: 1, g1: 0, b1: 0
玻璃2号: a2: 1, r2: 0, g2: 0, b2: 1

R通道

玻璃1号的R通道值是0
玻璃2号的R通道值是1
首先, 玻璃2号反射率为1, 反射了所有的红色, 然后通过玻璃2号, 折射0.5的红, 射到眼睛里;
然后, 玻璃1号R通道值为0
​

射到眼睛里R通道的值是 0.5 + 0 = 0.5
​

G通道

玻璃1号的G通道值是0
玻璃2号的G通道值是0
射到眼睛里G通道的值是 0 + 0 = 0
​

B通道

玻璃1号的B通道值是1
玻璃2号的B通道值是0
​

首先, 玻璃2号B通道值是0;
然后, 玻璃1号反射0.5的蓝, 射到眼睛里
​

射到眼睛里B通道的值是 0 + 0.5 = 0.5
​

射到眼睛里的颜色

R: 0.5
G: 0
B: 0.5
​

各乘255, 后是127, 0, 127,

计算出来的颜色和ps的颜色对比

​

完美

两者不能说一模一样, 简直一模一样
​

随机的颜色叠加

我们随机两个颜色

玻璃颜色数值

玻璃1号: r1: 0.3, g1: 0.4, b1: 0.5, 反射率0.2, 折射率0.8
玻璃2号: r2: 0.6, g2: 0.7, b2: 0.8, 反射率1.0, 折射率0.0
​

R通道

玻璃1号的R通道值是0.3
玻璃2号的R通道值是0.6
​

首先, 玻璃2号反射率为1, 反射了0.6的红色, 然后通过折射率为0.8的玻璃1号, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.3的红通过反射率为0.2的玻璃1号, 射到眼睛里
​

射到眼睛里R通道的值是
玻璃2号: 0.6 * 0.8
玻璃1号: 0.3 * 0.2
射到眼睛里的R通道的总值: (0.6 * 0.8) + (0.3 * 0.2) = 0.48 + 0.06 = 0.54
​

G通道

玻璃1号的G通道值是0.4
玻璃2号的G通道值是0.7
​

首先, 玻璃2号反射率为1, 反射了0.7的绿色, 然后通过玻璃1号, 折射0.8的绿, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.4的绿通过反射率为0.2的玻璃1号, 射到眼睛里
​

射到眼睛里G通道的值是
玻璃2号: 0.7 * 0.8
玻璃1号: 0.4 * 0.2
射到眼睛里的G通道的总值: (0.7 * 0.8) + (0.4 * 0.2) = 0.56 + 0.08 = 0.64
​

B通道

玻璃1号的B通道值是0.5
玻璃2号的B通道值是0.8
​

首先, 玻璃2号反射率为1, 反射了0.8的蓝色, 然后通过玻璃1号, 折射0.8的蓝, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.8的蓝通过反射率为0.2的玻璃1号, 射到眼睛里
​

射到眼睛里B通道的值是
玻璃2号: 0.8 * 0.8
玻璃1号: 0.5 * 0.2
射到眼睛里的B通道的总值: (0.8 * 0.8) + (0.5 * 0.2) = 0.64 + 0.1 = 0.74
​

射到眼睛里的颜色

R: 0.54
G: 0.64
B: 0.74
​

各乘255, 后是137.7, 163.2, 188.7
不能有小数, 四舍五入
138, 163, 189

计算出来的颜色和ps的颜色对比

玻璃1号: r1: 0.3, g1: 0.4, b1: 0.5, 反射率0.2, 折射率0.8
玻璃2号: r2: 0.6, g2: 0.7, b2: 0.8, 反射率1.0, 折射率0.0
​

玻璃1号颜色: 76.5, 102, 127.5
玻璃2号颜色: 153, 178.5, 204
​

取整四舍五入
玻璃1号颜色: 77, 102, 128
玻璃2号颜色: 153, 179, 204
​

ps的颜色是138, 164, 189

完美

两者不能说一模一样, 简直一模一样

先用255换算颜色值, 再叠加颜色

G通道

玻璃1号的G通道值是0.4, 乘以255等于102
玻璃2号的G通道值是0.7, 乘以255等于178.5, 四舍五入等于179
​

首先, 玻璃2号反射率为1, 反射了179的绿, 然后通过折射率为0.8的玻璃1号, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 102的绿通过反射率为0.2的玻璃1号, 射到眼睛里
​

射到眼睛里R通道的值是
玻璃2号: 179 * 0.8
玻璃1号: 102 * 0.2
射到眼睛里的R通道的总值: (179 * 0.8) + (102 * 0.2) = 143.2 + 20.4 = 163.6 = 164
​

完美

两者一模一样
​

总结

虽然你看见的只有这一篇文章, 但是我看了很多帖子, 颜色叠加模型也想了好几种, 推翻重来了好多次,
最终终于实现了和ps一样的颜色叠加效果, 我非常满意, 你能看懂我写的吗? 我觉的我写的非常详细了
​

参考

颜色叠加算法
两个半透明颜色色的叠加计算方法
​

名人名言

思路是最重要的, 其他的百度, bing, stackoverflow, 安卓文档, autojs文档, 最后才是群里问问
— 牙叔教程

声明

部分内容来自网络
本教程仅用于学习, 禁止用于其他用途

bilibili

牙叔教程

微信公众号 牙叔教程

QQ群

747748653