color-mix() 无法精确复制 Figma 混合模式，因其仅对不透明纯色做线性插值，不处理 alpha、背景或图层堆叠；Figma 的「正片叠底」「叠加」等是像素级实时合成，二者计算阶段与逻辑本质不同。
color-mix() 无法精确复制 Figma 中的任何颜色混合模式，它根本不是为图层混合设计的。
为什么 color-mix() 和 Figma 混合模式完全不匹配
Figma 的「正片叠底」「叠加」「柔光」等模式，是像素级、带 alpha 的实时合成运算；color-mix() 只在 CSS 计算阶段对两个**不透明纯色**做线性插值，输出一个确定 RGB 值。它不读取背景、不处理透明度、不感知图层堆叠——连输入都要求是 #ff0000、red、lch(50% 80 20) 这类无 alpha 的字面量，rgba() 或 hsla() 会直接被静默忽略或报 Invalid property value。
你写 color: color-mix(in srgb, #f00 60%, #00f 40%)，结果永远是 rgb(153, 0, 102)；而 Figma 里把半透红盖在蓝背景上，得到的是动态计算后的混合像素，两者逻辑完全不同。
常见误用场景与对应解法
想复现 Figma 中「白色柔光层 + 颜色混合层」的色调统一效果？别用 color-mix()：
立即学习“前端免费学习笔记（深入）”；
- 该效果本质是多图层 alpha 合成 → 应用
background-blend-mode: color或mix-blend-mode: color（需确保元素有内容、背后有非透明像素） - 想让文字自动适配图片背景色？
mix-blend-mode: difference或background-clip: text+-webkit-text-fill-color: transparent更接近目标 - 需要预烘焙色调传递结果？先用 Figma 拾色器点出最终像素色（如
#3a5c8c），再把这个值喂给color-mix()做后续静态推导，但这是离线快照，不是动态映射
浏览器支持和语法陷阱
即使你只打算做静态色值推导，color-mix() 也极易失效：
- Firefox 默认禁用
layout.css.color-mix.enabled，Safari 支持不全，仅 Chrome/Edge 111+ 较稳 - 漏写
in srgb（或其它色彩空间）→ 整条声明静默跳过 - 权重写成
red 60（缺 %）或red 60%, blue（后者无权重）→ 被忽略 - 混用变量：
color-mix(in srgb, var(--primary), blue)→ 不解析，静默失败 - 必须 fallback：先写
color: #007bff，再覆盖color: color-mix(...)，并用@supports (color: color-mix(in srgb, red, blue))包裹逻辑
真正容易被忽略的点是：Figma 混合模式作用于渲染流水线末端，color-mix() 发生在 CSS 计算最前端。拿前者当输入、后者当输出，只会让你在 DevTools 里反复检查却找不到问题根源。
