f0a仅在原始色值为#ff00aa时安全，否则浏览器静默丢弃；它展开为#ff00aa而非#f000aa或#fa00aa，色值偏差达9单位，可导致可访问性失败。
什么时候#f0a是安全的，什么时候它会悄悄改掉颜色
3位hex（如#f0a）只有在原始6位值中每组两位完全相同时才等价——#ff00aa → #f0a 合法；#fe0123 → #f12 是错的，浏览器直接丢弃该声明。人眼无法从#f12反推真实RGB，调试时得手动展开验证，容易误判。
-
#333展开为#333333（R=G=B=51），不是#303030或#333334 -
#abc对应 R=170（aa）、G=187（bb）、B=204（cc），不是 R=10、G=11、B=12 - 设计稿给的
#8b4513不能手抖缩成#8b4：b≠4，4≠1，整个值失效
团队协作中6位hex是默认安全选项
设计师在Figma/Photoshop里导出的颜色默认是6位，贴过来就能用，不用脑内换算。Git diff、自动化可访问性检测（如axe-core）、CSS变量提取工具都更依赖完整6位格式——#3a86ff 比 #38f 更易被正则匹配、更少歧义、Code Review时一眼确认通道值。
- Sass/Less等预处理器默认不自动展开3位写法，但
getComputedStyle(el).color返回的永远是rgb()，原始写法信息丢失 - 压缩工具（如cssnano）只对真正可简写的做转换；你手动乱简，它不会报错，只会静默保留错误值
- CI流水线里做色值一致性校验时，
#fff和#ffffff被当作不同字符串处理，可能漏过比对
哪些场景下3位hex真有用
仅当满足两个条件时：颜色本身天然适合缩写（如#000、#fff、#f50），且项目无JS动态读取或自动化校验需求。它省的是字符数，不是维护成本。小图标、原子化class（如bg-#f00）这类纯静态、高频复用、无主题逻辑的场合，3位能略微减少体积。
- 注意：压缩工具通常会把
#000000转成#000，但反过来不会把#f0a转回#ff00aa——缩写是单向的，不可逆 - 如果你用PostCSS插件强制统一格式，别依赖它“修复”错误缩写，它只处理合法输入
-
#000和#000000视觉一致，但前者是简写形式，后者是完整表示；混用会让代码风格不一致，且增加diff噪音
8位hex（#RRGGBBAA）不是3/6位的延伸，而是另一套规则
#ff573380 这种写法属于CSS Color Module Level 4，不是“6位+alpha”的自然扩展。IE完全不支持，Safari直到15.4才稳定支持，工具链（如Less、某些CSS-in-JS库）可能解析失败。需要透明度时，优先用rgba(255, 87, 51, 0.5)或hsla()，而不是强行凑8位。
-
#ff573380中的80是十六进制alpha（128/255 ≈ 0.5），不是百分比，也不是小数 - 写成
#ff573350%或#ff57330.5会直接失效 - 即使浏览器支持，构建工具（如Vite + cssnano）可能把它当作非法值剔除，导致透明效果消失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
