CSS color-mix 怎样生成主题的中间色

我第一次把主题色拆成“主色、浅色背景、强调色”时，最容易犯的错是手工准备一长串十六进制颜色：换一个品牌色，按钮、卡片和提示层都要重新调。现在更愿意让 CSS 用 color-mix() 生成中间色，但会先把混色空间和回退写法定下来。

官方参考地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix

先把主题色拆成可维护的层级

我会先区分“原始主题输入”和“组件语义变量”。例如 --brand 是品牌主色，--surface 是页面底色，按钮和卡片不要直接重复写混色表达式，而是消费 --accent、--surface-raised 这类语义变量。这样换品牌色时，调整点仍然只有一处。

:root {
  /* 原始输入只保留真正需要被主题化的颜色。 */
  --brand: #6750a4;
  --surface: #ffffff;

  /* 组件使用语义变量，不直接耦合某个十六进制结果。 */
  --accent: color-mix(in oklab, var(--brand) 82%, white);
  --surface-raised: color-mix(in oklab, var(--surface) 92%, var(--brand));
}

.button-primary {
  /* 按钮只关心语义颜色，主题替换时无需修改组件规则。 */
  background: var(--brand);
  color: var(--surface);
}

.card-highlight {
  /* 卡片消费同一套主题变量，避免重复维护中间色。 */
  background: var(--accent);
}

用 oklab 和比例生成中间色

color-mix() 的基本形状是 color-mix(in 色彩空间, 颜色 百分比, 颜色 百分比)。不写百分比时，两种颜色默认各占一半；只写一边时，另一边会补足到 100%。如果两边合计不是 100%，浏览器会先按比例归一化，合计低于 100% 时还会留下相应透明度。

我在主题色场景里通常先从 oklab 开始，因为它更适合做感知上比较平滑的浅色层。下面这组变量只改变主色参与的比例，读者也能很直观看出“比例越高，结果越靠近主色”。

:root {
  --brand: #0f766e;

  /* 主色占 16%，得到偏浅的背景层。 */
  --brand-soft: color-mix(in oklab, var(--brand) 16%, white);

  /* 主色占 56%，得到更有存在感的强调层。 */
  --brand-strong: color-mix(in oklab, var(--brand) 56%, white);

  /* 两种颜色都不写比例时，默认按 50% + 50% 混合。 */
  --brand-half: color-mix(in oklab, var(--brand), white);
}

按目标选择混色空间

混色空间不是装饰性参数。同一对颜色放进不同空间，得到的中间结果可能明显不同。需要感知上均匀的渐变或背景层时，oklab 是一个稳妥起点；想让过渡尽量保持色彩鲜明、减少发灰，可以试 oklch。只有需要复现某个既有 sRGB 算法或设备表现时，我才会明确写 srgb。

极坐标空间还可以指定色相走哪条路径。shorter hue 是默认路线；如果设计要求沿较长方向过渡，可以写 longer hue。这类选项更适合确实关心色相路线的主题渐变，不建议为了“看起来高级”而到处添加。

.theme-preview {
  /* 感知均匀：适合大多数主题浅色层。 */
  background: color-mix(in oklab, var(--brand) 24%, white);
}

.vivid-preview {
  /* 尽量保持色度：适合需要更鲜明的彩色过渡。 */
  background: color-mix(in oklch, var(--brand) 48%, #f97316);
}

.legacy-match {
  /* 只有需要匹配既有 sRGB 规则时才显式指定 srgb。 */
  background: color-mix(in srgb, var(--brand) 50%, white);
}

用 @supports 给动态颜色留一条回退路

兼容写法的关键是把回退放在前面：组件先得到一个确定的纯色，支持 color-mix() 的环境再覆盖它。不要把整套组件都藏在 @supports 里，否则不支持该函数的浏览器可能连基础背景都没有。

.notice {
  /* 不支持 color-mix() 时仍保留可读的固定背景。 */
  background: #d9f5ef;
  color: #164e63;
}

@supports (background: color-mix(in oklab, white, black)) {
  .notice {
    /* 能力存在时，用主题色生成动态背景。 */
    background: color-mix(in oklab, var(--brand) 14%, white);
    color: color-mix(in oklab, var(--brand) 72%, black);
  }
}

如果项目还需要兼容更复杂的色彩空间，可以先把基础表达式留在 oklab，再为明确支持的增强场景单独加规则。回退颜色要按对比度和品牌视觉预先选好，不要把“函数不支持”误处理成透明背景或无色文字。

我的落地顺序和几个误区

1. 先写 --brand、--surface 等原始输入，再命名组件语义变量。
2. 用 oklab 生成第一版中间色，先观察明度与可读性。
3. 颜色显得发灰时，再比较 oklch；只有兼容既有算法时才切换到 srgb。
4. 每个动态值前面保留固定回退，并用 @supports 做能力覆盖。

常见问题

不写 in 会使用什么颜色空间？

当前规范语义下默认使用 oklab。为了让代码意图更清楚，主题系统里我仍倾向于显式写出 in oklab。

两个颜色都不写百分比可以吗？

可以。两种颜色会按 50% 和 50% 混合；如果只给其中一边写比例，另一边会补足剩余比例。

为什么要保留固定回退？

因为 CSS 函数支持情况和项目兼容范围可能不同。先给出普通颜色，支持新函数时再覆盖，能把不可用能力限制在动态增强层。

主题中间色应该统一用 oklab 吗？

不必绝对统一。大多数感知均匀的浅色层可以从 oklab 开始，追求保持色度时比较 oklch，需要复现旧 sRGB 行为时再使用 srgb。最终还要结合文字对比度和具体组件检查。