color-mix() 函数通过指定混合模式、起始颜色、终止颜色和比例参数，在 css 中实现色彩的动态按比例混合。核心做法是调用 color-mix(in srgb, color1, percentage)，其中 percentage 控制两种颜色的权重，改变该数值即可实时调整混合结果的颜色值。
color-mix() 的语法结构与参数含义是什么
该函数的基本语法为 color-mix(in 。第一个参数 in 后紧跟色彩空间，通常使用 srgb 或 lab。第二个参数是起始颜色，可以是任何有效的 CSS 颜色值。第三个参数是百分比，表示 color1 在最终混合色中的占比，剩余部分由隐式的 color2 填充，其占比为 100% - percentage。例如，50% 表示等量混合，80% 表示 color1 占主导。
/* 示例：50% 红色与蓝色混合 */
.element {
background-color: color-mix(in srgb, red 50%, blue);
}
/* 示例：80% 红色与蓝色混合 */
.element-strong-red {
background-color: color-mix(in srgb, red 80%, blue);
}
不同色彩空间（srgb vs lab）对混合结果有何影响
选择 srgb 还是 lab 会显著改变混合后的视觉感知。srgb 是基于红绿蓝通道的线性插值，混合时可能产生灰暗或不自然的中间色。lab 色彩空间更接近人眼感知，混合结果通常更明亮、平滑且符合直觉。在实际开发中，若追求自然过渡，优先使用 lab；若需精确控制 RGB 通道或兼容旧逻辑，使用 srgb。
/* srgb 混合：可能偏灰 */
.bg-srgb {
background-color: color-mix(in srgb, red 50%, blue);
}
/* lab 混合：更鲜艳自然 */
.bg-lab {
background-color: color-mix(in lab, red 50%, blue);
}
当混合比例设置为 0% 或 100% 时返回什么结果
当混合比例设置为 0% 时，color-mix() 完全忽略 color1，直接返回 color2 的值。反之，当比例为 100% 时，完全忽略 color2，直接返回 color1 的值。这种边界行为确保了在动态计算比例时，颜色能平滑过渡到纯色端点，不会出现无效或异常颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
