hsl()配色必须严格匹配参数规则：色相为0–360无单位整数，饱和度和亮度必须带%，缺一即整条失效；s=0%时恒为灰阶，纯色需同时满足s=100%、l=50%。
直接用 hsl() 函数写三个参数就行，但每个参数的取值规则和单位要求必须严格匹配，错一个就整条声明失效——你看到的不是颜色变淡，而是退成透明或继承色。
色相（Hue）怎么设才不跑色
色相是 0–360 的无单位角度值，对应色轮位置：0 和 360 是红，120 是绿，240 是蓝。它不带单位，也不接受负数或小数以外的非整数值（虽然浏览器会自动取模，但别依赖这个）。
-
hsl(0, 70%, 60%)、hsl(360, 70%, 60%)都是红，等价 -
hsl(-60, 70%, 60%)会被转成hsl(300, ...)（青紫），但可读性差，不建议 - 设计系统里用 CSS 变量控制时，直接写
--hue: 210，然后hsl(var(--hue), 70%, 60%) - JavaScript 动态改色相：用
element.style.color = `hsl(${newH}, 70%, 60%)`，确保newH是整数
饱和度（Saturation）为什么总失效
饱和度必须带 % 单位，且只认百分比数值。写成 70 或 0.7 浏览器直接忽略整条声明，不报错也不渲染。
- 正确：
hsl(210, 70%, 60%)、hsl(210, 0%, 60%)（灰阶）、hsl(210, 100%, 60%) - 错误：
hsl(210, 70, 60%)、hsl(210, 0.7, 60%)、hsl(210, 70%, 60)（亮度也缺%） - s = 0% 时，h 和 l 完全无效：无论
hsl(0, 0%, 30%)还是hsl(240, 0%, 90%)，结果都是对应亮度的灰 - 禁用态推荐组合：
hsl(210, 15%, 40%)（深底）或hsl(210, 20%, 80%)（浅底），别只降 s 不调 l
亮度（Lightness）调多少才算安全
亮度是 0%–100% 的百分比，0% 是黑，100% 是白，50% 才是标准纯色亮度。日常 UI 中很少用到两端极值，否则对比失控或发灰。
- 主文本在深色模式下建议 l ≥ 90%，浅色模式下 l ≤ 20%（如
hsl(210, 15%, 15%)作背景） - 按钮悬停常用 +10%～+15% l 值，比如基础色
hsl(210, 70%, 60%)→ 悬停hsl(210, 70%, 75%) - 纯色定义必须是
s: 100%且l: 50%，写成hsl(120, 100%, 60%)就不是正绿，是偏青白的亮绿 - 高饱和色（s > 90%）配暗背景（l
真正难的不是记住 0–360、0%–100%、0%–100% 这三组范围，而是理解：同一组数值，在不同设备、不同背景、不同字体粗细下，人眼感知的“浓淡”和“明暗”并不线性。调完得真看，别信 DevTools 里显示的数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
