Question

假设我有2种颜色：纯色背景色（6位十六进制值）和具有不透明度的覆盖色（6位十六进制值和一些不透明度百分比）。

获取有效结果颜色（6位十六进制值）的功能是什么？换句话说，如果我将两种颜色都涂在同一区域（先是背景，然后是覆盖层），然后使用滴管工具来获得颜色值，那么如何以编程方式获得相同的颜色值？

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

Answer 1

您需要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)

您可以在W3C Candidate Recommendation

中找到更多信息和示例。

Answer 2

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

如何获得纯背景颜色和半透明覆盖颜色的有效结果（6位十六进制值）？

2 个答案: