Как получить эффективный результат (6-значное шестнадцатеричное значение) сплошного фона и полупрозрачного оверлея?

Question

Допустим, у меня есть 2 цвета: сплошной фоновый цвет (шестнадцатеричное шестнадцатеричное значение) и оверлейный цвет с непрозрачностью (шестнадцатеричное шестизначное значение и некоторый процент непрозрачности).

Что такое функция для получения эффективного результирующего цвета (6-значное шестнадцатеричное значение)? Другими словами, если я закрашиваю оба цвета в одной и той же области (сначала фон, затем наложение), а затем использую инструмент-пипетку, чтобы получить значение цвета, как программно получить одно и то же значение цвета?

Здесь можно использовать любой язык программирования (даже псевдокод).

Answer 1

Вам нужна формула альфа-композитинга:

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

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