color-mix()必须显式指定色彩空间（如in srgb、in lch或in oklch），漏写、拼错或大小写错误会导致整条声明静默失效；仅srgb、lch、oklch等为合法空间名，hsl/hwb不建议用于生产；srgb兼容性最好但混合偏暗，lch/oklch更自然但需@supports包裹并配fallback。
color-mix() 必须显式写 in srgb、in lch 或 in oklch
浏览器不会自动补全色彩空间，漏掉 in srgb 或拼错成 in rgb 会导致整条声明静默失效——DevTools 里显示为“无效值”，控制台也不报错。目前只有 srgb、lch、oklch、srgb-linear、lab、oklab 等是合法空间名，大小写敏感（sRGB 就非法）。hsl 和 hwb 虽然语法上被接受，但实际混合行为未标准化，不建议用于生产。
in srgb 混合最稳，但结果常偏暗
in srgb 是当前兼容性最好的选项（Chrome/Edge 111+、Safari 16.4+ 稳定支持），适合需要像素级复现的场景，比如按钮悬停加深、设计稿还原。但它本质是非线性空间，直接插值会压低亮度：比如 color-mix(in srgb, #ff0000 50%, #0000ff 50%) 得到的是暗紫 #7f007f，不是视觉居中的品红。如果你看到混合色比预期更灰、更浊，大概率是 srgb 的固有特性，不是代码写错了。
in lch / in oklch 更自然，但需 @supports 包裹
in lch 和 in oklch 在亮度（L）和色度（C）维度上更接近人眼感知，混合红→黄、蓝→白这类过渡时不易发灰或断层。但支持度有限：in lch 在 Chrome 111+ 和 Safari 16.4+ 可用，in oklch 仅 Chrome/Edge 支持，Safari 16.4+ 才开始支持，Firefox 仍不认。必须用 @supports (color: color-mix(in lch, red, blue)) 包裹整段样式，否则不支持的浏览器会跳过全部规则，导致样式错乱。
- 黑白混合必须用
in oklch或in lch：写color-mix(in srgb, white, black)会失败 -
oklch(100% 0 0)是纯白，oklch(0% 0 0)是纯黑，混入比例即得中性灰阶 - 基础色转 oklch 需工具辅助：不能靠肉眼估算，得用 Chrome DevTools 颜色拾取器或在线转换器先拿到 L/C/h 值
权重格式和颜色值写法极易踩坑
color-mix() 对输入极其苛刻：它不接受 var(--primary)、不接受 currentColor、不接受简写色名如 white 或 black。所有颜色都必须是完整字面量，比如 #2563eb、hsl(210 70% 60%)、oklch(55.2% 0.215 252.3)。权重可以是 60% 或 0.6，但不能混用（red 60 缺 % 就失效），也不能只写一个（red 60%, blue 合法，但 red, blue 40% 会静默失败）。最易被忽略的是：哪怕只差一个空格、一个分号、一个括号位置不对，整个函数就归零——它不是“尽力而为”，而是“全有或全无”。
立即学习“前端免费学习笔记（深入）”；
