你知道颜色有 4 位和 8 位十六进制代码（#11223344）吗？🤯

作为一名开发人员，我已经 10 年了，但不知何故，我却错过了颜色的 4 位数字（#1234）和 8 位数字（#11223344）十六进制代码⁉ 以下是我了解到的它们是什么以及我们如何使用它们！

不过，在我们开始之前，要向@afif （CSS 大师！）大声呼喊，在讨论如何使 SVG 从一侧淡出到另一侧时，他让我对此大开眼界！

喜欢在 Twitter 上消费内容吗？

顺便提一下，如果您更喜欢阅读 Twitter 帖子而不是长篇内容，那么我已经在这里创建了一个关于 4 位和 8 位十六进制代码的帖子：

8 位十六进制颜色代码起什么作用？

简而言之，它们与 RGBA 类似，本质上它们允许您使用最后 2 个字符添加不透明度。

因此，不要：

#RRGGBB

就像你在正常的 6 位颜色十六进制代码中所做的那样，你可以这样做

#RRGGBB AA

并使用最后两个字符添加不透明度值！

我整理了一个简短的演示，在这里展示了这一点，我使用相同的颜色代码（#336699），然后添加bb颜色代码使其变得半透明（#336699bb）：

对于 8 位十六进制颜色代码，有几个“陷阱”

从 RGBA 思维模式转变为 8 位十六进制代码系统需要一点点时间来适应！

前 6 个字符与以往相同，但不透明度现在的范围是 0-255（“00”到“ff”）

因此 00 仍然代表 0% 不透明度，但 255 (ff) 现在代表 100% 不透明度！

一些例子

为了更清楚地说明这一点，这里举几个例子：

不透明度	8 位十六进制代码等效值	解释
0%	#RRGGBB 00	十六进制的 00 仍然是 0
10%	#RRGGBB 1A	十六进制的 1A 是 26。26 是 255 的 ~10%（因此 26/255 =~ 10%）
50%	#RRGGBB 80	十六进制的 1A 是 128。128 是 255 的 ~50%（因此 128/255 =~ 50%）
90%	#RRGGBB E6	十六进制的 E6 是 230。230 是 255 的 ~90%（因此 230/255 =~ 90%）
100%	#RRGGBB FF	十六进制的 FF 是 255。255 是 255 的 100%（因此 255/255 = 100%）

希望现在情况变得更加清晰，但以防万一......

帮助理解 8 位十六进制代码的迷你工具！

这个工具有望帮助人们理解这一点（如果还没有的话）

解释

输入您想要使用的原始颜色，可以使用颜色选择器、十六进制颜色或 RGB 颜色（我遇到了 HSL 问题，因此我已禁用这些输入😪）。

然后移动不透明度滑块或输入不透明度值。

在其下方，您将看到一个部分，其中包含您的最终颜色代码和条纹背景上显示的结果颜色（当然假设您降低不透明度！）

下面进一步解释了它生成的十六进制代码。它还会告诉你是否可以使用 4 位十六进制代码（更多内容请见演示！）

8 位十六进制代码演示！

玩一玩吧，虽然没有太多的错误检查，所以请检查您输入的数字是否有效，否则……结果可能是🔥💻🚒！🤣

4 位十六进制颜色代码

如果您长时间地使用上述示例，您可能已经注意到偶尔您会在“结果”或“详细信息”部分中得到一个有效的 4 位十六进制代码。

那么这到底是如何实现的呢？

规则很简单：

R1 = R2
G1 = G2
B1 = B2
A1 = A2

如果以上所有情况均为真，那么您可以通过将 R1、G1、B1 和 A1 组合起来，将 8 位十六进制代码转换为简写 4 位十六进制代码！

4 位十六进制代码示例：

#22446688✅: 可以缩写为 2==2 and 4==4 and 6==6 and 8==8。它将变为#2468
#22456688 ❌: 由于 G1 和 G2 不同 (4!==5)，因此无法缩短。您必须使用完整的 8 位十六进制代码#22456688。
#AA4488DD✅: 再次，R1==R2（A==A），G1==G2（4==4）等。因此，这可以转换为 4 位十六进制代码（#A48D）

让它变得更容易一点！

试图记住“BF”在十进制中是 191，即 255 的 75%，这很难！

因此我创建了这个超级方便的表格，其中包含所有代码（或者您可以使用我之前链接的十六进制不透明度演示）

不透明度与十六进制代码转换表

如果您愿意，可以跳过这张长表，但可能值得将这篇文章加入书签，以便您可以将其用作参考！

不透明度百分比	相当于 0-255 范围内的值）	十六进制代码
100%	255	FF
99%	252	FC
98%	250	足总杯
97%	247	F7
96%	245	F5
95%	242	F2
94%	240	F0
93%	237	勃起功能障碍
92%	235	EB
91%	232	E8
90%	230	E6
89%	227	E3
88%	224	E0
87%	222	德
86%	219	数据库
85%	217	D9
84%	214	D6
83%	212	D4
82%	209	D1
81%	207	囊性纤维化
80%	204	抄送
79%	201	C9
78%	199	C7
77%	196	C4
76%	194	C2
75%	191	高炉
74%	189	屋宇署
73%	186	文学学士
72%	184	B8
71%	181	B5
70%	179	B3
69%	176	B0
68%	173	广告
67%	171	AB
66%	168	A8
65%	166	A6
64%	163	A3
63%	161	A1
62%	158	9E
61%	156	9C
60%	153	99
59%	150	96
58%	148	94
57%	145	91
56%	143	8楼
55%	140	8摄氏度
54%	138	8A
53%	135	87
52%	133	85
51%	130	82
50%	128	80
49%	125	7D
48%	122	7A
47%	120	78
46%	117	75
45%	115	73
44%	112	70
43%	110	6E
42%	107	6B
41%	105	69
40%	102	66
39%	99	63
38%	49	31
37%	94	5E
36%	92	5摄氏度
35%	89	59
34%	87	57
33%	84	54
32%	82	52
31%	79	4楼
30%	77	4D
29%	74	4A
28%	71	四十七
27%	69	45
26%	66	四十二
25%	64	40
24%	61	3D
23%	59	3B
22%	56	三十八
21%	54	三十六
20%	51	33
19%	四十八	三十
18%	46	2E
17%	43	2B
16%	41	二十九
15%	三十八	二十六
14%	三十六	24
13%	33	21
12%	31	1楼
11%	二十八	1C
10%	二十六	1A
9%	23	17
8%	20	14
7%	18	12
6%	15	0F
5%	十三	0D
4%	10	0A
3%	8	08
2%	5	05
1%	3	03
0%	0	00

总结一下 8 位十六进制代码！

这样，您就快速了解了 4 位和 8 位十六进制代码！

如果您想了解更多信息，以下资源可能会有用：W3 CSS 颜色模块级别 4

如果您喜欢这篇文章...

我希望你喜欢这篇文章。

如果您愿意的话，能否帮我一个忙，转发我写的有关此事的推特帖子？

这确实会对我有帮助，我会非常感激，因为我今年正在努力增加我的推特关注者！

提前致谢并感谢您的阅读！

最后一点愚蠢

哦，因为我不知道这一点，所以现在是时候根据@alvaromontoro归还我的开发者卡了，知道你可以依靠朋友来支持你总是件好事！🤣

鏂囩珷鏉ユ簮锛�https://dev.to/grahamthedev/hold-on-there-are-4-and-8-digit-hex-codes-for-colours-261i