HSL色相参数（0–360°）直接映射色轮位置，只控制颜色方向不改变明暗浓淡，固定饱和度和亮度仅调色相即可安全切换主题色，且超360自动取模，支持CSS变量高效管理。
HSL 是目前最可控的主题色调整方案，前提是别把色相当滑块乱拉，也别指望用 calc() 直接操作十六进制值。
为什么直接改 hsl() 的第一个参数就能换主题色
色相（hue）是 0–360 的角度值，对应色轮一圈：0° 和 360° 都是红，120° 是绿，240° 是蓝。它只决定“往哪个方向偏”，不碰明暗和浓淡。所以只要固定饱和度和亮度，只调色相，就能在不破坏视觉平衡的前提下平滑切换主色调。
- 人眼对 0°、120°、240° 最敏感，中间过渡区（比如 30°–90°）变化感知弱，相邻 ±5° 几乎看不出差别
-
hsl(210, 80%, 60%)（偏紫蓝）→hsl(240, 80%, 60%)（更蓝）是安全偏移；但hsl(210, 80%, 60%)→hsl(150, 80%, 60%)（跳到青绿）需确认是否符合品牌语义 - 超过 360 会自动取模：
hsl(390, 80%, 60%)等价于hsl(30, 80%, 60%)，加减运算可放心写
用 CSS 自定义属性 + hsl() 实现可维护的主题系统
把色相抽成变量，其他两个参数保持固定，是最轻量又最易扩展的做法。注意：CSS 变量存的是字符串，var(--hue) 能直接进 hsl()，但不能塞进 calc() 内部再参与运算。
- 正确写法：
--primary-hue: 210;，然后用background-color: hsl(var(--primary-hue), 80%, 60%); - 悬停变色别写
hsl(calc(var(--primary-hue) + 30), ...)—— 这语法非法；应提前定义好--primary-hue-hover: 240; - 禁用态不是简单降 alpha，而是统一调低亮度（第三参数）并略降饱和度防发灰，例如
hsl(var(--primary-hue), 40%, 30%) - 十六进制值无法直接参与色相计算；想从
#2563eb提取色相要用hsl(from #2563eb h s l)，但该语法仅 Chromium 111+ 支持，Firefox/Safari 尚未落地，线上项目慎用
哪些地方最容易踩坑
最常被忽略的不是语法，而是人眼感知和浏览器兼容性的错位。
立即学习“前端免费学习笔记（深入）”；
- 饱和度低于 20% 时，色相变化基本不可见；亮度在 10% 或 90% 附近时，色相影响也会被压制 —— 别在极暗/极亮背景下强行调色相
-
hsl(210.5, 80%, 60%)合法，但人眼分辨不出 0.5° 差异，纯属白费劲 - 用
hsl()做数据可视化渐变时（如从红到绿），别线性插值色相：0°→120° 看起来是红→黄→绿，但 0°→180°（红→青）中间会经过灰褐，视觉断层明显；优先考虑lch()或分段控制 - 透明度建议用
hsl(210 80% 60% / 0.8)新语法（空格分隔 +/），比hsla()更简洁，且所有现代浏览器已支持
真正难的不是写出 hsl()，而是判断什么时候不该用它——比如需要精确匹配设计稿里的某个灰度值，或做跨设备色彩一致性保障时，lab() 或 lch() 才是更稳的选择。
