跨设备的 RGBA 不一致答案

【问题标题】：Inconsistent RGBA across devices跨设备的 RGBA 不一致
【发布时间】：2013-08-02 17:42:53
【问题描述】：

如果你用代码做一个简单的网站：

<div style='background-color: rgba(0,0,0,.05);width:50px;height:50px'></div>

并在各种设备上查看，您会看到非常不同的颜色。

在我的 iPhone 和 iPad 上，它看起来是白色的，但在我的 MacBook 上，你可以看到明显的浅灰色，看起来接近 #fafafa；我还没有在其他设备上彻底测试过，但我认为 Android Chrome 有时会在颜色之间显示三分之一。

这不是屏幕颜色容量不同的问题，因为 iPad 绝对可以显示#fafafa。

那么故事是什么，有什么办法可以解决吗？

【问题讨论】：

同色异谱故障。 en.wikipedia.org/wiki/Metamerism_(color)。每个屏幕都有不同的光谱分布，因此它们可以测量相同，但感知不同。示例：走进一家电子产品零售商，每个品牌的具有不同背光灯的电视在显示您知道相同的内容时可能看起来大相径庭。
但正如我所说，我更关心#fafafa 和rgba(0,0,0,.05) 之间的区别，而不是不同设备之间的区别。
您是否尝试将#fafafa 与rgba(0,0,0,0.5) 匹配？现在我很困惑。

标签： ios css colors cross-browser

【解决方案1】：

rgba(0,0,0,.05) 是一种令人难以置信的浅色。在许多低端 LCD 上看不到 5% 的色调 - 尤其是6bit panels。就我个人而言，当我使用 RGBA 时，我只调整了 10% 的增量。此外，您会注意到#fafafa 和rgba(0,0,0,.05) 的显示不一样，因为它们不一样。 #f2f2f2 是 rgba(0,0,0,.05)（至少在 Photoshop 中。）

RGB 类型之间也存在差异。设备也会根据光照条件做出不同的适应——而且它们的适应方式也不一样。还有不同的screen types 比如AMOLED

【讨论】：

【解决方案2】：

根据我的经验，这通常是由于不同屏幕上的对比度和亮度设置而发生的。我的建议是玩这些。

还要检查浏览器的兼容性，但你提到的应该没问题：

http://css-tricks.com/rgba-browser-support/

【讨论】：