CSS颜色简写规则全解析

CSS中的十六进制颜色简写并非任意缩略，而是有严格规则：仅当六位颜色值#RRGGBB中红、绿、蓝各通道的两位十六进制数完全相同（如#ff、#aa、#00）时，才能安全简化为三位形式#RGB；浏览器会自动将每位复制一次展开为#RRGGBB，确保颜色精准还原——掌握这一“成对一致、单字复刻”的核心逻辑，既能精简代码体积，又能避免因误简写（如#ffcc01→#fc1）导致的颜色错乱，是前端开发中高效又可靠的实用技巧。

在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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！