可直接使用 rgba() 和 hsla()（IE9+ 等现代浏览器均支持），需注意 fallback 顺序、opacity 与颜色 alpha 的区别、hsl() 适合主题色调节，#RRGGBBAA 兼容性差仍不推荐。
看目标浏览器是否支持 rgba() 和 hsla()
如果项目明确不兼容 IE8 及更早版本（比如最低支持 IE9、Chrome 1+、Firefox 3+），rgba() 和 hsla() 就可以直接用，不用 fallback。这些函数在 2011 年前后就已稳定落地，不是“新特性”。
真正要拦住的是旧 WebView 或企业内网遗留环境：比如 Android 4.3 的系统 WebView 不支持 hsl()，部分国产浏览器定制内核会跳过整个声明。这时得加一层十六进制回退：
.btn {
background-color: #007bff;
background-color: hsla(206, 100%, 50%, 0.9);
}
注意顺序：老浏览器忽略不认识的函数，取前一行；新浏览器覆盖后一行。不能反过来写。
透明度需求是否绑定到颜色本身
如果只是让整个按钮变半透，用 opacity 最省事；但一旦文字、图标、边框也要保持不透明，就必须用 rgba() 或 hsla()——因为 opacity 会把子元素一起压暗，而颜色级 alpha 只作用于当前属性值。
-
background-color: rgba(0, 123, 255, 0.1)→ 背景微透，文字照常清晰 -
opacity: 0.1→ 整个按钮包括文字都几乎看不见
常见翻车点：给带图标的按钮设 opacity，结果图标也变淡，又额外加 opacity: 1 到图标上，引发层叠上下文问题。直接用 rgba() 更干净。
主题色是否需要批量明暗/饱和度调节
如果项目有深色模式、高对比度模式或设计系统要求“主色 + 3 档浅色变体”，hsl() 是唯一合理选择。改一个 l 值就能控制明暗，不用反复换算 RGB 数字。
例如：
:root {
--primary-hue: 206;
--primary-sat: 100%;
--primary-light: 50%;
}
.text-primary { color: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light)); }
.text-muted { color: hsl(var(--primary-hue), var(--primary-sat), 30%); }
换成十六进制就得维护一堆独立色值，一调全崩。但要注意：l: 0% 是黑，l: 100% 是白，中间 50% 才是“标准饱和色”——调错亮度可能意外得到灰黑，而不是想要的深蓝。
#RRGGBBAA 现在能放心用吗
不能。八位十六进制（如 #007bff80）是 CSS Color Module Level 4 特性，目前仅 Chromium 111+、Safari 16.4+、Firefox 120+ 支持。IE、Android WebViews、旧版 Edge 全部静默忽略，连 fallback 都不触发。
更麻烦的是编辑器支持差：VS Code 对 #RRGGBBAA 的语法高亮常误判为非法 HEX，容易掩盖真实拼写错误。实际项目中仍建议优先用 rgba() 或 hsla()，它们解析稳定、调试直观、工具链支持成熟。
真正容易被忽略的是：无障碍对比度必须基于最终渲染色验证，而不是你写的 rgba() 值——浏览器 alpha 混合后实际颜色会变，得从 DevTools 的 “Computed” 面板里复制 resolved rgb 值再测。这点无论用哪种颜色写法都绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
