时间戳

首页 > 解决方案 > 使用 Alpha 通道获得相似的颜色

css - 使用 Alpha 通道获得相似的颜色

问题描述

有什么我想不通的人可以帮助我吗？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 应该确定颜色，但是如果这两种颜色模式看起来相同，它们有什么区别？先感谢您

标签： csscolors

解决方案

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

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

当您将黑色背景放在后面时，您可以注意到透明度渲染之间的明显差异，如该片段的下半部分。

因此，对于某些人/在某些设备上，颜色可能看起来相同，但它们在 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>

推荐阅读