应优先使用 rgba() 和 hsla() 而非 opacity 或 hsl 转换：rgba() 直接适配设计稿 rgb 值与后端结构，零成本；hsla() 便于主题切换与明暗调节，语义清晰；新式 rgb(0 0 0 / 0.5) 需配 fallback，避免兼容性问题。
设计稿给的是 RGB 值，直接用 rgba() 就行
设计师导出的 Figma/Sketch 色值通常是 rgb(34, 128, 222) 或十六进制 #2280DE，转成 rgba(34, 128, 222, 0.8) 零成本，不用查表、不需换算 HSL。后端 API 返回的 color 字段如果是 { r: 255, g: 100, b: 50, a: 0.7 } 这类结构，拼接 rgba() 一行就能用，而转 HSL 要调用额外函数或依赖库，徒增风险。
要做主题切换或批量配色，优先选 hsla()
暗色模式下只需统一调低 L 值：--primary: hsl(200, 80%, 60%) → hsl(200, 80%, 30%)；悬停态只要微调 S 或 L，比如 hsla(200, 90%, 50%, 0.9)，语义清晰、调试直观。用 rgba() 实现类似效果就得反复试 R/G/B 组合，容易偏色、难复用。
新写法 rgb(0 0 0 / 0.5) 必须配 fallback
现代浏览器支持斜杠分隔的 alpha 写法，但 Safari 16.3 及更早、部分安卓 WebView 会直接忽略整条声明，导致背景变透明而非降级为实色。
- 错误写法：
background-color: rgb(0 0 0 / 0.5); - 正确写法：
background-color: #000; background-color: rgb(0 0 0 / 0.5); - 别用
opacity替代：它会让文字、子元素一起变淡，而rgba()/hsla()只作用于颜色本身
实际项目里混用很常见，但得清楚每处为什么这么选
按钮背景用 hsla() 是为了明暗调节方便，边框用 rgba() 是因为设计标注了具体 RGB 值，图标填充色用十六进制是因为设计师锁定了品牌色不可微调。选错一个，后期改一套主题时就得重算几十个 RGB 值——不是不能做，是没必要给自己加这道工序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
