color-mix() 无法直接生成动态调色盘或渐变动画，因其在样式计算阶段即展开为固定颜色值，不支持运行时插值，需转为 rgb()/hsl()/oklch() 等函数才能配合 transition 实现平滑动画。
color-mix() 不能直接生成动态调色盘，但它能高效产出任意中间色——关键是你得自己定义端点、步长和混合逻辑，再批量计算。
为什么 color-mix() 无法直接做渐变动画
它在样式计算阶段就展开为固定颜色值，比如 color-mix(in srgb, red 30%, blue) 等价于写死 #804080。浏览器不把它当“可插值函数”处理，所以加 transition: color 只会跳变，没有中间帧。
真正支持运行时插值的颜色函数只有 rgb()、hsl()、oklch()、lab() 等。想让颜色“动起来”，必须把 color-mix() 的输出转成这些格式再交给动画系统。
- 常见错误：给
color-mix()结果套transition，结果是突变而非渐变 -
color-mix()不接受var(--primary)或currentColor，所有输入必须是具体颜色值（如#2563eb） - 权重加起来不必等于 100%，浏览器会自动归一化；但
in lch下偏差对明度影响更敏感
用 color-mix() + hsl() 构建可复用的调色盘
先用 color-mix() 定义语义明确的锚点色（比如主色与背景色混合出的“安全文字色”），再手动或脚本转成 hsl()，用于生成邻近色阶。
示例：从品牌蓝 #2563eb 和浅灰背景 #f9fafb 混合出按钮文字悬停色：color-mix(in srgb, #2563eb 70%, #f9fafb 30%) → 得到 #5b8ac4
再转为 hsl(207 45% 57%)，后续微调饱和度/亮度即可生成禁用态、激活态等。
- 优势：混合逻辑可控（谁占多少比），后续调整灵活（改一个
hsl()参数就能变深/变亮） - 注意：混合空间选
in srgb兼容性最好（Chrome 111+、Firefox 111+、Safari 16.4+），但明度响应非线性；in lch更符合人眼感知，但 Safari 当前不支持 - 稳妥做法：用
@supports (color-mix: normal)包裹in lch版本，fallback 到in srgb
生成多阶调色盘时最容易被忽略的点
调色盘不是越密越好，而是要匹配可访问性阈值。WCAG 要求文本与背景对比度 ≥ 4.5:1，单纯用 color-mix(in srgb, #000 10%, #fff) 得到的浅灰很可能不达标。
更可靠的做法是先用 color-contrast() 测目标对比度，再反推混合比——比如你想让文字在 #f9fafb 上可读，就别硬凑 10% 黑，而是测出刚好满足 4.5:1 的混合比例。
- 别依赖视觉直觉：RGB 线性混合 ≠ 人眼感知均匀，尤其浅色区域变化不明显，深色区域容易发灰失饱和
- 别跳过校验：每个生成的色阶都该用工具（如 axe 或 Chrome DevTools 的无障碍检查）验证对比度
- 别混用空间：
color-mix(in srgb, ...)输出后转hsl()是安全的；但若用in lch混合再转hsl()，可能因色域映射丢失精度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
