color-mix()仅支持两个颜色混合，第三个起被静默忽略；实现三色效果需分步嵌套，且须统一色彩空间与权重换算，但结果受顺序影响大；多数场景应改用hsl()、oklch()、light-dark()等更可控方案。
color-mix() 不支持三种或更多颜色直接混合。
它只接受恰好两个颜色输入，无论你写多少个参数，浏览器只取前两个，其余静默忽略。比如 color-mix(in srgb, red 40%, blue 30%, green 30%) 实际等价于 color-mix(in srgb, red 40%, blue 30%)，green 30% 完全不参与计算。
color-mix() 的语法限制很硬：必须且仅能有两个颜色参数
- 浏览器解析时严格按“第一个颜色 + 第二个颜色”配对，第三个起全部丢弃
- 不报错、不警告，也不 fallback —— 就是彻底无视
- 即使你用括号包裹、加注释、拆多行，也无法绕过这个限制
- 所有已知实现（Chrome 111+、Safari 16.4+）行为一致，不是 bug，是规范定义
想实现“三色混合”效果？只能分步嵌套
本质是把多色混合拆成多次双色混合，但要注意顺序和空间一致性：
- 先混合 A 和 B → 得到中间色 X
- 再混合 X 和 C → 得到最终色 Y
- 必须全程使用同一色彩空间（如都用
in oklch），否则明度/饱和度会跳变 - 权重不能简单相加：比如想让 A:B:C = 40%:30%:30%，不能直接套用；得换算成两步权重（例如先 A 57% + B 43% → X，再 X 70% + C 30% → Y）
示例（手动换算后）：
color: #2563eb; /* fallback */ color: color-mix( in oklch, color-mix(in oklch, #2563eb 57%, #1e40af 43%) 70%, #f9fafb 30% );
但这不是“三色插值”，而是有顺序依赖的合成路径 —— A 和 B 先融合，再与 C 平滑过渡，结果受第一步影响很大。
更现实的做法：别硬凑三色，换思路
多数所谓“三色混合”需求，实际是以下场景之一：
- 需要从主色派生浅色/深色/强调色 → 用
hsl()或oklch()单独调 L/C/h，比套color-mix()更可控 - 想让文字在不同背景上自动适配（白/灰/黑底）→ 用
light-dark()+color-contrast()组合，而非堆颜色 - 做渐变中间色优化 → 先用
color-mix()算出关键帧色，再喂给linear-gradient()，而不是试图让一个函数干所有事
真正容易被忽略的是：你写的每一层 color-mix() 都是独立静态计算，没有缓存、不共享状态、无法递归展开——它不是编程语言里的函数调用，而是一次性 CSS 值替换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
