hsl()函数参数顺序固定为h（0–360无单位）、s（0%–100%）、l（0%–100%），单位和范围错误将失效；CSS变量中需用var()分别传参，calc()中h须为无单位整数；注意色相循环性、可访问性及IE兼容性。
hsl() 函数的参数顺序和取值范围必须严格匹配
hsl() 接收三个参数：h（色相）、s（饱和度）、l（亮度），顺序不能颠倒，且单位和范围有硬性要求：h 是 0–360 的无单位数值（代表角度），s 和 l 必须带 % 单位，取值范围是 0%–100%。写成 hsl(240, 70, 50%) 或 hsl(240, 70%, 50) 都会失效。
-
hsl(240, 70%, 50%)✅ 正确：色相 240°（蓝），饱和度 70%，亮度 50% -
hsl(240deg, 70%, 50%)❌ 错误：h不接受deg单位 -
hsl(240, 0.7, 0.5)❌ 错误：不支持小数形式，饱和度/亮度必须用百分比
在 CSS 变量中使用 hsl() 要注意计算时机
CSS 自定义属性本身不解析函数，所以不能直接把 hsl() 写进变量值里再“复用参数”。比如 --h: 240; --s: 70%; --l: 50%; 之后写 color: hsl(var(--h), var(--s), var(--l)); 是合法的，但若写成 --color: hsl(240, 70%, 50%) 再 color: var(--color)，也行——只是后者丧失了动态调整单个分量的能力。
- 想动态控制亮度？用
hsl(calc(var(--h) + 30), var(--s), calc(var(--l) * 0.8))是可行的 - 但
calc()不能混用单位：calc(240 + 30deg)会报错，calc(240 + 30)才对 - 所有参与
calc()的h值都应保持无单位整数
hsl() 和 hex / rgb 混用时要注意可访问性和对比度
HSL 更直观地表达颜色意图（比如“调亮一点”“降饱和”），但人眼对不同色相的亮度感知差异很大。同样标称 l: 50% 的 hsl(0, 100%, 50%)（纯红）和 hsl(60, 100%, 50%)（纯黄）在实际渲染中亮度感受并不一致，可能导致文字可读性问题。
- 检查对比度别只信直觉，用浏览器 DevTools 的颜色拾取器看最终
rgb()值再算 WCAG 对比度 - 避免对深色背景用
hsl(120, 100%, 50%)（纯绿）配白色文字——它实际亮度高，但色相导致视觉疲劳 - 想保底兼容老浏览器？IE 不支持
hsl()，需前置声明color: #ff0000;，再覆盖color: hsl(0, 100%, 50%);
JS 动态生成 hsl() 字符串时容易漏掉空格和单位
用 JavaScript 拼接样式时，字符串模板若没处理好空格或单位，CSS 解析会静默失败。浏览器不会报错，但颜色不会生效。
立即学习“前端免费学习笔记（深入）”；
const h = 180;
const s = 60;
const l = 40;
element.style.color = `hsl(${h}, ${s}%, ${l}%)`; // ✅ 正确
// 错误示例：
// `hsl(${h},${s}%,${l}%)` → 缺空格，部分引擎可能拒识
// `hsl(${h}, ${s}%, ${l})` → l 缺 %，直接无效- 推荐用 CSS Typed OM（如
new CSSColorValue('hsl(180 60% 40%)')）替代字符串拼接，但目前兼容性有限 - 调试时可在控制台直接执行
getComputedStyle(element).color，看返回的是rgb()还是原始hsl()，判断是否被成功解析
hsl() 看似简单，但色相环是循环的（0° 和 360° 等价），而 CSS 不做归一化——传入 hsl(420, 70%, 50%) 不会自动转成 hsl(60, ...)，有些浏览器会截断，有些会出错。动手前先确认你传的 h 值在 0–360 内。
