color-mix() 无法读取 CSS 变量，因仅接受字面量颜色值，var(--primary) 会导致声明失效；它在样式计算阶段求值，不响应变量更新、伪类或媒体查询，所谓“动态”实为手动预设多阶混合。
不能用 CSS 变量驱动 color-mix() 生成动态色阶——它不解析 var(--primary)，也不响应变量更新，所谓“动态”只能靠人手预设 + 手动调参 + 回退保障。
为什么 color-mix() 无法读取 CSS 变量
浏览器在解析 color-mix() 时只接受字面量颜色值：#2563eb、hsl(210 70% 60%)、rebeccapurple 等。一旦写成 color-mix(in srgb, var(--primary) 70%, white)，整条声明直接失效，DevTools 显示 Invalid property value，且无任何警告。
- 该函数在样式计算阶段就完成求值，不是运行时响应式机制
-
currentColor同样被拒绝，哪怕它在其他上下文中能继承 - PostCSS 或构建工具无法提前展开变量——这是纯 CSS 运行时行为
想生成 5 级文字色阶？必须手写 5 行 color-mix()
从 #2563eb（深蓝）到 #f9fafb（极浅灰）生成均匀明度过渡，得显式写出每阶权重，例如：
body {
--text-1: color-mix(in srgb, #2563eb 100%, #f9fafb 0%);
--text-2: color-mix(in srgb, #2563eb 80%, #f9fafb 20%);
--text-3: color-mix(in srgb, #2563eb 60%, #f9fafb 40%);
--text-4: color-mix(in srgb, #2563eb 40%, #f9fafb 60%);
--text-5: color-mix(in srgb, #2563eb 20%, #f9fafb 80%);
}
- 权重加起来不必等于 100%，浏览器会自动归一化（
red 2, blue 1≡red 66.6%, blue 33.3%） - 用
in oklch比in srgb更易获得感知均匀的明度变化，但 Safari 当前不支持in lch用于color-mix()，oklch是更稳妥的选择 - 所有声明必须显式带
in srgb（或其它空间），漏掉就全无效
没 @supports fallback 就等于没写
Firefox 默认禁用该函数，旧版 Safari 和所有 IE 完全不识别。只靠 color-mix() 会导致部分用户看到突兀的默认色或透明背景。
立即学习“前端免费学习笔记（深入）”；
- 检测必须用
@supports (color-mix: normal)，这是唯一可靠写法 - 静态 fallback 色要手动调好，比如
#1e40af对应color-mix(in srgb, #2563eb 70%, #1e40af 30%)的结果 - fallback 必须写在
color-mix()前面，否则不支持时会被跳过
@supports (color-mix: normal) {
.card { color: color-mix(in srgb, #2563eb 70%, #1e40af 30%); }
}
@supports not (color-mix: normal) {
.card { color: #1e40af; }
}
真正容易被忽略的一点
你写的每一行 color-mix() 都是“一次性快照”：它不感知 :hover、不随 @media 切换、不因 JS 修改变量而重算——所有分支都得提前写死。所谓“动态生成”，本质是人把所有可能路径都手动铺好了。
