HEX 用于不透明主色，RGBA 仅用于需透明度的场景；rgba() 的 alpha 必须为 0–1 小数，#RRGGBBAA 有兼容性限制且需 fallback，语义分层比写法统一更重要。
直接说结论：HEX 和 RGBA 不该“混用”，而应按语义分层使用——HEX 用于不透明主色，RGBA 仅用于带透明度的场景；强行统一写法反而放大维护成本和渲染偏差。
rgba() 的 alpha 参数必须是 0–1 小数，不是百分比或整数
这是最常被忽略的硬性语法限制。写成 rgba(0, 0, 0, 50%) 或 rgba(0, 0, 0, 50) 会导致整条声明被浏览器丢弃，回退到父级背景或默认色，调试时容易误判为“样式没生效”。
- 正确写法只有这一种：
rgba(37, 99, 235, 0.8)（对应品牌蓝#2563eb+ 80% 不透明） - JS 动态读取时，
getComputedStyle(el).backgroundColor返回的就是这种格式，无需额外解析 - 不要试图用 CSS 变量传入百分比再计算，
rgba()不支持 calc() 或变量插值
#RRGGBBAA 八位 HEX 是有条件启用的增强能力，不是“更高级的 HEX”
#RRGGBBAA 是 CSS Color Module Level 4 的特性，末两位 AA 表示 alpha 通道（如 #2563eb80 ≈ rgba(37, 99, 235, 0.502)），但它在 Safari 16.4 之前、Firefox 99 之前均不支持，旧版 Edge 完全不识别。
- 必须写 fallback：
background-color: #2563eb; background-color: #2563eb80; - VS Code、Stylelint、cssnano 等工具可能报错或误删该语法，除非明确启用 Level 4 支持
- 它无法参与
color-mix()、hwb()等新函数计算，也不被 CSS 自定义属性动态解析
团队代码风格统一的关键不是“写法一致”，而是“语义分层清晰”
真正引发混乱的不是用了 HEX 还是 RGBA，而是把 rgba() 当作“通用颜色写法”滥用——比如给文字色写 color: rgba(0, 0, 0, 0.87)，结果在深色模式下文字完全不可读。
- 主色体系（品牌色、中性色）全部用 HEX 或
rgb()，确保不透明、可预测、可复用 - 仅在明确需要透明度的场景才用
rgba()或hsla()：遮罩层、悬浮态背景、禁用态图标等 - 避免父子嵌套中叠加
rgba()：父设background-color: rgba(0, 0, 0, 0.87)，子再设rgba(55, 55, 77, 0.9)，视觉上不是加深，而是灰阶漂移
最易被忽略的一点是：RGBA 和 HEX 的混合不是技术问题，而是设计契约问题。一旦允许 #RRGGBBAA 进入代码库，就必须同步约束构建流程、CI 校验、设计师交付规范——否则某天上线后发现按钮在 Safari 里变黑，就不是改一行代码能解决的了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
