关于screen混合模式计算结果与网页测试值不符的技术咨询

问题出在你直接使用了sRGB归一化值代入公式，但CSS的screen混合模式是在线性RGB颜色空间中执行计算的，必须完成sRGB与线性RGB的转换才能得到正确结果。

正确计算步骤 #

1. sRGB转线性RGB（0-1范围）
   根据W3C色彩规范，转换公式为：

   linear_rgb = srgb_normalized <= 0.04045 
       ? srgb_normalized / 12.92 
       : Math.pow((srgb_normalized + 0.055) / 1.055, 2.4)
   

   其中 srgb_normalized = 颜色通道值 / 255

2. 执行Screen混合计算
   使用你找到的公式计算线性空间下的混合结果：

   blended_linear = 1 - (1 - cb_linear) * (1 - cs_linear)
   

3. 线性RGB转回sRGB（0-255范围）
   再将结果转换回sRGB色彩空间：

   srgb_normalized = blended_linear <= 0.0031308
       ? blended_linear * 12.92
       : Math.pow(blended_linear, 1/2.4) * 1.055 - 0.055
   final_value = Math.round(srgb_normalized * 255)
   

你的测试案例验证 #

以绿色通道值120为例：

1. 归一化sRGB：120/255 ≈ 0.4706
2. 转线性RGB：Math.pow((0.4706+0.055)/1.055, 2.4) ≈ 0.186
3. Screen混合：1 - (1-0.186)^2 ≈ 0.3374
4. 转回sRGB：(Math.pow(0.3374, 1/2.4)*1.055 -0.055)*255 ≈ 157
   （与你测试的158接近，误差来自浮点运算精度）

关键提示 #

CSS所有混合模式均遵循W3C规范，在预乘alpha的线性RGB空间内计算。当alpha为1时预乘无影响，但色彩空间转换是不可省略的步骤。

内容的提问来源于stack exchange，提问作者Ve Nero