色相（hsl()第一个参数）是0–360的整数，对应色轮一圈：0和360为红色，120为绿色，240为蓝色；它仅控制颜色在色环上的位置，不改变明暗或浓淡，调整时颜色沿色环滑动，但人眼对红、绿、蓝最敏感，中间过渡区变化感知平缓。
hsl() 里色相值怎么影响颜色表现
色相（hsl() 第一个参数）是 0–360 的整数，对应色轮一圈：0 和 360 都是红色，120 是绿色，240 是蓝色。它不决定明暗或浓淡，只管“往哪个方向偏”。改这个值，颜色会沿着色环滑动，但饱和度和亮度不变时，视觉对比可能突然变弱——比如 hsl(60, 100%, 50%)（亮黄）和 hsl(180, 100%, 50%)（亮青）在灰度下亮度接近，但人眼对黄更敏感，实际可读性差异很大。
常见错误是把色相当“调色盘滑块”随意拉，结果相邻值（如 179 和 181）看起来几乎一样，而跳过 60° 就明显变色。记住：人眼对 0°/360°（红）、120°（绿）、240°（蓝）最敏感，中间过渡区（如 30°–60° 橙黄）变化感知平缓。
用 hsl() 实现主题色自动偏移
比起硬写一堆 #ff6b6b、#4ecdc4，直接基于基准色相做算术偏移更可控。比如主色定为 hsl(210, 80%, 60%)（偏紫蓝），悬停态可以加 30°：hsl(240, 80%, 60%)（更蓝），成功态减 60°：hsl(150, 80%, 60%)（偏青绿）。
- 色相支持小数，
hsl(210.5, 80%, 60%)合法，但人眼分辨不出 0.5° 差异，别白费劲 - 超过 360 会自动取模，
hsl(390, 80%, 60%)等价于hsl(30, 80%, 60%)，可放心加减 - 饱和度（第二参数）低于 20% 时，色相变化基本不可见；亮度（第三参数）在 10% 或 90% 附近时，色相影响也会被压制
hsl() 和 hex/rgb 在 CSS 变量中混用的坑
CSS 自定义属性不解析颜色函数，--primary: hsl(210, 80%, 60%) 是合法字符串，但 color: var(--primary) 能生效，是因为浏览器在计算时才解析。问题出在 calc() 或其他函数里：
立即学习“前端免费学习笔记（深入）”；
-
color: hsl(calc(var(--hue) + 30), 80%, 60%)❌ 不行，calc()不能嵌套在hsl()内部 - 正确写法是提前算好变量：
--hue-hover: 240，再用hsl(var(--hue-hover), 80%, 60%) - hex 值无法直接参与色相运算，
hsl(from #4ecdc4 h h s l)（CSS Color Level 4）目前仅 Chromium 111+ 支持，Firefox 和 Safari 还没跟上，线上项目慎用
哪些场景下 hsl() 比 rgb() 更直观
需要按“感觉调色”而不是“数值调色”时，hsl() 明显省力。比如设计一套禁用态按钮：不是降低 RGB 每个通道，而是统一降亮度（第三参数）到 30%，同时微调饱和度防发灰——hsl(210, 40%, 30%) 比 rgb(60, 80, 100) 更容易预判效果。
- UI 组件库配色系统：主色、强调色、危险色之间保持相同
s和l，只调h，视觉层级清晰 - 数据图表配色：用
hsl(calc(210 + (var(--index) * 30)), 70%, 60%)（配合 JS 注入 index）生成循环色系，比手写 10 个 hex 稳定 - 深色模式切换：亮度从 90% → 20%，饱和度同步压到 40%，色相不动，比逐个改 rgb 通道更不易漏掉边框或阴影
真正难的是亮度和饱和度的组合影响——同一色相下，hsl(210, 100%, 50%) 和 hsl(210, 50%, 70%) 看起来可能比两个不同色相还像。调色时别只盯着色相滑块，三参数得一起看。
