hsl()三参数必须严格匹配：色相可为无单位整数或deg，饱和度和亮度必须带%，缺一即整条失效；变量需拆解为--hue、--sat、--light分别定义并组合使用。
hsl() 三个参数的单位和写法必须严格匹配
浏览器对 hsl() 的解析很“较真”：色相（hue）可以是无单位数字（如 210）或带 deg（如 210deg），但饱和度（saturation）和亮度（lightness）**必须带 % 符号**，缺一个都会让整条声明失效。
常见错误包括：
-
color: hsl(210, 70, 60);→ 后两个参数没%，被忽略 -
color: hsl(210, 0.7, 0.6);→ 小数写法非法，不渲染 -
color: hsl(210, 70%, 60);→ 第三个参数漏%，同样无效
合法写法只有一种模式：hsl(整数, 百分比值, 百分比值) 或更推荐的现代空格语法：hsl(210 70% 60%)。后者不易漏逗号，VS Code 也能渲染颜色预览（前提是保留 %）。
CSS 变量 + hsl() 必须拆开 H/S/L，不能提前拼字符串
想用变量控制主题色？别写 --primary: hsl(210, 70%, 60%) 然后在属性里直接用 color: var(--primary)——这会失败。CSS 不支持把完整 hsl() 字符串存进变量再解析，浏览器会当普通文本处理，最终回退为透明或黑色。
正确做法是把三要素拆成独立变量：
-
--hue: 210;（纯数字，不带单位，方便calc()运算） -
--sat: 70%;（带%，不能写成"70%"，旧版 Safari 会解析失败） -
--light: 60%;（同上，引号、小数、漏 % 全部不行）
然后在使用处显式组合：background-color: hsl(var(--hue), var(--sat), var(--light));。所有地方都得这么写，不能偷懒。
深色模式下只调 lightness，hue 和 saturation 要锁定
切深色主题时最常踩的坑：把 --hue 和 --sat 也跟着改，结果主色偏紫、按钮发灰、文字对比度崩塌。根源是破坏了色彩锚定关系——同一套 UI 元素必须保持视觉归属感。
安全做法是：
-
--hue绝对不动：确保蓝还是蓝，不跳到青或洋红 -
--sat可微降（如70% → 60%），防深底上出现“辉光感”，但别降到20%以下，否则失去识别度 -
--light是唯一应大幅调整的参数：背景压到12%–20%、文字提到92%–96%、卡片区设为28%–35%
注意：饱和度低于 20% 或亮度在 10% / 90% 附近时，人眼几乎感知不到色相变化——此时硬调 --hue 没意义。
别在线性插值色相做渐变，尤其从红到绿
用 hsl() 做数据可视化渐变（比如柱状图从红到绿）时，直接 0° → 120° 线性插值看似合理，实际会经过黄→褐→灰的断层区，视觉割裂明显。0°→180° 更糟，中间必经灰褐色，完全不是设计预期。
更可靠的做法：
- 优先考虑
lch()（LCH 色彩空间，感知均匀），但注意 Safari 支持尚不完善 - 或分段控制：红→橙→黄→绿，每段用固定步长（如
30°或45°）绕色相环取值 - 避免用
Math.random() * 360生成辅色，质数偏移（如+7°）极易冲突
真正难的不是写出 hsl()，而是判断什么时候不该用它——比如需要精确匹配设计稿灰度值，或做高保真品牌色还原时，hsl() 的色域限制和非线性映射反而会成为障碍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
