如何在JavaScript中计算两层透明叠加后的RGB结果色？

核心混合公式 #

当上层元素带有透明度（Alpha值）、下层元素完全不透明时，每个RGB通道的最终颜色值可通过以下公式计算：

最终通道值 = 上层通道值 × 上层Alpha + 下层通道值 × (1 - 上层Alpha)

代入本例参数计算 #

已知：

• 下层红色div：RGB(204, 51, 0)，Alpha=1
• 上层蓝色透明div：RGB(77, 148, 255)，Alpha=0.4

逐个通道计算（结果取整）：

• 红色通道(R)：77 × 0.4 + 204 × (1 - 0.4) = 30.8 + 122.4 = 153
• 绿色通道(G)：148 × 0.4 + 51 × (1 - 0.4) = 59.2 + 30.6 = 90
• 蓝色通道(B)：255 × 0.4 + 0 × (1 - 0.4) = 102 + 0 = 102

最终呈现的RGB颜色为 rgb(153, 90, 102)

编程实现（JavaScript） #

封装通用函数处理此类叠加场景：

function calculateMixedRGB(bgRGB, fgRGB, fgAlpha) {
  const [bgR, bgG, bgB] = bgRGB;
  const [fgR, fgG, fgB] = fgRGB;
  
  const mixedR = Math.round(fgR * fgAlpha + bgR * (1 - fgAlpha));
  const mixedG = Math.round(fgG * fgAlpha + bgG * (1 - fgAlpha));
  const mixedB = Math.round(fgB * fgAlpha + bgB * (1 - fgAlpha));
  
  return `rgb(${mixedR}, ${mixedG}, ${mixedB})`;
}

// 代入本例参数调用
const bgColor = [204, 51, 0];
const fgColor = [77, 148, 255];
const fgOpacity = 0.4;

console.log(calculateMixedRGB(bgColor, fgColor, fgOpacity)); // 输出 "rgb(153, 90, 102)"

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