在 CSS 中对 RGB 颜色值使用十六进制而不是十进制有啥好的理由吗？

Posted 2023-02-23

【中文标题】在 CSS 中对 RGB 颜色值使用十六进制而不是十进制有啥好的理由吗？

【英文标题】：Are there any good reasons for using hex over decimal for RGB colour values in CSS?在 CSS 中对 RGB 颜色值使用十六进制而不是十进制有什么好的理由吗？

【发布时间】：2010-11-13 08:57:40

【问题描述】：

rgb(255,255,255) 表示法从 CSS1 开始可用。但#ffffff 似乎更受欢迎。

显然它更紧凑。我知道十六进制与底层字节更密切相关，并且了解对这些值进行算术运算会有优势，但这不是你要用 CSS 做的事情。

颜色值往往由设计师（例如我自己）发明，他们在其他任何地方都不会遇到十六进制表示法，并且更熟悉十进制表示法，这是他们使用的应用程序中指定颜色的主要方式 - 在事实上，我遇到过不少人没有意识到给定的十六进制值是如何分解为 RGB 分量的，并认为它根本与颜色没有直接关系，例如 Pantone 颜色系统参考（例如 PMS432）。

那么，有什么理由不使用十进制？

【问题讨论】：

更新：非常感谢您的回复。我认为使用其中任何一种的任何令人信服的理由都不是显而易见的，因此没有标记答案。但也有一些有趣的方面，尤其是 WCWedin 的 decimal being required for RGBA

嗯，不确定我在使用 Markdown 的链接语法时做错了什么？

【参考方案1】：

与 RGB 或 HSL 相比，我一直更喜欢 HEX，因为它在样式设置时更容易阅读。

在动态编辑方面，我喜欢使用 RGB，因为它可以轻松循环切换不同的颜色。这在做 CSS 渐变时也有一点帮助。

【参考方案2】：

我想这是你习惯的。如果您习惯于 html，您可能会使用 HEX，因为它在 HTML 中被大量使用。如果您具有设计背景，使用 Photoshop/Corel/PaintShopPro 等，那么您可能已经习惯了 RGB 表示法 - 不过，现在很多程序也包含 HEX 值字段。

如前所述，RGBA 可能是只使用 RGB 表示法的一个原因 - 一致性。

不过，我认为这也取决于场景。如果您对两者都感到满意，则可以在它们之间切换：#fff 比 rgb(255,255,255) 更容易输入。

另一个问题是为什么人们会说#fff而不是White（假设大多数浏览器都支持这个关键字）。

这完全取决于偏好和易读性 - 如果您要维护一个巨大的 CSS 文件，那么能够查看颜色值并知道它是什么颜色，这是一个非常好的优势。更有利的是使用 LESS 或 Sass 之类的东西来为 CSS 添加一种可编程性 - 例如允许使用常量。所以不要说：

#title  color: #abcdef; 

您可以改为使用 LESS 执行以下操作：

@base-color: #abcdef;

#title  color: @base-color; 

维护 CSS 不再是问题。

如果您担心浏览器呈现结果的性能，那么这也可能是您选择的另一个因素。

总结起来就是：

熟悉度 偏好 可维护性 性能

【参考方案3】：

我一直使用十六进制，但今天我更喜欢将值设置为：

rgb(82, 110, 188)

在我的 css 文件中，所以每当我想添加不透明度时，我只需将 rgb 重命名为 rgba 并添加不透明度值。优点是我不必在能够添加不透明度之前将十六进制值转换为 rgb：

rgba(82, 110, 188, 0.5)

【讨论】：

