浏览器将#rgb三位缩写按规则展开为#rrggbb六位，如#f0a→#ff00aa；#fff和#000分别对应#ffffff与#000000，r=g=b=255或0；所有现代浏览器严格遵循此标准，无兼容性差异。
三位十六进制颜色怎么被浏览器解析
浏览器对 #rgb 这类三位缩写色值的处理是确定且统一的：每个字符会被**重复一次**，扩展为六位。比如 #f0a 实际等价于 #ff00aa，不是 #f000aa 或其他组合。
这个规则由 CSS Color Module Level 4 明确规定，所有现代浏览器（Chrome/Firefox/Safari/Edge）都严格遵循。不存在“有的浏览器当 #f000aa、有的当 #ff00aa”这种兼容性问题。
常见误解是以为三位缩写按字面位置映射到 R/G/B 的高四位，但实际没有“高位填充”逻辑——就是简单复制：第一位→RR，第二位→GG，第三位→BB。
为什么 #fff 是白色而 #000 是黑色
因为 #fff 展开为 #ffffff，R=G=B=255；#000 展开为 #000000，R=G=B=0。这和六位写法完全一致，没有额外转换步骤。
容易踩的坑：
-
#999≠#909090（有人误以为是“补零”，其实是#999999） -
#abc不代表 R=10, G=11, B=12，而是 R=170（0xaa）, G=187（0xbb）, B=204（0xcc） - 预处理器（如 Sass）里写
#fff会原样输出，不展开；但浏览器渲染时仍按复制规则解析
三位缩写和六位写法在计算与继承中表现一致吗
是的，解析完成后，CSS 引擎内部只认六位（或八位）数值，#f0a 和 #ff00aa 在 computed style、color interpolation、transition 动画、Canvas 绘图等所有后续环节中完全等价。
但要注意两个实际差异点：
- DevTools 的 computed 面板通常显示为六位格式（即使你写了三位），这是展示行为，不影响逻辑
- 使用
getComputedStyle(el).color获取时，返回的是rgb(255, 0, 170)这类函数式表示，不是原始字符串，所以无法通过 JS 直接判断原始写法是三位还是六位 - 某些 CSS 压缩工具（如 cssnano）默认会把
#ff00aa改成#f0a，前提是能无损压缩——这意味着它们也依赖同一套解析规则
什么时候不该用三位缩写
当颜色本身无法用“每位重复”无损表达时，三位缩写就不可用。例如 #fe0123 不能缩写为三位，因为 #f02 展开后是 #ff0022，和原值偏差极大。
更隐蔽的问题出现在可访问性检测或自动化工具中：
- 对比度分析工具（如 axe-core）读取的是 computed color，不受写法影响；但人工审查 CSS 源码时，三位缩写可能掩盖真实色值，增加误判风险
- 设计系统文档若混用三位/六位，会导致开发难以快速比对色值是否一致（比如
#333vs#333333看似一样，但前者是#333333，后者也是#333333——其实相同；但#334和#333444就完全不同） - 团队协作中，建议约定统一用六位（除非追求极致体积且确认所有目标色都支持三位缩写），避免因视觉错觉引发颜色 bug
三位缩写的本质是语法糖，不是新颜色模型。它省下的那几个字节，在 HTTP/2 或 gzip 后几乎可以忽略，但带来的可读性成本有时远高于收益。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
