CSS不支持在hsl()内直接用calc()运算，必须先用calc()算出H/S/L值再传入；现代浏览器可用hsl(from)实现环形偏移，如hsl(from var(--base) calc(h + 30) s l)，并需用@supports提供fallback。
为什么不能直接用 calc() 算 hsl() 的参数
CSS 不支持在 hsl() 函数内部直接执行算术运算，比如写 hsl(calc(200 + var(--offset)), 70%, 60%) 是无效语法——浏览器会报错或静默忽略。真正能参与计算的只有 CSS 自定义属性和 calc() 表达式本身，而 hsl() 只接受数值字面量或变量引用。所以“动态色阶”必须拆成两步：先用 calc() 算出 H/S/L 各自的值，再把它们喂给 hsl()。
如何用 hsl(from) 实现环形偏移色阶
现代浏览器（Chrome 111+、Firefox 111+、Safari 16.4+）支持 hsl(from) 语法，它允许你基于一个基准色相对推导新色，自动继承未声明的通道值。这对环形色板最实用：
- 主色定为
--base: hsl(210, 70%, 55%)（一种冷调蓝） - 辅色右偏 30°：
--accent: hsl(from var(--base) calc(h + 30) s l) - 强调色左偏 60°：
--highlight: hsl(from var(--base) calc(h - 60) s l) - 避免 H 超出 0–360：
calc(h + 30)在 h=350 时得 380，但浏览器会自动取模，视觉上仍是 20°（橙红），可接受；若需严格限制，得用 JS 预处理
环形步进选色必须避开质数角度
人眼对色相环上固定间隔的颜色组合更易感知协调。用 30°（十二色环）、45°（八色环）或 60°（六色环）步进，比随机选 17°、43° 或 97° 更可靠：
- 主色
h = 210°→ 推荐辅色选240°（+30°）、180°（−30°）或270°（+60°） - 慎用
227°（+17°）：相邻色相过渡生硬，容易在 UI 中“跳出来”干扰焦点 - 暖色区（0°–90°）建议同步降低 S（如 −10%）、提高 L（如 +5%），否则高饱和黄/橙会刺眼
- 冷色区（180°–270°）可维持或略提 S，L 控制在 40%–60% 之间更稳重
旧浏览器 fallback 怎么写才不崩
hsl(from) 不是万能钥匙，Safari 16.3 及更早、所有 Edge Legacy 版本都不支持。fallback 必须是完整、独立、可运行的色值：
立即学习“前端免费学习笔记（深入）”；
- 别写
--accent: hsl(from var(--base) calc(h + 30) s l), #3b82f6;—— 多值逗号分隔在 color 属性里有效，但在自定义属性中无效 - 正确 fallback 方式：用
@supports包裹新语法，并在外层提供静态色值 - 例如：
:root { --accent: #3b82f6; } @supports (color: hsl(from red h s l)) { :root { --accent: hsl(from var(--base) calc(h + 30) s l); } } - 如果整个主题依赖环形推导，建议用构建时工具（如 PostCSS 插件）预生成 fallback 色值表，而非 runtime 降级
环形色板的真正难点不在计算，而在约束——H 值必须步进可控、S/L 必须随 H 区间联动调整、fallback 必须提前落地。随便转个角度再调个亮度，大概率得到一组看着“不搭”的颜色。
