现代CSS中怎样用color-mix()实现无第三方库的颜色变淡？-css教程-PHP中文网

必须用 oklch 或 lch 空间混白实现变淡，因 srgb 不支持纯白/黑作为插值端点，否则声明被忽略；正确做法是先转品牌色为 oklch，再固定 C/h、仅调节 L 值插值，并用 @supports 检测完整函数签名以提供 fallback。

现代css中怎样用color-mix()实现无第三方库的颜色变淡？

直接用 color-mix() 实现变淡，必须用 oklch 或 lch 空间混白，in srgb 混白在当前浏览器（Chrome 111+ / Safari 16.4+）会静默失败，不是“效果弱”，而是压根不生效。

为什么不能用 `in srgb` 混白？

浏览器报错是 Invalid color space in color-mix()，不是颜色不准——srgb 不支持白/黑作为插值端点。官方规范要求：纯白/纯黑只能在感知均匀空间（如 oklch、lch）中参与线性插值。用 in srgb, #3a5fa8 70%, white 30% 这类写法，CSS 声明直接被忽略，降级为初始色，控制台无提示。

oklch(100% 0 0) 是纯白（L=100%，C=0，h 任意）
oklch(0% 0 0) 是纯黑（L=0%，C=0，h 任意）
必须完整写出 oklch() 字面量，不能简写为 white 或 black

怎样把一个品牌色可靠地变淡？

不能直接拿十六进制和 oklch(100% 0 0) 混——那会偏色，因为色相/饱和度没对齐。正确路径是先转目标色为 oklch，再固定 C/h，只调 L 值插值。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

用 Chrome DevTools 的拾色器点选 #3a5fa8，复制其 oklch(L C h) 值，例如 oklch(55.2% 0.215 252.3)
变淡（tint）：提高 L，比如 color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%)
权重总和必须为 100%，写成 70% 20% 会失效（剩 10% 未分配）
不要用 calc() 动态算比例——color-mix() 不接受变量，所有值必须是字面量

怎么让旧浏览器不崩、新浏览器有渐变？

color-mix() 没自动 fallback，@supports 是唯一可控手段。但注意：检测语法必须带完整函数签名，不能只写 @supports (color-mix)。

兜底必须设在 @supports 外层，否则旧浏览器连变量都不继承
检测写法： @supports (color: color-mix(in oklch, red, blue))

示例：

button {
  --primary: #3a5fa8;
  --primary-light: #b8d6ff; /* fallback hex */
}
@supports (color: color-mix(in oklch, red, blue)) {
  button {
    --primary-light: color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%);
  }
}

真正容易被忽略的是：变淡不是“加白”，而是「在感知均匀空间里提升明度」；你看到的灰、脏、发粉，大概率是用了 srgb 或没转对色彩空间——别信眼睛，用 DevTools 拾色器看输出色的 oklch L 值是否线性上升。