CSS中HSL的色相饱和度和亮度如何设置？

hsl()配色必须严格匹配参数规则：色相为0–360无单位整数，饱和度和亮度必须带%，缺一即整条失效；s=0%时恒为灰阶，纯色需同时满足s=100%、l=50%。

直接用 hsl() 函数写三个参数就行，但每个参数的取值规则和单位要求必须严格匹配，错一个就整条声明失效——你看到的不是颜色变淡，而是退成透明或继承色。

色相（Hue）怎么设才不跑色

色相是 0–360 的无单位角度值，对应色轮位置：0 和 360 是红，120 是绿，240 是蓝。它不带单位，也不接受负数或小数以外的非整数值（虽然浏览器会自动取模，但别依赖这个）。

1. hsl(0, 70%, 60%)、hsl(360, 70%, 60%) 都是红，等价
2. hsl(-60, 70%, 60%) 会被转成 hsl(300, ...)（青紫），但可读性差，不建议
3. 设计系统里用 CSS 变量控制时，直接写 --hue: 210，然后 hsl(var(--hue), 70%, 60%)
4. JavaScript 动态改色相：用 element.style.color = `hsl(${newH}, 70%, 60%)`，确保 newH 是整数

饱和度（Saturation）为什么总失效

饱和度必须带 % 单位，且只认百分比数值。写成 70 或 0.7 浏览器直接忽略整条声明，不报错也不渲染。

1. 正确：hsl(210, 70%, 60%)、hsl(210, 0%, 60%)（灰阶）、hsl(210, 100%, 60%)
2. 错误：hsl(210, 70, 60%)、hsl(210, 0.7, 60%)、hsl(210, 70%, 60)（亮度也缺%）
3. s = 0% 时，h 和 l 完全无效：无论 hsl(0, 0%, 30%) 还是 hsl(240, 0%, 90%)，结果都是对应亮度的灰
4. 禁用态推荐组合：hsl(210, 15%, 40%)（深底）或 hsl(210, 20%, 80%)（浅底），别只降 s 不调 l

亮度（Lightness）调多少才算安全

亮度是 0%–100% 的百分比，0% 是黑，100% 是白，50% 才是标准纯色亮度。日常 UI 中很少用到两端极值，否则对比失控或发灰。

1. 主文本在深色模式下建议 l ≥ 90%，浅色模式下 l ≤ 20%（如 hsl(210, 15%, 15%) 作背景）
2. 按钮悬停常用 +10%～+15% l 值，比如基础色 hsl(210, 70%, 60%) → 悬停 hsl(210, 70%, 75%)
3. 纯色定义必须是 s: 100% 且 l: 50%，写成 hsl(120, 100%, 60%) 就不是正绿，是偏青白的亮绿
4. 高饱和色（s > 90%）配暗背景（l

真正难的不是记住 0–360、0%–100%、0%–100% 这三组范围，而是理解：同一组数值，在不同设备、不同背景、不同字体粗细下，人眼感知的“浓淡”和“明暗”并不线性。调完得真看，别信 DevTools 里显示的数值。