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