CSS | 3 位十六进制颜色

在 CSS 中，我们可以使用十六进制颜色值来定义我们想要的颜色。3 位十六进制颜色是一种缩写形式，可以将 6 位十六进制颜色值缩写为 3 位。

什么是 3 位十六进制颜色？

3 位十六进制颜色是一种缩写形式，可以将 6 位十六进制颜色值缩写为 3 位。它适用于所有颜色，不过只适用于相同的 RGB 值。例如，#336699 可以被缩写为 #369。

示例：

/* 6 位颜色值 */
color: #336699;

/* 3 位颜色值 */
color: #369;

如何使用 3 位十六进制颜色？

在 CSS 中，我们可以使用 3 位十六进制颜色值来定义我们想要的颜色。只需要将 6 位十六进制的颜色值缩写为 3 位即可。

示例：

/* 6 位颜色值 */
color: #336699;

/* 3 位颜色值 */
color: #369;

3 位十六进制颜色缩写规则

使用 3 位十六进制颜色值，需要满足以下两个条件：

1. RGB 的各个颜色分量的高位和低位相同，例如 #336699 可以缩写为 #369。

2. 使用 3 位十六进制颜色时，需要在每个颜色分量前添加一个相同的字符，例如 #369 可以看作是 #336699 的缩写形式。

示例：

/* 6 位颜色值 */
color: #FF0000;

/* 3 位颜色值 */
color: #F00;

总结

使用 3 位十六进制颜色可以大大简化颜色值的长度，并且不影响颜色的显示效果。不过需要注意的是，使用 3 位十六进制颜色时，需要满足特定的缩写规则，否则将不能正确解析颜色值。

最后，我们也可以使用一些在线工具来自动生成 3 位十六进制颜色值，例如 3-digit Color Tool。