CSS十六进制颜色简写规则详解

CSS中的十六进制颜色简写并非任意缩略，而是严格遵循“每对字符相同才能三合一”的规则：只有当六位颜色值 #RRGGBB 中的红、绿、蓝各通道的两位十六进制数完全一致（如 #ff、#aa、#00）时，才可安全简写为 #RGB 形式，浏览器会自动将每位复制一次还原为 #RRGGBB；反之，只要任一通道两位不同（如 #01、#ab），简写就会失效甚至导致颜色错误——掌握这一简洁却精准的机制，既能显著减少CSS代码体积，又能确保色彩表现万无一失。

在CSS中，十六进制颜色值可以简写，前提是满足特定条件。十六进制颜色通常以 # 开头，后面跟6位十六进制数字（如 #0000FF 表示蓝色），但当每对字符相同的时候，可以用3位简写形式表示。

六位与三位十六进制颜色的对应关系

六位写法格式为 #RRGGBB，分别代表红、绿、蓝三个通道的颜色值，每个通道占两位十六进制数。如果红色两位相同、绿色两位相同、蓝色两位也相同，就可以简化为三位写法 #RGB，其中每一位代表原六位中每对的第一个字符。

例如：

• #ffffff → 可简写为 #fff
• #000000 → 可简写为 #000
• #ffcc00 → 可简写为 #fc0
• #336699 → 可简写为 #369

注意：像 #ffccaa 这种虽然接近，但因为“aa”是相同的，而“ff”和“cc”也各自成对，所以仍可简写为 #fca。只要每对字符相同即可简写，不要求三组一致。

不能简写的情况

如果某一个颜色通道的两位十六进制数不相同，则不能使用三位简写。浏览器会将其解析为错误或默认处理方式，可能导致颜色显示异常。

例如：

• #ffcc01 → 不能简写为 #fc1（因为“01” ≠ “00” 或 “11”）
• #123456 → 无法简写，因为“12”、“34”、“56”都不是重复字符

浏览器如何解析三位简写

当你使用三位写法如 #abc 时，浏览器会自动将其扩展为六位：#aabbcc。也就是说，每位被复制一次。

具体转换规则：

• #f06 → #ff0066（粉红色）
• #3a9 → #33aa99（青绿色调）

这种机制让简写既节省代码体积，又保持颜色准确。

基本上就这些。只要记住：每对相同才能简写，三位变六位是“单字复制成双”，这样用起来就不会出错。

以上就是《CSS十六进制颜色简写规则详解》的详细内容，更多关于的资料请关注golang学习网公众号！