CSS color-mix 怎么按主题色生成悬停和禁用颜色

如果组件只有一个主色变量，悬停、禁用和浅背景色不必各维护一份孤立的十六进制值。CSS color-mix() 可以把基础色与白色、黑色或透明色混合，生成一组有来源关系的状态色；关键是限制混合范围，并为不支持该函数的浏览器保留静态回退。

最小方案是先定义基础色，再用 color-mix(in srgb, var(--brand) 88%, white) 生成浅色状态。不要把混合比例当成对比度保证，最终仍要检查文字与背景的可读性。

用一个基础色生成组件状态色

下面的示例只维护 --brand，按钮的悬停、禁用和浅背景色都从它派生。这样切换主题时只需要替换基础色，组件状态不会散落在多处。

:root {
  /* 主题入口只保留一个主色，便于整套组件统一换肤。 */
  --brand: #2563eb;
  --on-brand: #ffffff;
  --surface: #ffffff;
}

.button {
  /* 用较高比例保留主色，避免悬停色变成完全不同的蓝色。 */
  background: var(--brand);
  color: var(--on-brand);
  border: 1px solid var(--brand);
}

.button:hover {
  /* 与白色混合，得到更浅的悬停状态。 */
  background: color-mix(in srgb, var(--brand) 88%, white);
}

.button:disabled {
  /* 透明度表达不可操作，但仍保留主题色来源。 */
  background: color-mix(in srgb, var(--brand) 38%, transparent);
  color: color-mix(in srgb, var(--brand) 55%, #666666);
  cursor: not-allowed;
}

.panel--brand {
  /* 低比例混合适合做浅背景，不适合直接当正文文字色。 */
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 28%, var(--surface));
}

这组写法的边界很明确：color-mix() 负责从已有颜色得到新颜色，不负责判断文字是否足够清晰，也不负责决定禁用控件是否仍应被读屏器识别。按钮的语义和可访问性属性仍要由 HTML 与交互逻辑完成。

选对混合颜色空间和比例

color-mix() 的第一个参数可以指定颜色空间，例如 in srgb。显式写出空间比依赖默认行为更容易维护，因为读者能直接看出这段样式是在传统 RGB 空间里做混合。对于普通按钮状态，in srgb 是容易理解的起点；如果设计系统已经规定了其他颜色空间，应保持全套状态色的规则一致。

.button--darken:hover {
  /* 黑色比例越高，结果越暗；比例应和设计令牌一起调整。 */
  background: color-mix(in srgb, var(--brand) 82%, black);
}

.button--muted {
  /* currentColor 让边框和文字沿用当前上下文颜色。 */
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.badge {
  /* 透明色会改变结果的 alpha，适合做柔和背景而非正文颜色。 */
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}

比例不是“亮度百分比”。混合对象的顺序、颜色空间和另一端颜色都会改变结果；例如把主色与 white 混合，和把主色与透明色混合，并不是同一种视觉效果。把这类规则写成设计令牌时，建议给状态命名，而不是把 88% 直接散落到每个组件。

用 @supports 做静态颜色回退

新颜色函数不能假设所有浏览器都支持。可以先写一个经过设计确认的静态色值，再用 @supports (background: color-mix(in srgb, red, white)) 覆盖现代环境。旧环境至少能得到可用颜色，支持该函数的环境才使用主题派生值。

.button {
  /* 回退值必须是实际可用的静态颜色，不能留空。 */
  background: #3f75e8;
  color: #ffffff;
}

@supports (background: color-mix(in srgb, red, white)) {
  .button {
    /* 特性存在时再启用主题派生状态色。 */
    background: var(--brand);
  }

  .button:hover {
    /* 覆盖回退值，保留与基础色的关系。 */
    background: color-mix(in srgb, var(--brand) 88%, white);
  }
}

@supports not (background: color-mix(in srgb, red, white)) {
  .button:hover {
    /* 不支持时使用与设计稿确认过的悬停回退色。 */
    background: #315fc2;
  }
}

@supports 判断的是声明是否被解析，不代表颜色已经通过对比度审核。因此回退值和现代值都要纳入同一份主题测试。对复杂组件，可以把回退值放入基础层，把 color-mix() 放在增强层，减少重复规则。

把可读性和主题维护纳入检查

状态色真正上线前，至少检查四件事：

• 悬停、聚焦、按下和禁用是否有清晰的视觉差异，不能只改变一个难以察觉的色阶。
• 文字与按钮背景、图标与浅背景之间是否保持足够对比度，不能因为颜色是自动混合就跳过检查。
• 禁用颜色是否仍然能表达“不可操作”，同时保留必要的文本和焦点语义。
• 主题切换时，主色、文字色和回退色是否仍然成组更新，避免浅色主题套用深色主题的固定回退。

如果状态色需要大量例外，通常说明基础设计令牌还不够完整。可以把 --brand-hover、--brand-disabled 和 --brand-surface 作为语义令牌，并在支持 color-mix() 的主题层中计算它们；这样组件只消费语义变量，不关心颜色是固定值还是混合结果。

常见问题

color-mix() 能直接保证无障碍对比度吗？

不能。它只描述颜色计算，最终对比度取决于混合后的前景色和背景色，必须把结果放进设计或自动化检查中。

为什么不把所有颜色都写成固定十六进制值？

固定值在兼容性上简单，但主题切换和多组件维护成本更高。更稳妥的做法是保留静态回退，同时在现代浏览器中从语义基础色派生状态色。

什么时候应该使用更复杂的颜色空间？

当设计系统已经明确规定感知一致性或跨主题颜色策略时，再统一选择其他颜色空间。不要只因为函数支持多个空间就让同一套组件混用多种规则。

总结来说，color-mix() 适合减少重复色值，但它不能替代状态语义、对比度检查和浏览器回退。先定义基础色与语义令牌，再用显式颜色空间生成状态，最后用 @supports 兜住旧环境，维护成本和风险才能一起下降。