calc()不能直接用于rgb()等颜色函数内部，必须通过css变量间接使用；推荐用color-mix()和color-contrast()替代，兼顾语义性与兼容性。
calc()不能直接写在rgb()、hsl()等颜色函数内部
你写 color: rgb(calc(255 - 100), 128, 64)，浏览器会整条忽略——不是报错，是压根不解析。CSS 规范明确限制：calc() 只能在接受 <length></length>、<percentage></percentage>、<number></number> 等类型的地方生效，而 rgb() 的每个参数要求的是字面 <number></number>，不是“可计算的 <number></number>”。hsl()、hwb()、lab() 同理，哪怕只在一个通道里用 calc(128)，整个函数都会失效。
正确做法：把calc()放在CSS变量赋值处，再用var()引用
真正能跑通的路径是让 calc() 先算出变量值，再把变量塞进颜色函数：
:root { --base-r: 255; --offset: 100; --dynamic-r: calc(var(--base-r) - var(--offset)); }.my-element { background-color: rgb(var(--dynamic-r), 128, 64); }
注意三点：
- 必须用
var(--dynamic-r)，不能写成rgb(--dynamic-r, 128, 64)（后者是纯文本，无效） - 所有参与
calc()的变量值本身必须是数字类型；如果--offset: "100"（带引号字符串），计算就失败 -
--dynamic-r的结果是纯数字（如155），rgb()接收时不需要单位，这点和长度计算不同
更推荐的替代方案：用color-mix()和color-contrast()
硬拆 RGB 不仅易错，还绕不开 0–255 边界、色彩空间转换等问题。现代 CSS 提供了语义更清晰的方案：
-
background-color: color-mix(in srgb, #ff6b6b 70%, transparent 30%);—— 明暗/透明度混合，自动处理色彩空间 -
color: color-contrast(#ff6b6b vs white, black);—— 可访问性驱动的对比色选择，calc()完全无法模拟
color-mix() 在 Chrome 111+、Safari 16.4+ 可用；它不依赖手动数值运算，也不受单位、空格、预处理器干扰。
IE 和旧 WebView 用户需要降级处理
calc() 在自定义属性中使用，IE 完全不支持；某些安卓旧版 WebView 对 color-mix() 也无响应。这时候没法靠纯 CSS 解决：
- JS 动态设置内联样式（如
el.style.backgroundColor = `rgb(${r}, ${g}, ${b})`） - 用 PostCSS 插件静态展开变量（仅适用于固定值场景）
- 直接回退到预设好的多套主题类名，比如
.theme-light/.theme-dark
最常被忽略的一点：颜色计算的“动态性”本质是运行时行为，但很多人试图用预处理器（Sass/Less）在构建阶段硬算 RGB，结果既不响应用户操作，又容易因单位或空格问题编译失败——这从起点就走偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
