在 CSS 中使用十六进制而不是十进制来表示 RGB 颜色值有什么好的理由吗?

发布于 2024-07-29 02:41:40 字数 352 浏览 5 评论 0原文

rgb(255,255,255) 表示法自 CSS1 起就可用。 但#ffffff 似乎更受欢迎。

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

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

那么,有什么理由不使用十进制呢?

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

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.

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).

So, any reason not to use decimal?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(13

初见 2024-08-05 02:41:40

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

RGB 值更容易使用 Javascript 进行操作。

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

Ed。

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

RGB values are easier to manipulate with Javascript.

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

Ed.

独行侠 2024-08-05 02:41:40

值得注意的是,如果要输入RGBA值,不支持十六进制表示法; 也就是说,你不能用#FFFFFFff 来伪造它。 事实上,alpha 值必须是 0.0 到 1.0 之间的数字(含 0.0 和 1.0)。 (查看此页面了解浏览器支持 - 一如既往,IE 处于领先地位;) )

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

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 page for browser support -- as always, IE is leading the pack here. ;) )

HSL and HSLA color support -- which is very designer 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.

紫竹語嫣☆ 2024-08-05 02:41:40

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

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

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

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

这完全取决于偏好和易读性 - 如果您维护一个巨大的 CSS 文件,能够查看颜色值并知道它是什么颜色,这是一个非常好的优势。 更有利的是使用 LESSSass 为 CSS 添加一种可编程性 - 例如允许常量。 因此,与其说:

#title { color: #abcdef; }

您可以用 LESS 来执行以下操作:

@base-color: #abcdef;

#title { color: @base-color; }

维护 CSS 不再是一个问题。

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

总而言之,它可以归结为:

  • 熟悉度
  • 偏好
  • 可维护性
  • 性能

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.

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

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

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

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 LESS or Sass to add a kind of programmability to CSS - allowing constants for example. So instead of saying:

#title { color: #abcdef; }

You might instead do the following with LESS:

@base-color: #abcdef;

#title { color: @base-color; }

Maintaining the CSS becomes less of an issue.

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
留一抹残留的笑 2024-08-05 02:41:40

正如您提到的,主要原因可能是紧凑性。 #ffffff 甚至可以进一步缩写为 #fff 简写符号。

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

The main reason is probably compactness, as you mentioned. #ffffff can even be further shortened to the #fff shorthand notation.

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

原野 2024-08-05 02:41:40

传统上 HTML 总是使用十六进制颜色,因此它也被继承到了 CSS 中。 想想

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

╄→承喏 2024-08-05 02:41:40

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

rgb(82, 110, 188)

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

rgba(82, 110, 188, 0.5)

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:

rgba(82, 110, 188, 0.5)
慕烟庭风 2024-08-05 02:41:40

CSS 是由软件开发人员而不是设计师发明的。 软件开发人员以十六进制为生。 从我以前的 C64 时代开始,我仍然可以不假思索地读取大多数十六进制数字。 A9,有人吗?

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?

不如归去 2024-08-05 02:41:40

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

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

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 always 6 characters (or 3, admittedly - plus the #) which makes it easier to scan down a list of them.

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

只为守护你 2024-08-05 02:41:40

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

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.

一场信仰旅途 2024-08-05 02:41:40

由于历史原因,十六进制最为常见。

在 CSS 在 Web 开发中常见之前,颜色是在 HTML 标记中指定的,最常用和支持的指定颜色的方法是使用十六进制值。

HEX is most common due to historical reasons.

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.

一腔孤↑勇 2024-08-05 02:41:40

除了个人喜好之外,没有任何正当理由。

no valid reason, other than personal preference.

凉栀 2024-08-05 02:41:40

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

Maybe I've done HTML too long, but I find it easier to think in HEX values. A lot of the pre-defined colour palette for HTML maps neatly to HEX values. Using the shortened format also gives you automatic 'web-safe' colours, though this is not really an issue in the days of 32bit colour displays.

逆夏时光 2024-08-05 02:41:40

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

当谈到动态编辑时,我想使用 RGB,因为可以轻松地循环不同的颜色。 这在做 CSS 渐变时也有一点帮助。

I have always preferred HEX in comparison to RGB or HSL simply due to it being easier for me to read while styling.

When it comes to dynamic editing, I would like to use RGB because of the ease of cycling through different colors. This also helps a little when doing CSS gradients.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文