RGB 是 #RRGGBB 的合法简写，仅当每位十六进制数重复出现时成立，如 #F0C 等价于 #FF00CC；否则如 #123456 不可简写，误用将导致样式失效。
#RGB 是 #RRGGBB 的简写形式，仅当每对通道值相同时才合法
#RGB 不是另一种颜色系统，而是 #RRGGBB 的压缩写法。它只在 R=R、G=G、B=B 的前提下成立——比如 #F0C 等价于 #FF00CC，因为把每个字符各自“拉长”一次就还原了：F→FF，0→00，C→CC。但 #123456 无法简写成 #123456 的任何三位形式，因为 1≠2、2≠3、3≠4……不满足重复条件。
-
#abc合法，等价于#aabbcc -
#ab1合法，等价于#aa bb 11（即#aa bb 11→#aa bb 11→#aa bb 11） -
#1234、#abcd、#rgb（字面量）全都不合法——CSS 解析器会直接忽略整条声明
浏览器解析时自动扩展，但开发者不能依赖“看起来像”的简写
你写 color: #fae;，浏览器会按规则转成 #ffaaee；但如果你误写成 #fabe（4位），或 #fabf（还是4位），它不会报错，而是整个值被当作无效，退回到继承色或初始值（通常是黑色或透明）。这种失效非常隐蔽，尤其在多人协作或复制设计稿时容易漏检。
- 所有现代浏览器都支持
#RGB和#RRGGBB，无兼容性差异 - 工具链（如 PostCSS、Tailwind JIT）通常能识别并保留简写，但某些 CSS 压缩工具（如 cssnano 默认配置）会强制展开为 6 位，以防意外
- 设计师给的色值如果是
#FF6B35，千万别手抖改成#F63——那其实是#FF6633，偏橙红，不是原色
什么时候该用简写？什么时候必须写全？
简写的价值只在「减少字符数」和「提升可读性」之间平衡，不是越短越好：
- ✅ 适合简写：
#000、#fff、#369、#c0c—— 这些一眼能看出是灰阶、白、蓝紫、粉红，且确实符合重复规则 - ❌ 不该简写：
#e63e75（想简成#e37？错，那是#ee3377）、#2a9d8f（#298=#229988，绿偏青，失真明显） - ⚠️ 特别注意：品牌色、无障碍对比度临界值（如 WCAG 要求文本对比度 ≥4.5:1）必须用全写校验，简写会掩盖真实通道强度
容易被忽略的细节：大小写、空格与前置#不可省略
#FF0000 和 #ff0000 完全等价，CSS 不区分大小写；但 ff0000（缺 #）或 # ff0000（带空格）就是无效值。另外，Android 的 ARGB 扩展格式（如 #88FF0000）不属于标准 CSS HEX，不能混用——CSS 中的 #RRGGBB 永远只有 6 位（或 3 位），多一位或少一位都会失效。
立即学习“前端免费学习笔记（深入）”；
-
#000是合法的，000不是 -
#F0F0F0可简为#F0F，但#F0F0F0更利于后续用 JS 动态计算（比如变暗：parseInt('F0', 16) <em> 0.8 → 240 </em> 0.8 = 192 → C0） - 如果你在写 CSS-in-JS 或动态生成样式，建议统一用
#RRGGBB格式——避免字符串长度判断逻辑出错
真正麻烦的从来不是“怎么写”，而是“为什么看起来对却没生效”——多数时候，是简写误用或复制粘贴时混入不可见字符导致的。
