CSS color-mix() 怎样按比例混合两种主题色

如果页面已经有品牌色和背景色，想继续得到柔和底色、强调边框或悬停色，不必为每个状态手工写一串新颜色。color-mix() 可以把两个或多个颜色放进指定颜色空间，按比例得到一个新的颜色值。实际使用时，最重要的不是记住函数名，而是同时确定三件事：混合哪两个基础色、各占多少比例，以及在哪个颜色空间里插值。

我的经验是先把 color-mix() 当成主题令牌层的派生规则，而不是组件里的临时魔法。基础色变化时，派生色会跟着变化；颜色空间和比例固定下来后，组件只消费令牌，不需要重复理解混色细节。

先把基础色、比例和颜色空间拆开

color-mix() 的基本形态是 color-mix(in 颜色空间, 颜色A 比例, 颜色B 比例)。颜色可以来自命名颜色、十六进制、函数颜色或自定义属性；in 后面写插值颜色空间，后面的颜色列表则定义参与混合的输入。

:root {
  /* 只维护少量基础主题色，派生色交给令牌层计算 */
  --brand: #3457d5;
  --surface: #ffffff;

  /* oklab 让主题色和表面色按感知更均匀的空间混合 */
  --brand-soft: color-mix(in oklab, var(--brand) 18%, var(--surface));
  /* 未写第二个比例时，剩余比例由另一个颜色补足 */
  --brand-strong: color-mix(in oklab, var(--brand) 78%, var(--surface));
}

.button {
  /* 组件只消费派生令牌，不重复计算颜色 */
  background-color: var(--brand);
  border-color: var(--brand-strong);
}

.button:hover {
  /* hover 状态复用同一套主题输入 */
  background-color: var(--brand-strong);
}

上面的写法有一个容易忽略的好处：--brand 和 --surface 是输入，--brand-soft 与 --brand-strong 是输出。以后更换品牌色时，组件无需逐个修改。若两个颜色都不写比例，则默认各占 50%；只写一方时，另一方会补足到 100%。

按视觉目标选择 oklab、oklch 或 srgb

颜色空间不是装饰参数。同一对输入色换一个颜色空间，混合路径和最终观感就可能不同。一般可以这样判断：想让明度过渡更均匀，先考虑 oklab；想尽量保留色彩鲜艳度，考虑 oklch；必须贴合已有设备或软件的 sRGB 计算结果时，再明确写 srgb。

:root {
  --blue: #3457d5;
  --orange: #f08a24;

  /* 适合把两个主题色做成感知上更平滑的中间色 */
  --blend-perceptual: color-mix(in oklab, var(--blue), var(--orange));
  /* 适合希望过渡中尽量保持色度的主题强调色 */
  --blend-chroma: color-mix(in oklch, var(--blue) 55%, var(--orange));
  /* 只有需要匹配既有 sRGB 逻辑时才固定到 sRGB */
  --blend-device: color-mix(in srgb, var(--blue) 55%, var(--orange));
}

.swatch {
  /* 用令牌展示三种插值契约，避免组件散落函数调用 */
  background: var(--blend-perceptual);
}

.swatch--chroma {
  /* 这个状态只替换令牌，不改变组件结构 */
  background: var(--blend-chroma);
}

不要把“默认使用 oklab”理解成所有场景都应该省略 in。省略可以让示例简洁，但在设计系统里显式写出颜色空间更容易复查，也能避免后来的人误把视觉差异归因于比例。

看懂百分比归一化和透明度边界

比例写法看似简单，边界却很容易在主题令牌里被忽略。两个颜色都不写比例时各占 50%；如果只写一个比例，另一个颜色补足到 100%。如果两边都写了比例但总和不是 100%，浏览器会先把它们归一化。总和小于 100% 时，结果还会受到透明度乘数影响，效果类似于把剩余部分混入透明色。

:root {
  --brand: #3457d5;
  --paper: #ffffff;

  /* 70% + 未声明比例，未声明的一方补到 30% */
  --balanced: color-mix(in oklab, var(--brand) 70%, var(--paper));

  /* 40% + 40% 会先归一化到两边各占 50%，并保留总和不足的透明度影响 */
  --soft-overlay: color-mix(in oklab, var(--brand) 40%, var(--paper) 40%);

  /* 与透明色混合时，透明度本身就是设计意图的一部分 */
  --brand-wash: color-mix(in srgb, var(--brand) 24%, transparent);
}

