RGB/HSL 写 CSS 渐变更灵活可控：支持透明度（rgba/hsla）、直观调色（HSL 明度/饱和度可调）、适配 CSS 变量与计算、兼容 IE9+；Hex 仅适用于静态单色场景。
用 RGB（或 HSL）写 CSS 渐变更灵活、更可控，Hex 在简单单色渐变里够用，但遇到透明度、颜色调整、可维护性需求时明显吃力。
透明度支持：RGB/HSL 直接写 alpha，Hex 得靠 rgba() 或新式 #RGBA
传统 Hex（如 #3498db）不支持透明；想做半透渐变（比如 to bottom, rgba(52, 152, 219, 0.8), rgba(46, 204, 113, 0)），必须用 RGB 或 HSL。虽然现在有 4 位/8 位 Hex（#3498db80），但兼容性仍弱于 rgba()，且无法动态调节透明度（比如用 CSS 变量或 calc）。
- ✅ 推荐：
background: linear-gradient(to right, rgba(52, 152, 219, 0.9), hsla(140, 70%, 55%, 0)) - ⚠️ 慎用：
#3498db80—— Safari 16.4+ 才完全支持，旧版 iOS Safari 不认
颜色调整与计算：HSL/RGB 更直观，Hex 难以微调明度或饱和度
渐变常需“同一色系不同深浅”，比如从蓝到更深的蓝。用 HSL 写 hsl(200, 100%, 50%) → hsl(200, 100%, 25%) 一眼看出是加深（只调亮度），而 Hex 得查表换算或依赖工具，易出错。
- ✅ 调色友好：
linear-gradient(hsl(190, 80%, 60%), hsl(190, 80%, 30%)) - ❌ 维护困难：
#2980b9 → #1c5a80看不出关联，改深浅得重新取色
变量与复用：CSS 自定义属性天然适配 RGB/HSL，Hex 嵌套受限
想统一管理主题色？用 CSS 变量 + RGB/HSL 可直接参与计算：
立即学习“前端免费学习笔记（深入）”；
:root {
--primary-h: 200;
--primary-s: 90%;
--primary-l-start: 60%;
--primary-l-end: 30%;
}
.gradient {
background: linear-gradient(
to bottom,
hsl(var(--primary-h), var(--primary-s), var(--primary-l-start)),
hsl(var(--primary-h), var(--primary-s), var(--primary-l-end))
);
}
而 Hex 变量只能当字符串，无法做亮度叠加、透明度运算等——--color: #3498db 后续没法“自动变暗 20%”。
浏览器兼容性与工具链：现代项目基本无顾虑，Hex 并不更“安全”
RGB（含 rgba）、HSL（含 hsla）自 IE9+ 全面支持；Hex 8 位（带 alpha）虽新，但主流渐变写法早就不依赖它。构建工具（如 PostCSS）和设计系统也普遍输出 RGB/HSL 格式，方便主题切换和暗色模式适配。
- ✅ 安全选择：
rgb(52, 152, 219)、hsl(200, 100%, 50%)—— 兼容 IE9+，支持变量、calc、transition - ⚠️ 场景限定：
#3498db仅适合静态、无交互、无需维护的极简样式
