calc()不能直接用于颜色值，仅hsl()/hsla()的h/s/l参数及rgb()/rgba()各通道可间接使用calc()，因它们接受角度、百分比或无单位整数。
calc() 不能直接用于颜色值
CSS 的 calc() 函数只支持长度（px、em）、角度（deg）、时间（ms）、频率（Hz）等**可计算的数值类型**，但不支持颜色本身。你不能写 color: calc(#ff0000 + #00ff00) 或 background-color: calc(rgba(0,0,0,0.5) * 2) —— 这些语法在任何浏览器中都会被忽略或报解析错误。
哪些颜色相关属性能用 calc()？
只有那些**接受数值型子参数**的颜色函数，且该子参数本身允许 calc()，才可间接使用。目前仅以下情况合法：
-
hsl()和hsla()的h（色相）参数支持calc()，因为它是角度值：color: hsl(calc(120 + 30), 80%, 60%);
-
hsl()的s（饱和度）和l（亮度）是百分比，也支持calc()：background-color: hsla(200, calc(50% + 10%), calc(40% - 5%), 0.8);
-
rgb()和rgba()的每个通道（r、g、b、a）接受整数或百分比，因此也能用calc()：border-color: rgb(calc(255 - 30), calc(100 + 50), 200);
注意：rgb(255, 128, 64) 中的数字是无单位整数，calc() 返回的必须是整数（不能是 calc(100px) 这种带单位的值），否则会失效。
常见错误：试图对 hex 或命名色做运算
这些写法全部无效，会被 CSS 引擎静默丢弃：
立即学习“前端免费学习笔记（深入）”；
-
color: calc(#333 + #666);（hex 不是数值，无法加） -
background: calc(red * 0.5);（命名色不是变量，不可参与运算） -
color: rgba(calc(0 + 100), 150, 200, 1);（虽然calc()本身合法，但结果必须落在 0–255 范围内；超出则该通道按 0 或 255 截断，不是报错）
Chrome DevTools 里这类无效声明会显示为「invalid property value」，但不会高亮报错，容易漏看。
想动态调色？用 CSS 自定义属性 + calc() 配合
真正可行的动态颜色方案，是把可变部分抽成 --var，再在颜色函数中引用：
:root {
--base-h: 210;
--base-s: 70%;
--base-l: 50%;
}
<p>.card {
background-color: hsl(
calc(var(--base-h) + 15),
var(--base-s),
calc(var(--base-l) - 10%)
);
}这种写法既符合规范，又保留了计算灵活性。但记住：calc() 不能跨函数桥接（比如不能 calc(var(--color-a) + var(--color-b))），颜色混合仍得靠 JS 或构建时处理。
最易被忽略的一点：hsl() 中的 h 是循环值（0–360 度），calc(350 + 25) 得到 375 并不会自动模 360 —— 浏览器照常渲染为 375deg，视觉上等效于 15deg，但语义上它已溢出标准范围，可能影响可访问性工具或未来 CSS 规范的兼容性判断。
