使用 Alpha 通道获得相似的颜色答案

【问题标题】：Getting similar colors using alpha channel使用 Alpha 通道获得相似的颜色
【发布时间】：2021-01-20 06:18:49
【问题描述】：

有些事情我想不通，有人可以帮我吗？ RGB 值如此不同，两种颜色怎么会如此相似？喜欢

#p1 {背景色：rgba(174,255,174,0.6);}

#p2 {背景色:rgba(0,255,0,0.2);}

和

#p4 {背景色：rgba(10,10,10,0.1);}

#p5 {背景色:rgba(210,210,210,0.5);}

第一个是绿色的，第二个是灰色的。 RGB 应该确定颜色，但是如果这两种颜色模式看起来相同，它们有什么区别？提前谢谢你

【问题讨论】：

两种颜色相同是什么意思？颜色#p1 和#p2 看起来相似但不完全相同。
注意：很多屏幕不能显示好的颜色，很多面板的屏幕只能显示6位（每通道）颜色。
我觉得我需要进一步澄清这个问题。这是 RGB (174,255,174) 与 rgb(0,255,0) 非常不同的事情，alpha chanel 如何使它们看起来如此相似？诀窍在哪里？虽然 rbg (10,10,10) 与 rgb (210,210,210) 非常不同，但 alpha chanel 如何使它们看起来如此相似？诀窍在哪里？我相信我可以通过正确的 Alpha 通道调整使 RGB (1,1,1) 看起来像 rgb (254,254,254)。这怎么可能？

标签： css colors

【解决方案1】：

显色性和颜色感知是复杂的主题。不同的设备可能会使颜色看起来略有不同，更复杂的是人类的颜色感知。

在我的笔记本电脑屏幕上，两个绿色看起来几乎相同，但灰色看起来不同，我发现两者之间有明显的界限。

当你把黑色背景放在后面时，你可以注意到透明度渲染之间的明显差异，就像这个 sn-p 的下半部分一样。

因此，对于某些人/在某些设备上，颜色可能看起来相同，但它们在 r、g、b 的基本量或透明度方面绝对不一样。

* {
  margin: 0;
  padding: 0;
  }
#bg {
  width: 80vw;
  height: 50vh;
  position: absolute;
  top: 50vh;
  background-color: black;
  z-index: -1;
} 
#p1, #p2, #p4, #p5 {
 width: 20vw;
 height: 100vh;
 float:left;
}
#p1 {background-color:rgba(174,255,174,0.6);}

#p2 {background-color:rgba(0,255,0,0.2);}

#p4 {background-color:rgba(10,10,10,0.1);}

#p5 {background-color:rgba(210,210,210,0.5);}

<div id="bg"></div>
<div id="p1"></div>
<div id="p2"></div>
<div id="p4"></div>
<div id="p5"></div>

【讨论】：