如何通过HTML的CSS color-mix()函数按比例混合两种颜色生成中间值

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《如何通过HTML的CSS color-mix()函数按比例混合两种颜色生成中间值》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

color-mix() 必须显式指定颜色空间（如 in srgb）并用小数（如 0.5）而非裸百分比（如 50%）表示权重；不支持 calc() 等函数动态计算权重，仅限静态值。

color-mix() 不能直接用百分比写成 color-mix(in srgb, red 50%, blue 50%)

浏览器目前（截至 Chrome 118+、Safari 16.4+、Firefox 119+）支持 color-mix()，但它**不接受裸数字百分比**作为权重。你写 red 50% 会被解析为“50% 的 red 颜色透明度”，而非“red 占混合权重的 50%”。这是最常卡住人的地方。

正确写法必须显式声明权重单位：red 50% ❌ → red 50%（这里 % 是合法的，但仅当上下文明确是 weight 时才生效；而实际解析器要求更严格）——真正稳妥且被所有支持引擎一致接受的是使用无单位数值（如 0.5）或带 % 但需配合 in 关键字和完整语法。

• color-mix(in srgb, red 0.5, blue 0.5) ✅ 推荐：小数权重最直观，兼容性好
• color-mix(in srgb, red 50%, blue 50%) ⚠️ 表面可行，但部分旧版 Safari 会静默失败或回退到默认色
• color-mix(in srgb, red, blue) ❌ 默认各占 50%，但无法自定义比例，且不可靠（规范未强制默认值）

必须指定颜色空间，in srgb 不是可选的

省略 in 会导致整个函数无效（CSS 解析失败，该声明被丢弃）。即使你只混两个 sRGB 颜色，也必须显式写 in srgb —— 这不是冗余，而是强制要求。

其他空间如 in lch 或 in oklch 虽然存在，但目前只有 Firefox 实验性支持 oklch，Chrome/Safari 对非 srgb 支持极弱或完全忽略。想稳定产出中间值，只用 in srgb。

• 错误写法：color-mix(red 0.7, blue 0.3) → 整条规则失效
• 正确写法：color-mix(in srgb, red 0.7, blue 0.3)
• 注意：空格和逗号之间不能有换行或制表符，否则 CSS 解析器可能截断

混合结果不是简单线性插值，sRGB 下视觉上偏暗

color-mix(in srgb, ...) 是在 sRGB 编码值上做加权平均（即对 R、G、B 通道分别算 r = r1×w1 + r2×w2），不是在人眼感知均匀的空间里混合。所以 color-mix(in srgb, white 0.5, black 0.5) 得到的是 rgb(127.5, 127.5, 127.5)，也就是 #7f7f7f —— 看起来比视觉正中的灰色（约 #808080）略暗，但差异小；而混亮色+深色时偏差更明显，比如 yellow 和 navy 各半，结果偏棕灰，不是预期的“中性橄榄”。

• 如果你需要感知均匀的中间色，得先转 oklch（需 JS 辅助），color-mix() 本身做不到
• 纯前端场景下，接受 sRGB 线性混合的结果即可，它符合 CSS 规范定义，且渲染一致
• 验证方式：把结果色值复制进 DevTools 的 color picker，看 RGB 分量是否符合权重计算

在真实 CSS 中使用的最小可靠写法

别试图一行写完所有逻辑。先确保基础能跑通，再叠加变量或 calc()。

<code>.mid-tone {
  background-color: color-mix(in srgb, #ff6b6b 0.4, #4ecdc4 0.6);
}
</code>

如果要用 CSS 变量控制比例：

<code>:root {
  --mix-ratio: 0.3;
}
.mid-tone {
  /* 注意：calc() 不能直接嵌在 color-mix() 权重里 */
  /* 所以比例必须预计算或用 JS 注入 */
  background-color: color-mix(in srgb, #ff6b6b var(--mix-ratio), #4ecdc4 calc(1 - var(--mix-ratio)));
}
</code>

⚠️ 上面 calc(1 - var(--mix-ratio)) 在当前所有浏览器中都**不被支持** —— color-mix() 的权重部分不接受函数调用。只能用 JS 动态设置自定义属性，或预设几档固定比例类名（如 .mix-30, .mix-70）。

真正要动态混合，就得放弃纯 CSS，改用 JS 计算 RGB 值再拼字符串。CSS 的 color-mix() 是静态工具，不是运行时 API。

以上就是《如何通过HTML的CSS color-mix()函数按比例混合两种颜色生成中间值》的详细内容，更多关于的资料请关注golang学习网公众号！