如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3108860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use 3-digit color codes rather than 6-digit color codes in CSS?
提问by animuson
I recently went through my CSS file and switch all my 6-digit hexadecimal codes to simple 3-digit codes (for example, my #FDFEFFgot shortened to #FFF). It renders pretty much the exact same color as before, it seems to me that the in between parts are fairly useless and removing them saved me an entire 300 bytes in my CSS file.
我最近浏览了我的 CSS 文件并将我所有的 6 位十六进制代码切换为简单的 3 位代码（例如，我的#FDFEFF缩写为#FFF）。它呈现的颜色与以前几乎完全相同，在我看来，中间部分相当无用，删除它们为我的 CSS 文件节省了整整 300 个字节。
Does it matter which version you use? I rarely ever run across websites that use only the 3-digit codes (or I guess I just never run across ones that do). Is it still perfectly valid to use 3-digit codes over 6-digit codes, or are we supposed to use the full 6-digit codes?
你使用哪个版本有关系吗？我很少遇到只使用 3 位代码的网站（或者我想我从来没有遇到过使用 3 位代码的网站）。在 6 位代码上使用 3 位代码仍然完全有效，还是我们应该使用完整的 6 位代码？
回答by Chris
The 3-digit codes are shorthand, #123is the same as #112233. In the example you give, you've (effectively) swapped #FDFEFFfor #FFFFFF, which is close to the original colour but obviously not exact.
3 位代码是简写，#123与#112233. 在您给出的示例中，您（有效地）交换#FDFEFF了#FFFFFF，它接近原始颜色但显然不准确。
It doesn't "matter" which version you use, as such, but 3-digit colour codes mean you have a little less choice in shades. If you feel that saving 300 bytes is worth that, then go ahead and use the 3-digit codes, but unless you're designing for a low-bandwidth situation those 300 bytes won't really save you all that much.
因此，您使用哪个版本并不“重要”，但是 3 位颜色代码意味着您在色调方面的选择要少一些。如果您觉得节省 300 字节值得，那么继续使用 3 位代码，但除非您是为低带宽情况设计的，否则 300 字节不会真正为您节省那么多。
回答by Pekka
Shorthand sucks! Don't use it. It's harder to maintain and creates unnecessary variation e.g. when searching and replacing a colour value ("oh, now I have to take into consideration #FFFFFFand whiteand #FFF").
速记很烂！不要使用它。这是很难维持和查找和替换颜色值时产生不必要的变化，如（“哦，我现在必须考虑到#FFFFFF和white和#FFF”）。
What you save in size is never worth what you lose in maintainability. Use minifaction and compression to save bandwidth.
你在规模上节省的东西永远不值得你在可维护性上损失的东西。使用小型化和压缩来节省带宽。
回答by Carlos Mu?oz
If you want to save bytes then you better use CSS minification techniques
如果你想节省字节，那么你最好使用 CSS 缩小技术
回答by user1505432
If you use this in a table in IE 7 8 or 9 (unfortunately this is relevant as of the date of this response)
如果您在 IE 7 8 或 9 的表格中使用它（不幸的是，这与本回复的日期相关）
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
6 digit codes work fine but 3 digit codes render as black
6 位代码工作正常，但 3 位代码呈现为黑色
<table border="1" bgcolor="#ff0000"> vs. <table border="1" bgcolor="#ff0">
回答by agiopnl
I always use the shorthand. The best advantage is that I can easily remember the codes.
我总是使用速记。最大的优点是我可以很容易地记住代码。
You still have 163= 4,096 colors to choose from, should be enough.
您还有 16 3= 4,096 种颜色可供选择，应该足够了。
However if you save 300 bytes in shorthand color codes it means you have 100 colors decleared in your CSS. Unless your page is very diverse, or all rainbows and flowers it seems like a lot. You might be good at systematic CSS, but I often see unneccesary css rules. EX: if you're setting the same rule to many child elements that could have been replaced with setting the rule on the grandparent and in one exception element instead.
但是，如果您在速记颜色代码中保存 300 个字节，则意味着您的 CSS 中有 100 种颜色被清除。除非你的页面非常多样化，或者所有的彩虹和花朵看起来都很多。你可能擅长系统的 CSS，但我经常看到不必要的 css 规则。例如：如果您为许多子元素设置相同的规则，而这些子元素本可以通过在祖父元素和一个异常元素中设置规则来替换。
回答by Jan Han?i?
If the "3 digit" versions produces the colour you need then you can use it as much as you like. It's certainly not wrong.
如果“3 位”版本产生您需要的颜色，那么您可以随心所欲地使用它。这当然没有错。
回答by GorillaPatch
That is true, but this transformation is not general:
确实如此，但这种转换并不普遍：
#FFF == #FFFFFF
#CCC == #CCCCCC
So what it does is it "doubles" each hexadecimal digit. So it is not the same color. It is however possible that it looks the same because the differences are minute. A calibrated color workflow could help in this case.
所以它所做的是将每个十六进制数字“加倍”。所以不是同一个颜色。然而，它可能看起来相同，因为差异很小。在这种情况下，校准的颜色工作流程可能会有所帮助。
回答by Ben Everard
It does not matter whether you use shorthand or normal hex colours, so go ahead and convert them if you desire.
无论您使用速记还是普通的十六进制颜色都没有关系，所以如果您愿意，可以继续转换它们。
removing them saved me an entire 300 bytes in my CSS file
删除它们在我的 CSS 文件中为我节省了整整 300 个字节
Wow, a full 300 bytes! :D, sarcasm ftw
哇，整整 300 个字节！:D, 讽刺 ftw
The thing is unless you're going to minify, compress and combine all of your css, javascript etc 300 bytes is barely worth bothering with, especially as the average internet speed is increasing.
问题是，除非您要缩小、压缩和组合所有 css、javascript 等，否则 300 字节几乎不值得打扰，尤其是在平均互联网速度不断提高的情况下。
Have fun!
玩得开心！
回答by JayK
It is not possible, please go through how the hexadecimal color code works.For few color codes we can reduce it to 3 digits, however, for the many hexadecimal color codes we cannot turn that down to 3 digits. Please check the below links for the further clarification.
这是不可能的，请查看十六进制颜色代码的工作原理。对于少数颜色代码，我们可以将其减少到 3 位，但是，对于许多十六进制颜色代码，我们无法将其减少到 3 位。请查看以下链接以获取进一步说明。
https://www.quackit.com/css/color/values/css_hex_color_notation_3_digits.cfmhttps://www.quackit.com/css/color/values/css_hex_color_notation_6_digits.cfm
https://www.quackit.com/css/color/values/css_hex_color_notation_3_digits.cfm https://www.quackit.com/css/color/values/css_hex_color_notation_6_digits.cfm
