RGB描述显示器发光原理，通过红绿蓝三通道强度叠加颜色，精准但调色不直观；HSL对应人眼感知，以色相、饱和度、亮度直观调控颜色，适合主题切换与配色设计。
RGB 是“怎么混出来的”，HSL 是“看起来是什么样”
RGB 描述的是显示器如何发光：红、绿、蓝三通道各自强度（0–255）叠加出颜色。它精准、可编程，但调色不直观——比如你想把一个蓝色变浅一点，得手动调高 R/G/B 三个值，且不同色相“变浅”的视觉效果不一致（红色提亮易发粉，蓝色提亮更干净）。HSL 则直接对应人眼感知：色相 Hue（0–360° 决定是红/绿/蓝）、饱和度 Saturation（0%–100%，越低越灰）、亮度 Lightness（0%–100%，0% 是黑，100% 是白）。改颜色就像调色盘：hsl(240, 100%, 60%) 是标准蓝，想变浅？只改 60% → 85% 就行。
什么时候该用 RGB，什么时候该用 HSL
选哪个不是看“高级不高级”，而是看你在解决什么问题：
- 用
rgb()或rgba()：从设计稿取色（Figma/Sketch 导出多为 RGB）、对接后端数据（如热力图数值映射到rgb(r, g, b)）、需要精确复现某个已知色值（如品牌色rgb(34, 128, 222)） - 用
hsl()或hsla()：做主题切换（暗色模式只需统一调低L值）、生成配色组（固定H，遍历S和L）、写可维护的 CSS 变量（--primary: hsl(200, 80%, 60%)，后续所有衍生色都基于它微调） - 混合使用完全没问题：按钮背景用
hsl()方便明暗调节，边框用设计标注给的rgb(120, 120, 120)，文字用rgba(0, 0, 0, 0.8)——浏览器全支持，无性能损耗
透明度写法差异和兼容性注意点
RGBA 和 HSLA 都支持透明，但现代写法更简洁：
- 老写法：
rgba(0, 0, 0, 0.5)/hsla(0, 0%, 0%, 0.5) - 新写法（CSS Color Module Level 4）：
rgb(0 0 0 / 0.5)/hsl(0 0% 0% / 0.5)——斜杠分隔，更紧凑，也支持百分比 alpha（如/ 50%） - 兼容性：Chrome 93+、Firefox 95+、Safari 15.4+ 支持新语法；旧版本需回退到带
a的形式。若项目需支持 Safari 15.2 或更早，仍建议用rgba()和hsla()
容易被忽略的亮度（L）陷阱
HSL 的 L（Lightness）不是“亮度”直觉理解的那样。它定义为 (max(R,G,B) + min(R,G,B)) / 2，所以：
立即学习“前端免费学习笔记（深入）”；
-
hsl(0, 100%, 50%)是纯红，但hsl(0, 100%, 0%)是黑，hsl(0, 100%, 100%)是白 —— 中间不是线性过渡，尤其在高饱和度时，L=50%往往最“饱满”，再提亮反而变灰 - 想做“视觉等距”的明暗阶梯？别只线性增减
L，比如从L=30%到L=70%，中间L=50%可能最抢眼，而L=60%反而显得“发虚” - 真正需要感知均匀变化时，应考虑
lab()或lch()（但目前浏览器支持有限，慎用于生产）