.badge {
  /* 使用派生色时，不再在每个组件里重新写百分比 */
  background-color: var(--brand-wash);
  color: var(--brand);
}

.panel {
  /* 让同一基础色在不同表面上保持一致的派生规则 */
  background-color: var(--soft-overlay);
}

因此，主题令牌命名最好把用途写出来，而不是只写 --mix-40。--brand-wash 表达了“带透明感的品牌色”，--brand-strong 表达了“更接近基础品牌色的强调层级”，后续调整时更不容易把数字误当成语义。

把派生色放进主题变量层，并保留回退

如果目标环境可能不识别 color-mix()，可以先给一个静态回退，再用 @supports 覆盖派生值。回退应该保证文字和控件仍然可用，而不是试图在旧环境里模拟完整的颜色空间算法。

:root {
  /* 旧环境先获得一个稳定的静态颜色 */
  --button-bg: #3457d5;
  --button-border: #263f9e;
  --button-text: #ffffff;
}

@supports (color: color-mix(in oklab, red, white)) {
  :root {
    /* 能力存在时才启用动态派生令牌 */
    --button-border: color-mix(in oklab, #3457d5 78%, white);
    --button-bg-hover: color-mix(in oklab, #3457d5 86%, white);
  }
}

.button {
  /* 统一从令牌读取，回退与增强不需要改组件选择器 */
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--button-text);
}

.button:hover {
  /* 没有增强令牌时沿用基础色，不让 hover 失去可用性 */
  background: var(--button-bg-hover, var(--button-bg));
}

@supports 只负责判断声明能否被识别，不负责判断颜色是否符合你的品牌规范。对比度、文字可读性和交互状态仍然要由设计令牌和组件规则共同决定；不要把“能解析”误当成“已经适合上线”。

用组件边界控制派生色数量

当项目变大时，真正的瓶颈通常不是混色函数本身，而是每个组件都开始拥有一套私有比例。可以把颜色令牌分成三层：基础色、语义色、组件消费色。颜色空间和比例优先固定在前两层，组件只引用已经命名的结果。

:root {
  /* 基础层：品牌输入，不绑定具体组件 */
  --brand: #3457d5;
  --surface: #ffffff;

  /* 语义层：集中定义视觉层级和颜色空间 */
  --action: var(--brand);
  --action-hover: color-mix(in oklab, var(--brand) 84%, var(--surface));
  --action-soft: color-mix(in oklch, var(--brand) 16%, var(--surface));
}

.button,
.link {
  /* 多个组件共享同一语义输出，避免各写一套比例 */
  color: var(--action);
}

.button:hover,
.link:hover {
  /* hover 层也由语义令牌统一管理 */
  color: var(--action-hover);
}

.notice {
  /* 柔和底色可复用到提示、标签和轻量面板 */
  background: var(--action-soft);
}

这套分层让颜色空间成为可审查的工程决策：基础色负责品牌输入，语义层负责“强调、悬停、柔和”等结果，组件层只负责布局和状态。如果某个组件确实需要特殊比例，应先确认它是新的语义层级，而不是把数字直接散落到选择器里。

常见问题

color-mix() 两个颜色都不写百分比时是多少？

两个颜色都省略比例时，默认各占 50%。如果只写一个颜色的百分比，另一个颜色会补足到 100%。

为什么总和写成 80% 后颜色看起来更透明？

两边比例总和小于 100% 时，规范会对结果施加透明度乘数，剩余部分的效果类似混入透明色。需要不透明结果时，显式把比例补到 100% 更清晰。

主题色混合应该优先用 oklab 还是 oklch？

如果目标是更平滑的感知过渡，先从 oklab 开始；如果特别在意过渡中不要明显变灰、希望尽量保持色度，可以考虑 oklch。最终仍要按品牌色和可读性要求取舍。

什么时候必须使用 srgb？

当你需要匹配某个既有设备、设计工具或历史样式的 sRGB 计算结果时，才明确固定到 srgb。如果只是想得到更自然的主题派生色，不要因为熟悉 sRGB 就默认它最好。

总结一下：color-mix() 的稳定用法是把基础色、比例和颜色空间当成一份明确契约。先在令牌层决定输入和插值空间，再让组件消费命名结果；同时处理比例归一化、透明度和 @supports 回退。这样换主题色时，派生层能保持一致，组件也不会被大量重复的颜色计算绑住。