mix-blend-mode：乘数不正确吗？

Question

我正在设计一个徽标，该徽标使用具有红色和蓝色形状的多重混合模式在颜色相乘的空间中创建非常特定的灰色。

在我尝试过的所有图形编辑软件中，结果都是相同的：

R 255 G 38 B 30

x

R 30 G 200 B 255

=

R 30 G 30 B 30

---

但是我使用CSS得到的结果是非常不同的。使用下面的代码，这两种相同的颜色最终会乘以 R 87 G 49 B 47 < / p>

.red, .blue {
mix-blend-mode: multiply;
}
.red {
background: rgb(255,38,30);
}
.blue {
background: rgb(30,200,255);
}

为什么浏览器对这些颜色的解释不同，即使它应该是RGB值的直接乘积呢？

您可以在this codepen上看到一个有效的示例。