css - 定义渐变尺度的颜色主题 : should I use hex or RGBA?

Question

我对 CSS 比较陌生。我想弄清楚为什么我的 UX 团队有时使用十六进制代码定义颜色，有时使用 RGBA。

背景:我们构建高度技术化的管理网络应用程序。我们所有的网络应用程序都有白色背景，并且不倾向于分层元素(例如，不将营销图片作为背景)。一些设计师认为 RGBA 有助于控制颜色对比度。有些设计师更喜欢使用 RGBA 而不是十六进制。一些设计师使用十六进制。没有人给我明确的选择理由。我想知道每种技术的优缺点，以及在哪些情况下一种方法比另一种方法更好，因为我正在为我们的核心框架构建颜色主题解决方案。我们需要为每一种原色和二次色设置渐变比例。目前没有对透明度的要求，但我想总有一天会有。

我遇到了一个相关的 UX SE 帖子:https://ux.stackexchange.com/questions/105503/why-isnt-primary-text-full-opacity答案谈论 RGBA 有助于强制执行颜色的标准使用。也就是说，如果您从 RGB 颜色开始并使用 alpha 值来调整亮/暗，则可以确保一致的颜色渐变比例。 (注意:该帖子有一张很好的图片，显示了使用十六进制的色标，然后在它旁边显示了等效的 alpha 值:/image/MWust.png)

但是当您有 HTML 元素重叠并且您不希望它们显示为部分透明但又想使用适当的颜色时会发生什么？您是使用带 alpha 1 的等效 RGB 还是十六进制代码？

至于对比度理论，这是一位用户体验设计师告诉我的:RGBA 颜色始终保持与其放置的任何颜色相同的对比度。如果将#AAA 正文文本放在#FFF 背景上，而不是将它放在#EEE 背景上，则#AAA 文本在#EEE 背景上看起来会更亮。但是，如果您将 rgba(0,0,0,0.33) 放在#FFF 和#EEE 背景上，文本将始终有 33% 的暗对比度。真的吗？使用对比度计算器 (https://contrast-ratio.com/)，#FFF 上的 rgba(0,0,0,0.33) 的比率为 2.3，而#EEE 上的 rgba(0,0,0,0.33) 的比率为 2.26。接近，但不完全相同。 #DDD 下降到 2.23。

Material UI Color Palettes 似乎使用十六进制代码(参见 https://material.io/design/color/#color-theme-creation )，但我看到其他文章有时建议 Material UI 有时使用 RGBA。并不是说 Material UI 总是对的。 :)

再一次，我正在寻找十六进制值与 RGBA 值的优缺点，以及何时使用哪个最好。

相关 StackOverflow 帖子:

Difference between hex colour, RGB, & RGBA and when should each they be used? 解释了这两个选项的技术目的，但没有解决用户体验的目的，特别是在颜色主题的核心框架中使用哪一个作为基色

Use HEX or RGBA 同样，尽管它是一篇较旧的帖子，但也讨论了浏览器支持。我的元素要求用户使用更新的浏览器，因此我对这两种解决方案的优势更感兴趣。

Answer 1

好吧，我构建了一个 fiddle 来研究上下文中的这些想法:https://jsfiddle.net/marniea/1q9adxo6/

它显示了以不透明 RGB 表示的相同颜色在以 RGBA 表示时表现如何不同。我使用的是 RGBA 和 RGB(而不是 HEX)，因为讨论实际上是关于使用部分透明的颜色代替不透明的。

使用的颜色值:

• RGB: rgb(128, 128, 128)
• RGBA:rgba(0, 0, 0, .54)

颜色在白色背景上看起来是一样的(示例 1)。

RGBA 说，“混合 54% 的我的颜色”——在这种情况下是黑色——“无论背景是什么”。

因此对于示例 2，RBGA 值将 54% 的黑色与灰色背景混合。 54% 黑色 + 灰色比 54% 黑色 + 白色更暗。 RGB 值看起来与示例 1 中的相同。因为它与背景灰色几乎相同的颜色，所以我们在示例 2 中看不到它。

对于示例 3，它将 54% 的黑色与黑色背景混合。 54% black + black 就是黑色，这就是为什么在示例 3 中看不到 RGBA 文本或框的原因。

RGB 颜色是可预测的；它看起来总是一样的。 RGBA 颜色不是那么可预测的。 RGBA 有时适应得更好(如示例 2)，有时则不然(如示例 3)。

如果我们正在考虑定义已知数量的应用程序皮肤，使用 RGBA 定义一组颜色并希望它们适应背景颜色会使事情变得偶然(或进行大量测试，尤其是检查对比度)。我觉得最好提前知道每次的颜色是什么，不管背景颜色如何。如果颜色是不透明的，为什么不制作它们呢？

到目前为止，我能看到 RGBA 的唯一优势是确保精确的颜色梯度/饱和度。但主要用例是使用颜色； 定义 颜色是次要用例。

因此，在我遇到相反的论点之前，我觉得不透明的颜色(即 RGB 或十六进制)最适合用于不透明的用例。