Javascript 如何获得立体背景色和半透明叠加色的有效结果（6位十六进制值）？

假设我有两种颜色：一种是纯色背景色（6位十六进制值）和一种带有不透明度的叠加色（6位十六进制值和一些不透明度百分比）

获取有效合成颜色（6位十六进制值）的函数是什么？换句话说，如果我在同一区域上绘制两种颜色（首先是背景，然后是叠加），然后使用滴管工具获取颜色值，那么如何以编程方式获取相同的颜色值

任何编程语言（甚至伪代码）在这里都可以使用。

RGB颜色代码（和十六进制）有三个不同的部分-红色、绿色和蓝色的值。要找到两种颜色的“和”，您需要分别计算每个部分的平均值，然后将它们重新组合在一起。下面是一些JavaScript，它将两种颜色分割成数字数组，平均它们的值，然后返回一个新数组。这也适用于RGBA

function calcColorAverages(firstColor, secondColor){

  let newColor = [];

  for(let index in firstColor){
    let colorOne = firstColor[index]
    let colorTwo = secondColor[index]

    let average = Math.round((colorOne + colorTwo) / 2);

    newColor[index] = average;

  }

  return newColor

}

let red = [255, 0, 0]
let blue = [0, 0, 255]

let purple = calcColorAverages(red, blue)

console.log(purple) //128, 0, 128

---

您需要alpha合成公式：

result_red =  fg_red * α_fg + bg_red * (1 - α_fg)
result_blue =  fg_blue * α_fg + bg_blue * (1 - α_fg)
result_green =  fg_green * α_fg + bg_green * (1 - α_fg)

您可以在

Thank You@Katie.Sun中找到更多信息和示例，不过我正在寻找一些不同的东西。我需要一个函数，它将两种重叠的颜色（以及顶色的不透明度）作为参数，并生成结果的有效纯色。我给出的“dropper tool”示例只是用来让我的问题更清楚——这不是预期的最终实现。