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()做高保真过渡，各司其职
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
