必须用 rgba() 而非 #RRGGBB 是因后者无透明度，#RRGGBBAA 兼容性差且计算反直觉；rgba() 语义清晰、js 可读可算，支持 calc() 和 css 变量动态控制 alpha。
HEX、RGB、RGBA 不是“选一个用”，而是按场景切换：品牌色用 #RRGGBB，动态调色用 rgb()，需要透明度时优先用 rgba() —— 不是语法偏好问题，是可维护性与浏览器行为的现实约束。
什么时候必须用 rgba() 而不能只靠 #RRGGBB？
因为 #RRGGBB 本身不带透明度信息；即使现代浏览器支持 #RRGGBBAA（如 #0000FF80），它的 alpha 值是十六进制（00–FF），计算反直觉，且旧版 safari（≤13.1）和部分 android webview 会直接忽略它，退化为不透明色。
- 真正安全、语义清晰、JS 可读可算的透明色写法只有
rgba(r, g, b, a)，其中a是 0–1 的小数 - 常见错误：给
background-color: #0000FF80加了透明度却在 ios 上看到纯蓝——不是代码写错，是浏览器不认 - 若需 CSS 变量动态控制透明度，
rgba()可配合calc()或自定义属性（如--alpha: 0.6），而 HEX+alpha 无法参与计算
rgb() 和 rgba() 的参数陷阱：百分比 vs 整数
CSS 允许 rgb(100%, 0%, 0%) 和 rgb(255, 0, 0) 并存，但它们不是等价替换——尤其在动画或 transition 中，浏览器对不同单位的插值逻辑可能不一致（例如 chrome 对百分比插值更保守，而整数插值更线性）。
- 推荐统一用 0–255 整数：兼容性稳，JS 生成方便（
math.round()直接适配），设计工具导出也默认此格式 - 避免混用：
rgba(100%, 0%, 0%, 0.5)看似合理，但某些低版本 edge 曾因此触发渲染异常 - 注意 alpha 参数只能是小数（
0.5）或无单位数字，不能写50%—— 这是语法错误，浏览器会整个声明失效
HEX 简写 #RGB 和完整写法 #RRGGBB 的隐含风险
#F00 等价于 #FF0000，看似省事，但一旦后续要微调（比如把红调暗一点），你就得先“脑补”展开成六位，再手动改 —— 比如想改成 #E00，实际是 #EE0000，而非 #E00000（后者根本不存在）。这种认知负担在批量改色时会放大。
- 团队协作中，建议禁用三位简写：figma/Sketch 导出默认六位，git diff 更清晰（
#FF5733→#EE4D2E比#F53→#E4D更易追踪） - 自动化构建工具（如 postcss）可配置强制展开三位 HEX，避免人工疏漏
- 不要为了压缩几字节而牺牲可维护性——gzip 后
#FF5733和#F53差距几乎为零
.btn-primary { background-color: rgb(255, 87, 51); /* #FF5733，明确三通道值 */ } .btn-primary:hover { background-color: rgba(255, 87, 51, 0.8); /* 保留色相，仅降透明度 */ } .card-overlay { background-color: rgba(0, 0, 0, 0.6); /* 黑底半透，安全可靠 */ }真正容易被忽略的点：当你用 JS 动态读取元素颜色（getComputedStyle(el).backgroundColor），返回的永远是 rgb() 或 rgba() 格式，哪怕你写的是 #FF5733。别指望它保持原始写法——CSS 解析器早就把它标准化了。