在 Sass 中，您仍然可以使用 HEX 值并将它们与 alpha 组合。例如：.container background: rgba(#369, .2); 。这是一个Demo in JSFiddle。

CSS 颜色模块级别 4 草案规范添加了 8 位十六进制表示法 #RRGGBBAA 和 #RGBA。根据caniuse，76% 的浏览器（2018 年 9 月）支持这种表示法，但尚不支持 IE 或 Edge，因此不建议使用...。

【参考方案4】：

由于历史原因，HEX 最为常见。

在 Web 开发中普遍使用 CSS 之前，颜色是在 HTML 标记中指定的，最常用和受支持的指定颜色的方法是使用 HEX 值。

【参考方案5】：

值得注意的是，如果要输入RGBA值，不支持十六进制表示法；即，你不能用#FFFFFFff 伪造它。事实上，alpha 值必须是介于 0.0 和 1.0 之间的数字，包括 0.0 和 1.0。 （查看this page 以获得浏览器支持——一如既往，IE 在这里处于领先地位。;)

HSL 和 HSLA 颜色支持 - 非常 设计师友好 - 也提供了与 RGB() 样式类似的语法。如果设计师要在同一个样式表中使用这两种颜色值，他们可能会选择十进制值而不是十六进制代码以保持一致性。

【讨论】：

随着 RGBA 的使用越来越广泛（它非常有用），我预计十进制表示法的使用会重新兴起。好点子！

是的，关于 RGBA 的观点很好。不确定设计师是否真的会使用 HSL 值来指定颜色值，尽管它在用于颜色选择器、颜色调整过滤器等时是一个直观的模型

HSL 的好处在于，您可以轻松地即时制作匹配的配色方案，甚至在刷新页面之前就可以很好地了解它们的外观。无需打开 Photoshop 即可挑选出相同红色的三种色调。即使是互补的颜色也很容易挑选出来； 120 度旋转在 RGB 中是微不足道的，但我不确定 180 度是否可以这么容易地计算出来。

CSS 颜色模块级别 4 草案规范添加了 8 位十六进制表示法 #RRGGBBAA 和 #RGBA。根据caniuse 的说法，76% 的浏览器（2018 年 9 月）支持这种表示法，但尚不支持 IE 或 Edge，因此不建议使用...。

【参考方案6】：

各种事物将接受一个十六进制值，它们可能有不同的方式来输入三个十进制值。还有一个事实是它总是 6 个字符（或 3 个，诚然 - 加上 #），这使得扫描它们的列表变得更容易。

只是一些随机的想法可以添加到组合中......

【讨论】：

嗯，通常是 6 个字符。也可以是 3 个字符。

【参考方案7】：

CSS 是由软件开发人员而非设计师发明的。软件开发人员生活和呼吸十六进制。从我以前的 C64 时代开始，我仍然可以不假思索地阅读大多数十六进制数字。 A9，有人吗？

【讨论】：

"number x = 255" 比 "number x = #f" 更符合人们学习数学的方式。对于那些甚至没有数学倾向的人来说，“255”更加直观。对机器进行抽象是为了提高人类对正在发生的事情的洞察力。话虽如此，对我来说，#fff 和 rgb(255,255,255) 一样直观。因为我很懒所以我会用#fff :)

【参考方案8】：

也许我做 HTML 的时间太长了，但我发现用 HEX 值来思考更容易。许多用于 HTML 的预定义调色板巧妙地映射到 HEX 值。使用缩短的格式还可以自动为您提供“网络安全”颜色，尽管在 32 位彩色显示器时代这并不是真正的问题。

【讨论】：

缩短格式不会自动为您提供网络安全颜色。您必须将组件值限制为 0、3、6、9、C 和 F 才能获得 216 种网络安全颜色。

【参考方案9】：

正如您所提到的，主要原因可能是紧凑性。 #ffffff 甚至可以进一步缩短为 #fff 速记符号。

另一个可能的原因是，通过省去浏览器转换 rgb 表示法的麻烦，可以感知性能提高。

【讨论】：

存在感知性能差异？我对你的评论有双重看法，以检查它是否写于 1991 年之前。这是基于任何数据吗？

LMAO。对于那些认为自己“为浏览器省去麻烦”的人来说，这是一个思想实验：您认为计算机本身是否使用编码为 ASCII 的十六进制值，而不是使用十进制值？无论哪种情况，浏览器都必须将 ASCII 字符串转换为渲染引擎需要的 8 位数字。此外，在任何非人为的场景中，十六进制颜色的任何尺寸优势都无关紧要。

@underscore_d 你表现得好像所有的浏览器都是一样的。

【参考方案10】：

传统上，HTML 一直使用十六进制颜色，所以这已经延续到 CSS 中。想想<font color="#ffffff">

【参考方案11】：

当颜色被浏览器解释时，可能会有点速度。否则有些设计背景的人在编写代码时可能知道如何从 RGB 组件中组合颜色，而有些编程背景的人可能更倾向于使用 HEX 值。

【讨论】：

我没有得到反对票.. rgb(255,255,255) 比#fff 长得多。这就是我所说的速度感。

一点点速度在任何实际情况下都不太可能很重要，以至于几乎不值得一提，尤其是作为主要原因。

【参考方案12】：

十六进制值更容易从您喜欢的图像编辑器中复制和粘贴。

RGB 值更易于使用 javascript 进行操作。

（我最喜欢的十六进制颜色值是#EDEDED，我们为参与赛车运动的客户制作的网站的背景颜色是#F1F1F1 :-)

编。

【参考方案13】：

没有正当理由，个人喜好除外。