calc()不能直接在hsl()中计算色相，必须通过CSS变量预计算；hsl(380,70%,60%)虽被多数浏览器归约为hsl(20,70%,60%)，但越界行为未标准化，推荐改用lch()函数实现自动模360的动态色相偏移。
calc() 不能直接参与 HSL 色调计算
直接在 hsl() 函数里用 calc() 计算 h 值（比如 hsl(calc(120 + 30), 70%, 60%)）会失败——CSS 规范明确禁止在 hsl() 的第一个参数中嵌套 calc()。浏览器解析时会直接丢弃整个颜色声明，退回到继承色或初始值。
用 CSS 自定义属性 + calc() 预先算好色调值
真正可行的路径是：把色调偏移逻辑拆出来，用 :root 或局部作用域定义基础色调和偏移量，用 calc() 算出最终数值，再把这个结果作为独立变量传给 hsl()：
:root {
--base-hue: 210;
--offset: 15;
--shifted-hue: calc(var(--base-hue) + var(--offset));
}
<p>.example {
background-color: hsl(var(--shifted-hue), 70%, 60%);
}注意点：
-
--shifted-hue必须是纯数字（单位隐含为“度”），不能带deg - 加减后超出 0–360 范围不会自动归一化，
hsl(380, 70%, 60%)会被浏览器等价处理为hsl(20, 70%, 60%)，但行为未完全标准化，建议手动模运算（见下一条） - 若需循环偏移（如按钮悬停时 +60°，再 hover 又 +60°），必须靠 JS 更新变量，CSS 本身不支持运行时模运算
HSL 色调越界时的处理陷阱
单纯 calc(350 + 25) 得到 375，虽然多数浏览器能容忍，但以下情况会出问题：
立即学习“前端免费学习笔记（深入）”；
- 某些旧版 Safari 对 >360 的 hue 解析不稳定
- 用在
@keyframes动画中时，部分引擎会在插值阶段崩溃 - 配合
color-mix()或oklch()等新函数时，越界值可能被截断而非绕回
稳妥做法是用 JS 控制变量，或提前写好边界逻辑：
.example[data-theme="warm"] {
--shifted-hue: 30;
}
.example[data-theme="cool"] {
--shifted-hue: 210;
}
/* 避免 calc 模运算 —— CSS 没有 % 运算符 */替代方案：用 color() 或 lch() 更可靠
如果目标是“动态偏移”，且项目已支持现代 CSS，优先考虑 color() 函数或 lch()：
-
color(display-p3 0.2 0.4 0.8)支持calc()在通道值中使用，但不支持色调旋转 -
lch(60% 30 220deg)的第三参数（色相）允许calc(220deg + 15deg)，且自动模 360 —— 这是目前唯一原生支持动态色相偏移的 CSS 颜色函数 - 兼容性注意：
lch()在 Chrome 111+、Safari 16.4+、Firefox 112+ 可用；Edge 同 Chrome
所以真要 runtime 偏移色调，别硬刚 hsl() + calc()，直接上 lch(calc(...), ..., ...) 更省心。
实际项目里，最常被忽略的是：你以为 hsl() 里写了 calc() 就能动起来，结果发现它根本没生效，连 devtools 都不报错——那大概率是语法被静默丢弃了。
