hsl比rgb更符合人眼感知，色相呈环状连续、饱和度与亮度独立可控；rgb插值路径不直观易产生脏色，且调色需反推设备模型，缺乏直觉性。
HSL 的三个参数直接对应人眼感知维度，RGB 是设备发光模型，调色时必须反推，天然不直观。
色相（Hue）是环状连续的，不是三通道拼凑出来的
人眼识别“红→橙→黄→绿”是一条自然色环，hsl(0deg, 100%, 50%)到hsl(60deg, 100%, 50%)就是沿着这个环滑动；而rgb(255, 0, 0)到rgb(255, 165, 0)只是两个孤立坐标点，中间数值变化毫无色彩逻辑——你得记住“加点G才变橙”，这不是直觉，是查表或试错。
常见错误现象：用 RGB 写渐变时，rgb(255, 0, 0) → rgb(0, 255, 0)必经rgb(128, 128, 0)（橄榄褐），视觉上像“脏了”，其实只是插值路径穿过了人眼不期待的区域。
- 色相单位必须带
deg，写成hsl(355, 100%, 50%)会被旧 Safari 当作无效值降级为 RGB 插值 - 跨 0° 动画如
hsl(355deg, …) → hsl(5deg, …)，浏览器自动走 +10° 短弧，不用手动归一化 - ±5° 变化人眼几乎不可辨，别指望靠微调 Hue 做精细区分；60° 才是明显跳色阈值
饱和度（Saturation）和亮度（Lightness）是独立控制轴
想让一个蓝色按钮“变灰一点”，HSL 只需把 S 从 90% 拉到 30%；RGB 得同时压低 R/G/B 且保持比例，稍有偏差就偏紫或发青——因为 RGB 没有“灰度”这个概念，只有三通道的相对强度。
同理，“变亮”在 HSL 中就是调 L：从 40% 到 80%，蓝还是蓝；RGB 中提亮红色容易发粉、提亮绿色容易过曝，因为各通道响应非线性。
-
L不是线性明暗：hsl(0, 100%, 50%) 是饱满红，但 hsl(0, 100%, 70%) 可能显得“发虚”，尤其高饱和时 -
SH 都只剩灰阶，色相信息失效 - 暗色模式推荐
L区间为 10%–30%，卡在 5% 就趋近纯黑，色相完全不可见
主题切换和动画依赖单参数驱动，RGB 必须多维协同
响应式中换肤，HSL 只需改一个 CSS 变量：:root { --hue: 220; }，所有 hsl(var(--hue), 80%, 60%) 自动偏冷；RGB 得逐个替换 rgb(42, 110, 255)、rgb(60, 140, 255)……还未必协调。
动画也一样：@property --bg-hue { syntax: "<angle>"; ... }</angle> 声明后，hsl(var(--bg-hue), 90%, 50%) 才真正启用 HSL 空间插值；没这句，浏览器照样按 RGB 算中间帧，断层照旧。
-
@property目前仅支持 Chrome 107+、Safari 16.4+、Firefox 111+，不支持时 fallback 到只调L更安全 - 别在
hsl()里嵌calc()，比如hsl(calc(var(--h) + 10), 90%, 50%)会解析失败 - DevTools 颜色拾取器点一下就能把
#2a6eff转成hsl(210, 90%, 50%)，比手算快得多
真正难的不是写对 hsl()，而是理解 H、S、L 各自的生理边界——比如 S=10% 时调 H 没意义，L=95% 时再高饱和也显白。这些不是规范限制，是眼睛的硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
