如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码？

Posted 2023-02-23

【中文标题】如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码？

【英文标题】：How can I use 3-digit color codes rather than 6-digit color codes in CSS?

【发布时间】：2011-03-07 17:39:54

【问题描述】：

我最近浏览了我的 CSS 文件，并将所有六位十六进制代码转换为简单的三位代码（例如，我的 #FDFEFF 被缩短为 #FFF）。

它呈现的颜色几乎与以前完全相同，在我看来，中间部分相当无用，删除它们在我的 CSS 文件中节省了整整 300 个字节。

你使用哪个版本有关系吗？我很少遇到只使用三位数代码的网站（或者我想我从来没有遇到过使用三位数代码的网站）。使用三位数代码而不是六位数代码是否仍然完全有效，还是我们应该使用完整的六位数代码？

【问题讨论】：

在 CSS 中保存几个字节（甚至 kb）并没有多大意义，因为它是被请求一次然后被缓存的东西。很多设计师都会说 FDFEFF 和 FFF 不一样。我倾向于同意。作为一种单一的颜色，它并没有太大的区别，但在多种颜色的组合中，它会产生很大的影响。

我也是一个优化狂，但你有没有想过 300 字节很可能比单个页面请求的 HTTP 标头还要少？此外，您可能想查看其他地方以进行尺寸优化。例如图像精灵，但也少一些手动的东西，例如 CSS/JS 压缩器、图像优化器等。

re：在 CSS 中保存几个字节并没有多大意义。在 Atmel/ESP 等嵌入式系统上工作时会这样做

在某些应用程序中很重要...如果它是通过电子邮件服务器发送的 html 或在旧浏览器中查看的，它可以呈现为与您预期不同的颜色。例如，#fff（白色）的两种解释是#0f0f0f（黑色）或#ffffff（白色）。

【参考方案1】：

如果“3 位”版本产生您需要的颜色，那么您可以随心所欲地使用它。肯定没有错。

【参考方案2】：

无论您使用速记还是普通十六进制颜色都没有关系，所以如果您愿意，可以继续进行转换。

删除它们在我的 CSS 文件中节省了整整 300 个字节

哇，整整 300 字节！ :D，为胜利而讽刺

问题是，除非您要缩小、压缩和合并所有 CSS、javascript 等内容，否则 300 字节几乎不值得费心，尤其是在平均互联网速度不断提高的情况下。

【讨论】：

实际上，我试图让我的外部 CSS 大小低于 8K，而且我已经考虑过这样做，所以我想，为什么不呢？

【参考方案3】：

三位代码是简写，#123 与#112233 相同。在您给出的示例中，您（有效地）将#FDFEFF 换成了#FFFFFF，这与原始颜色接近，但显然不准确。

因此，您使用哪个版本并不“重要”，但是三位数的颜色代码意味着您在色调方面的选择要少一些。如果您觉得节省 300 字节是值得的，那么请继续使用三位数代码，但除非您针对低带宽情况进行设计，否则这 300 字节不会真正为您节省那么多。

【讨论】：

我确实觉得节省额外的 300 字节比拥有更多的 准确 颜色更重要，因为无论如何你几乎无法区分它们。

您之所以这么说是因为您的示例是#FDFEFF，无论如何它非常接近#FFFFFF，并且当您使用速记以这种方式轻推它时几乎不会被注意到。但是，如果您查看#F0F0F0 和#FFF，那是 显而易见的。或者查看#E0F040，然后将其缩短为#EF4 - 巨大的差异。如果你试图告诉他们这些颜色“足够接近”，平面设计师会大吃一惊。

如果将#F0F0F0 缩短为#EEE (#EEEEEE)，那不是还是相当接近相同的颜色吗？

不会压缩（默认？）减少到远小于 300 字节？

【参考方案4】：

速记很烂！不要使用它。它更难维护并产生不必要的变化，例如搜索和替换颜色值时（“哦，现在我必须考虑#FFFFFF 和white 和#FFF”）。

您在大小上节省的东西永远不值得您在可维护性方面损失的东西。使用缩小和压缩来节省带宽。

【讨论】：

我经常使用速记，但今天我们发现当你将 bgcolor="#fff" 放在正文标签上时它在 IE10 中不起作用（丑陋的 html4 内容用于时事通讯电子邮件），它只是显示黑色，bgcolor=#ffffff" 有效 Gmail 在邮件中使用速记时也会出现问题。

用正则表达式搜索怎么样？

@MVision：请参阅Why are 3-digit hex color code values interpreted differently in Internet EXPLORER? 以获得有关此的完整说明。唯一的错误/问题/问题是开发人员在为bgcolor设置无效值时期望可预测的统一结果@

正在搜索？我建议使用正则表达式，或者如果你可以使用像 less 或 sass 这样的 CSS 超集来让你使用变量

【参考方案5】：

确实如此，但这种转变并不普遍：

#FFF == #FFFFFF
#CCC == #CCCCCC

因此它将每个十六进制数字“加倍”。所以不是同一种颜色。然而，它可能看起来相同，因为差异很小。在这种情况下，经过校准的颜色工作流程可能会有所帮助。

【讨论】：

其实是同一种颜色，因为每一步红色的比例都是1/15。 #FFxxxx;绝对没有红色，就像#Fxx;。绿色和蓝色也是如此。 #111 是每种颜色的十五分之一，与 #111111 一样，但乘以 #F

【参考方案6】：

如果你想节省字节，那么你最好使用 CSS 缩小技术

http://en.wikipedia.org/wiki/Minification_(programming) http://developer.yahoo.com/yui/compressor/ http://www.minifycss.com/

【参考方案7】：

如果您在 Internet Explorer 7、8 或 9 的表格中使用它（不幸的是，这在本回复之日是相关的）

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

六位代码可以正常工作，但三位代码呈现为黑色：

<table border="1" bgcolor="#ff0000">  vs.    <table border="1" bgcolor="#ff0">

【讨论】：

该问题特定于 HTML 中的颜色属性。这不是 CSS 本身的问题。无论如何，您甚至都不应该使用 bgcolor 属性。它已被弃用多年。

'black' 实际上是 'black-ish'.. bgcolor 上的简写 #ff0 变为 #0f0f00，而不是在所有版本的 IE 中预期的 #ffff00（黄色）（依赖Outlook 等应用程序）。此外，在bgcolor 上设置 3 位十六进制值是错误，不是可能导致的未定义（按规范）行为。见：***.com/a/32153998/588079

【参考方案8】：

我总是使用速记。最大的好处是我可以很容易地记住代码。

您还有 16³ = 4,096 种颜色可供选择，应该足够了。

但是，如果您保存 300 个字节的速记颜色代码，则意味着您在 CSS 中声明了 100 种颜色。除非您的页面非常多样化，或者所有的彩虹和花朵看起来都很多。你可能擅长系统化 CSS，但我经常看到不必要的 CSS 规则。

示例：如果您为许多子元素设置相同的规则，而这些子元素可能被替换为在祖父元素和一个异常元素中设置规则。

【参考方案9】：

这是不可能的。请了解十六进制颜色代码的工作原理。对于一些颜色代码，我们可以将其减少到三位数，但是对于许多十六进制颜色代码，我们不能将其减少到三位数。请查看以下链接以获得进一步说明。

CSS 3 Digit Hex Colors CSS 6 Digit Hex Colors

【讨论】：

但是 OP 通过 “它呈现的颜色与以前几乎完全相同”

识别出了信息丢失