合法HEX短写法仅#RGB形式（如#f00），节省3字符；#F53等非法写法会导致解析歧义；命名色仅transparent等少数比HEX更短，且存在兼容性差异；#RRGGBBAA比rgba()省字数但IE不支持；自动化工具压缩更可靠。
HEX短写法能省多少字节？别信#F53这种“简写”
真正合法的短十六进制只有 #RGB 形式（如 #f00），它等价于 #ff0000，节省 3 字符。但 #F53 是非法写法——浏览器会按 #FF5533 解析，而你肉眼根本分不清它是 #F05030 还是 #FF5533，调试时极易误判。
常见误区：
-
#111确实比#111111省 3 字，但仅当 R/G/B 值完全相同时才成立；#123不等于#112233，它会被解析为#112233——这是规范强制行为，不是优化 - 构建工具（如 PostCSS）能自动压缩 HEX，但人工替换易漏：比如
#1a1a1a可缩为#111，但#1a1b1c就不能缩，靠人眼判断效率低且不可靠 - 团队协作中混用
#fff和white会导致语义割裂，后续搜索替换困难
颜色关键字真能减体积？只看字符数就错了
标准命名色里，真正比对应 HEX 更短的只有极少数：transparent（7 字符）比 rgba(0,0,0,0)（13 字符）或 hsla(0,0%,0%,0)（16 字符）明显更优；currentColor、inherit、initial、unset 属于 CSS 关键字，非颜色名但常被误归类，它们都比任何 RGB/HEX 表达更紧凑。
但要注意：
立即学习“前端免费学习笔记（深入）”；
-
red（3 字符）虽比#f00（4 字符）短 1 字，但渲染结果在部分旧浏览器中存在微小差异（#f00更精确） -
lightcoral（10 字符）比对应 HEX#f08080（7 字符）还长，且无法被 gzip 高效压缩（因无重复模式） - 所有命名色共 140 个，超出范围的如
coolgray或slateblue（注意拼写）属于无效值，会被浏览器静默忽略
RGBA/HSLA vs HEX+alpha：透明度写法的体积与兼容性权衡
现代项目可用 #RRGGBBAA（如 #FF573380），8 字符，比 rgba(255,87,51,0.5)（19 字符）省一半以上。但它在 IE 全系不支持，老安卓 WebView（如 Android 4.4）也直接失效。
替代方案对比：
-
rgba(0,0,0,0.5)：15 字符，全浏览器支持，alpha 必须是 0–1 小数，rgba(0,0,0,50%)无效 -
hsla(0,0%,0%,0.5)：16 字符，语义更强，但部分旧版 WebView 对hsla()解析异常，稳妥起见优先选rgba() - 若只需纯黑/白半透，
rgba(0,0,0,0.5)比hsla(0,0%,0%,0.5)少 1 字符，且更直白
构建流程中自动化压缩颜色代码的关键点
手动统一颜色写法成本高、易出错，尤其在主题色频繁变更或多人并行开发时。靠谱做法是交给工具链处理：
- PostCSS 插件
postcss-color-short可将#ff0000→#f00，但默认不处理命名色，需额外配置postcss-color-function支持color(display-p3 ...)等新语法 - Webpack 的
css-minimizer-webpack-plugin默认开启 HEX 短写压缩，但不会把rgb(255,0,0)转成#f00—— 因为语义不同（rgb 可能参与 JS 计算） - 最易被忽略的是：SCSS 中的
lighten(#FF5733, 10%)输出结果依赖 SASS 编译器算法，和纯 CSS 的color-mix(in srgb, #FF5733 90%, white)行为不一致，跨技术栈时会导致颜色漂移
真正卡体积的往往不是单个颜色值，而是同一色值在不同上下文反复出现又写法不一 —— 所以优先用 CSS 自定义属性统一管理，再让构建工具压缩，比硬抠字符数更可持续。
