17370845950

必须用 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 解析器早就把它标准化了。