"CSS 颜色混合：color-mix() 与相对色"

概述`color-mix()` 允许在指定色彩空间（如 `lab`/`lch`/`srgb`/`display-p3`）按比例混合颜色，相比仅在 sRGB 下混合，可获得更线性的、视觉更一致的结果。相对色语法可基于已有颜色进行调整，适用于主题与组件体系。示例.btn { color: color-mix(in lab, #0066ff 60%, white 40%) } .accent { color: color(display-p3 0.9 0.2 0.2) } /* 相对色（示意，浏览器支持需验证） */ .muted { color: color(from #0066ff lab l a b / 80%) } 工程建议空间选择：在需要视觉线性时使用 `lab`/`lch`；在广色域设备上使用 `display-p3` 并提供 sRGB 回退。一致性：保持设计工具与实现的色彩空间一致；为图片与字体设置正确的 MIME 与色彩标记。兼容：对不支持的浏览器提供近似 sRGB 值或降级方案；通过特性查询控制层叠。参考与验证MDN `color-mix()` 文档：https://developer.mozilla.org/docs/Web/CSS/color_value/color-mixCSS Color Module Level 4/5：https://www.w3.org/TR/css-color-4/web.dev 颜色函数指南：https://web.dev/articles/css-color-function