在 CSS 中对 RGB 颜色值使用十六进制多于十进制有什么好的理由吗？

Are there any good reasons for using hex over decimal for RGB colour values in CSS?

提问by e100

rgb(255,255,255)notation has been available since CSS1. But #ffffffseems to be vastly more popular.

rgb(255,255,255)从 CSS1 开始就可以使用符号。但#ffffff似乎更受欢迎。

Obviously it's slightly more compact. I know that hex is more closely related to the underlying bytes, and understand that there would be advantages in carrying out arithmetic on those values, but this isn't something you're going to do with CSS.

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

Colour values tend to be originated by designers (such as myself) who would never encounter hex notation anywhere else, and are much more familiar with the decimal notation which is the main way of specifying colour in the apps they use -- in fact I have met quite a few who don't realise how a given hex value breaks down into RGB components and assumed it didn't directly relate to the colour at all, like a Pantone colour system reference (eg PMS432).

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

So, any reason not to use decimal?

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

回答by edeverett

Hex values are easier to copy and paste from your favourite image editor.

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

RGB values are easier to manipulate with Javascript.

使用 Javascript 更容易操作 RGB 值。

(My favourite Hex colour value is #EDEDED and a site we made for a client involved in motorsport had a background colour of #F1F1F1 :-)

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

Ed.

埃德。

回答by WCWedin

It's worth noting that if you want to input an RGBA value, hex notation is not supported; i.e., you can't fake it with #FFFFFFff. As a matter of fact, the alpha value must be a number between 0.0 and 1.0, inclusive. (Check out this pagefor browser support -- as always, IE is leading the pack here. ;) )

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

HSL and HSLA color support -- which is verydesigner friendly -- is also provided with a similar syntax to the RGB() style. If a designer were to use both types of color values in the same stylesheet, they might opt for decimal values over hex codes for consistency.

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

回答by jamiebarrow

I think it's what you're used to. If you're used to HTML, you'll probably use HEX since it's just been used a lot in HTML. If you're from a design background, using Photoshop/Corel/PaintShopPro etc., then you're likely used to the RGB notation - though, a lot of programs these days incorporate a HEX value field too.

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

As said, RGBA might be a reason to just go with the RGB notation - consistency.

如前所述，RGBA 可能是使用 RGB 符号 - 一致性的一个原因。

Though, I think it also depends on the scenario. If you're comfortable with both, you might just switch between them: #fffis a lot easier to type than rgb(255,255,255).

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

Another question is why people will say #fffinstead of White(assuming most browsers support this keyword).

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

It's all a matter of preference and legibility - if you're maintaining a huge CSS file, being able to look at the colour value and know what colour it is, is a really good advantage. Even more advantageous is using something like LESSor Sassto add a kind of programmability to CSS - allowing constants for example. So instead of saying:

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

#title { color: #abcdef; }

You might instead do the following with LESS:

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

@base-color: #abcdef;

#title { color: @base-color; }

Maintaining the CSS becomes less of an issue.

维护 CSS 不再是一个问题。

If you're worried about the performance of the browser rendering it's result, then that could also be another factor to your choice.

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

So in summary, it boils down to:

所以总结起来，它归结为：

• Familiarity
• Preference
• Maintainability
• Performance

• 熟悉度
• 偏爱
• 可维护性
• 表现

回答by Bill the Lizard

The main reason is probably compactness, as you mentioned. #ffffffcan even be further shortened to the #fffshorthand notation.

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

Another possible reason is that there's a perceived performance increase by saving the browser the trouble of converting the rgbnotation.

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

回答by Greg

Traditionally HTML has always used hex colours, so that has carried forward into CSS. Think <font color="#ffffff">

传统上 HTML 一直使用十六进制颜色，因此它已被继承到 CSS 中。思考<font color="#ffffff">

回答by chrisweb

I always used hex, but today I prefer to set my values as:

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

rgb(82, 110, 188)

in my css files, so whenever I want to add opacity I just need to rename rgb to rgba and add the opacity value. The advantage is that I don't have to convert the hex value to rgb before being able to add the opacity:

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

rgba(82, 110, 188, 0.5)

回答by Aaron Digulla

CSS was invented by software developers, not designers. Software developers live and breathe hex. From my old C64 days, I can still read most hex numbers without thinking. A9, anyone?

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

回答by Jon Skeet

Various things will accept a single hex value where they may have different ways of entering three decimal values. There's also the fact that it's always6 characters (or 3, admittedly - plus the #) which makes it easier to scan down a list of them.

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

Just a couple of random thoughts to add to the mix...

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

回答by Elzo Valugi

Probably a touch of speed when the color is interpreted by a browser. Otherwise some people from design background may know how to compose colors from RGB components when they write code, and some others from programming background are probably more inclined to use HEX values.

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

回答by Elzo Valugi

HEX is most common due to historical reasons.

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

Before CSS was common in web development, colors were specified within HTML tags and the most commonly used and supported way to specify a color was to use HEX values.

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