如何获取CSS color-mix混合两种颜色的结果值？兼容旧浏览器

手动计算（默认/自定义比例） #

color-mix默认采用sRGB色彩空间、50%权重混合两种颜色，计算逻辑是对RGB三个分量分别做加权平均：

• 50%比例示例：color-mix(in srgb, #ff0000, #00ff00)
  R分量：(255 + 0) / 2 = 127 → 0x7f
  G分量：(0 + 255) / 2 = 127 → 0x7f
  B分量：(0 + 0) / 2 = 0 → 0x00
  最终硬编码值：#7f7f00
• 自定义比例示例：color-mix(in srgb, #ff0000 30%, #00ff00 70%)
  R分量：2550.3 + 00.7 ≈ 77 → 0x4d
  G分量：00.3 + 2550.7 ≈ 179 → 0xb3
  B分量：0 → 0x00
  最终硬编码值：#4db300

利用浏览器控制台快速获取结果 #

在支持color-mix的现代浏览器（Chrome、Firefox等）控制台执行以下步骤：

1. 临时给某个元素设置目标color-mix样式：

document.body.style.color = 'color-mix(in srgb, #your-color-1, #your-color-2)';

2. 获取计算后的最终颜色值：

getComputedStyle(document.body).color;

复制返回的十六进制或RGB值，直接用于硬编码即可。

兼容CSS写法 #

优先写硬编码的兼容值，再写color-mix作为现代浏览器增强：

.target-element {
  /* 硬编码的混合结果，适配不支持color-mix的浏览器 */
  background-color: #7f7f00;
  /* 现代浏览器会覆盖上面的规则 */
  background-color: color-mix(in srgb, #ff0000, #00ff00);
}

内容的提问来源于stack exchange，提问作者user2297550