color-mix() 不能直接生成渐变调色盘或渐变动画，因其在样式计算阶段即展开为固定颜色值，不支持运行时插值；需配合 hsl() 等可插值函数实现动态色彩系统。

color-mix() 不能直接生成渐变调色盘，但它能高效产出调色盘中任意一个中间色——关键在于你得先定义好“端点色”和“步长逻辑”，再用它批量计算。

为什么不能直接用 color-mix() 做渐变动画

它不是运行时可插值函数，浏览器在样式计算阶段就把它展开成一个确定的 #rrggbb 或 rgb() 值。写 color: color-mix(in srgb, red 30%, blue); 和写死 color: #804080; 对 transition 来说完全等价——只有起点和终点，没有中间帧。

• 常见错误：给 color-mix() 的参数加 transition: color，结果是跳变，不是渐变
• 真正支持 CSS 插值的颜色函数只有 rgb()、hsl()、oklch()、lab() 等
• 想让颜色“动起来”，必须把 color-mix() 的输出转成这些可插值格式，再交给动画系统

如何用 color-mix() + hsl() 构建可复用的调色盘

先用 color-mix() 定义语义明确的锚点色（比如主色与背景色混合出的“安全文字色”），再把它转成 hsl()，用于生成系列邻近色。

• 示例：从品牌蓝 #2563eb 和浅灰背景 #f9fafb 混合出按钮文字悬停色：color-mix(in srgb, #2563eb 70%, #f9fafb 30%) → 得到 #5b8ac4
• 把这个结果手动或脚本转为 hsl()：hsl(207 45% 57%)，再用它微调饱和度/亮度生成禁用态、激活态等
• 优势：混合逻辑可控（谁占多少比），后续调整又灵活（hsl() 改一个数就能变深/变亮）
• 注意：color-mix() 不接受 var(--primary) 或 currentColor，所有输入必须是具体颜色值

混合空间选 in srgb 还是 in lch？

in srgb 兼容性最好（Chrome 111+、Firefox 111+、Safari 16.4+），但明度响应非线性：浅色混黑变化小，深色混黑容易发灰失饱和；in lch 明度（L）更接近人眼感知，适合做均匀变暗/变亮，但 Safari 当前不支持 in lch 用于 color-mix()。

立即学习“前端免费学习笔记（深入）”；

• 稳妥做法：用 in srgb + 手动为不同基础色微调权重（比如浅蓝混黑用 20%，深蓝用 10%）
• 进阶做法：用 @supports (color-mix: normal) 包裹 in lch 版本，fallback 到 in srgb
• 别踩坑：权重加起来不必等于 100%，浏览器会自动归一化；但 in lch 下权重偏差对明度影响更敏感

生成多阶调色盘时最容易被忽略的点

调色盘不是越密越好，而是要匹配可访问性阈值。比如 WCAG 要求文本与背景对比度 ≥ 4.5:1，单纯用 color-mix(in srgb, #000 10%, #fff) 得到的浅灰可能不达标；更可靠的是先用 color-contrast() 测目标对比度，再反推混合比例。

• color-mix() 不处理透明度：输入不能是 rgba()，也不能输出带 alpha 的值
• 它不等价于图层叠加：想模拟“半透明白色盖在主题色上”的效果，应优先用 background-blend-mode 或多层 linear-gradient
• 真正在意色彩一致性时，别依赖单个混合函数——color-mix() 定锚点，hsl() 做派生，oklch() 做高保真过渡，各司其职