只有#rrggbb中每组两位相同（如#ff6600）才能缩写为#rgb；#rgba同理需满足#rrggbbaa且IE10+支持；非法缩写会被浏览器直接丢弃。
哪些#rrggbb能缩写成#rgb
只有当六位十六进制颜色中，每组两位完全相同时，才能安全缩写为三位——比如#ff6600可缩为#f60，因为ff→f、66→6、00→0；但#fe6601不行，哪怕只有一组不满足（fe≠ff、01≠00），整个缩写就非法。
浏览器遇到不合规的缩写（如#f601、#fg0、#1234）会直接丢弃整条颜色声明，不会 fallback，也不会报错提示。
#rgb和#rgba的合法性与解析规则
#rgb是三位十六进制颜色，对应#rrggbb的压缩形式；#rgba是四位，对应#rrggbbaa，其中最后一位是 alpha 通道（透明度），每个字符重复一次展开：例如#447c → #444477cc，即rgba(68, 68, 119, 0.8)。
关键限制：
立即学习“前端免费学习笔记（深入）”；
-
#rgb和#rgba都必须以#开头，缺#（如447c）或长度不对（如#447cc五位）均为无效值 -
#rgba是 CSS3 特性，IE9 不支持，需 IE10+；而#rgb在 IE9+ 才开始被支持，IE8 及更早版本会忽略 - 工具链（如 Autoprefixer、cssnano）默认不转换颜色缩写，也不修复非法写法——它不认为这是兼容性问题，而是语法错误
编辑器和构建工具对缩写的实际影响
VS Code、WebStorm 等编辑器可能在保存时自动把#aabbcc转成#abc，但这依赖插件且仅对纯 CSS 中的字面量生效；CSS-in-JS 字符串、变量、自定义属性里的值通常不会被改动。
真正可控的自动化发生在构建环节：
-
postcss-color-hex-alpha可处理带 alpha 的八位 hex（#rrggbbaa），但不碰四位#rgba -
cssnano的reduceColor选项默认开启，只压缩合法的六位色（如#aabbcc→#abc），绝不会把#123456乱改成#123
团队协作中该用六位还是三位写法
六位写法（如#3a86ff）是更稳妥的选择：
- 避免缩写带来的歧义（比如
#123到底是#112233还是#102030？浏览器按规则只能是前者，但人容易看错） - 正则提取、主题色提取、设计系统对接都更可靠——六位格式有稳定长度和结构
- 需要透明度时，别用非标准的八位 hex（如
#3a86ff80），它在部分工具链里无法解析，优先用rgba()或rgb(58 134 255 / 50%)
四位#rgba虽简洁，但它的 alpha 是十六进制单字符（0–f），换算成小数不够直观，且叠加效果严重依赖背景色——这点常被忽略，却直接影响 UI 一致性。
