三位十六进制颜色无浏览器解析歧义，所有现代浏览器均将#rgb统一展开为#rrggbb；仅当rr、gg、bb各自成对相同时才可安全缩写，如#ff6600→#f60，而#fe0123不可缩，误缩会导致色值偏差。
三位十六进制颜色写法本身不会导致浏览器解析歧义——所有现代浏览器（Chrome、Firefox、Safari、Edge）都严格按同一规则展开 #rgb 为 #rrggbb，不存在“有的展开成 #r0g0b0，有的当成 #rrggbb”这种兼容性问题。真正容易出错的，是人对缩写的误判和混用。
哪些颜色能安全缩写为3位？
只有当六位值中每组两位完全相同时，才可无损缩写。本质是检查 RR、GG、BB 是否各自为重复字符。
-
#ff6600→ 可缩为#f60（因为ff、66、00都是双同值） -
#aabbcc→ 可缩为#abc -
#fe0123→ 不可缩（fe≠ff或ee，01≠00或11） -
#333333和#333等价，但#333334写成#334就会变成#333344，色值偏差极大
为什么 #999 不等于 #909090？
这是最常被误解的点：三位缩写不是“高位补零”，而是“单字复制”。#999 展开为 #999999（R=G=B=153），而 #909090 是灰阶中灰（R=G=B=144）。两者在视觉和数值上都不同。
-
#f0a→#ff00aa（不是#f000aa，也不是#fa00aa） -
#abc→ R=170（aa），G=187（bb），B=204（cc），不是 R=10、G=11、B=12 - 设计稿给的
#8b4513（巧克力棕）不能手抖简成#8b4——b≠4，4≠1，直接失效
什么时候三位写法反而增加维护成本？
缩写节省的是字符数，不是可读性或协作效率。实际项目中，它常在以下场景埋雷：
- 人工 Code Review 时，
#f0a需 mentally 展开才能确认是否符合设计规范；而#ff00aa一眼可见真实通道值 - 自动化工具（如 axe-core、Lighthouse）读取的是计算后颜色，但团队内部比对色值时，
#333和#333333看似一样，其实前者是简写，后者是完整写法——Git diff 里看不出差异，却可能掩盖误改 - CSS 预处理器（如 Sass）默认不展开三位写法，
#fff输出仍是#fff；但若后续要注入 JS 动态计算（比如getComputedStyle(el).color返回rgb(255, 255, 255)），原始写法信息已丢失 - 压缩工具（如 cssnano）只对可简写的做转换，但如果你手动乱简，工具不会报错，只会静默保留错误值
最隐蔽的风险在于：缩写合法 ≠ 语义清晰。当你在主题系统里把 #000 换成 CSS 变量 --text-primary 时，没人记得当初它是不是从 #000000 缩过来的——但如果你一开始就写 #000000，后续替换、调试、生成色板都更确定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
