为什么在白色背景上改变alpha会产生与混合白色不同的结果



所以我在SCSS中玩颜色,我注意到一种奇怪的行为,我认为这对我来说很奇怪,因为我不完全理解alpha通道是如何工作的。

给定背景颜色(为了方便起见,我会使用白色(,为什么下面两种颜色看起来不同?

rgba(blue, 0.5); // over a white background
mix(blue, white, 50%)

将值或颜色更改为任意值,问题仍然存在。

我试图解决的问题是:我的一些元素的不透明度小于1,现在它们也需要出现在深色背景上,我想保持相同的颜色(例如,白色背景上的半透明蓝色(,即使它们设置在深色背景之上。


为了进行一点演示,以下是通过以下两种方法获得的值:

  • rgba(blue, 0.5)编译为rgba(0, 0, 255, 0.5),并在白色背景上测量,读取#8491FD(macOS chrome(
  • mix(blue, white, 50%)编译为#8080ff,当在屏幕上测量时,带颜色选择器读取#8184FC(macOS chrome(

.rgba {
background: rgba(0, 0, 255, 0.5);
}
.mix {
background: #8080ff;
}
body {
background: white;
}
span {
display: inline-block;
padding: 2em;
}
<span class="rgba">rgba: #8491FD</span>
<span class="mix">mix: #8184FC</span>

这可能不是你想要的答案,但网络上的颜色是出了名的不精确。这就是为什么我们最近看到了新的规格,包括新的颜色值函数hslhwblchlabdevice-cmyk以及新的显示功能媒体查询,如color-gamutdynamic-range

Sass年纪大了,不在乎这些,如果他们的颜色数学甚至不接近正确,我也不会感到惊讶(可能有很多关于在数字媒体上用不同的数学方法混合颜色的科学文献(。