CSS3 在 CSS2.1 颜色基础上新增 rgba()、hsla() 和 hsl()，支持颜色级透明度与更直观的调色逻辑；八位十六进制 #RRGGBBAA 属 Level 4，兼容性有限；HSL 的 L 值非线性，需注意亮度映射特性。
CSS3 没有“取代”CSS2.1 的颜色表示方式，而是直接在其基础上增加新语法，所有 CSS2.1 支持的写法（red、#FF0000、rgb(255, 0, 0)）在 CSS3 中完全有效。
新增 rgba() 和 hsla()：透明度不再污染子元素
CSS2.1 只能用 opacity 控制整个元素的透明度，它会把文字、边框、子元素全部变淡，且无法单独恢复其中某一部分。CSS3 引入的 rgba() 和 hsla() 把 alpha（透明度）绑定到颜色值本身，只影响当前属性：
-
background-color: rgba(0, 0, 0, 0.3)→ 半透黑背景，文字仍 100% 不透明 -
border-color: hsla(200, 80%, 50%, 0.7)→ 半透蓝边框，不影响内部文字或背景 - 错误写法：
color: rgba(255, 0, 0, 0.5); opacity: 0.5→ 透明度叠加，实际接近 0.25，且子元素也被压暗
hsl() 和 hsla()：调色逻辑更贴近人眼直觉
RGB 是面向设备的数值模型，改一个颜色常要反复试；HSL 把颜色拆成色相（H）、饱和度（S）、亮度（L），每个参数含义明确：
-
hsl(0, 100%, 50%)是纯红，hsl(120, 100%, 50%)是纯绿 —— 色相值直接对应色轮角度 - 想让主色变浅？升
L值，比如从hsl(200, 80%, 50%)改成hsl(200, 80%, 80%) - 想让它变灰？降
S值，比如hsl(200, 30%, 50%)，不用动 R/G/B 三个数 - 注意陷阱：
L: 0%是纯黑，L: 100%是纯白，L: 50%才是“标准饱和色”，调错容易得到灰黑或灰白，而非预期的浅蓝/深蓝
兼容性不是“CSS3 新就旧浏览器不认”，而是按函数渐进落地
所谓“CSS3 颜色”本质是 CSS Color Module Level 3 标准，它不是一次性全支持，而是按函数分批实现：
立即学习“前端免费学习笔记（深入）”；
-
hsl()、rgba()、hsla()在 IE9+、Chrome 1+、Firefox 3+ 就已支持，不是现代浏览器专属 - 真正不支持的是 IE8 及以下：它们只认
red、#FF0000这类老写法，遇到hsla(0, 0%, 0%, 0.5)会直接忽略整条声明 -
#RRGGBBAA（八位十六进制）是 Level 4 特性，仅 Chromium 111+ 和 Safari 16.4+ 支持，Firefox 128 才刚加入，不能当作通用方案 - 回退建议：用老写法兜底，比如
color: #0000ff; color: hsla(240, 100%, 50%, 0.8)，低版本 IE 用前者，现代浏览器覆盖后者
真正容易被忽略的是 HSL 的 L（亮度）不是简单“明暗调节”，而是一个非线性映射：它控制的是颜色在黑白之间的位置，不是 RGB 意义上的“加减光”。调 L 值时若没意识到这点，很容易把想要的浅蓝色调成灰白，或者把深红色调成纯黑。
