Как совместить два цвета с различными значениями альфа

Question

У меня есть два цвета, C₀ и C₁. Они имеют переменные значения alpha, red, green и blue: (a₀, r₀, b₀, g₀) и (a₁, r₁, b₁, g₁). Мне интересно, есть ли простая формула для объединения этих цветов, чтобы получить правильный новый цвет (c₂).

Допустим, что c₀ перекрывает c₁. Я понимаю, что если бы они имели равные альфа-значения, то усреднение их сравнительных значений красного, зеленого и синего цветов помогло бы. Но когда значения альфа отличаются, я замечаю, что это не работает должным образом - кажется, альфа определяет уровень, на котором значения RGB каждого цвета "вносят вклад" в окончательный цвет.

В противном случае указано,

If a₀=a₁ then:
    a₂=a₀=a₁,
    r₂=(r₀+r₁)/2,
    g₂=(g₀+g₁)/2,
    b₂=(b₀+b₁)/2
Else:
    a₂=(a₀+a₁)/2,
    r₂=?,
    g₂=?,
    b₂=?

Answer 1

Короткий ответ:

если мы хотим наложить c₀ на c₁ как с некоторой альфа, то

a₀₁ = (1 - a₀) · a₁ + a₀

r₀₁ = ((1 - a₀) · a₁· r₁ + a₀· r₀) / a₀₁

g₀₁ = ((1 - a₀) · a₁· g₁ + a₀· g₀) / a₀₁

b₀₁ = ((1 - a₀) · a₁· b₁ + a₀· b₀) / a₀₁

Обратите внимание, что деление на₀₁ в формулах для компонентов цвета. Это важно.

Длинный ответ:

Основная формула для цвета, когда c₀ накладывает непрозрачный c₁ на альфа a₀,

r_{0 больше 1} = (1 - a₀) · r₁ + a₀· r₀

// то же самое для компонентов g & b

Таким образом, если есть другой цвет c₂ и c_{1, на} самом деле не непрозрачный, но имеет альфа a_1, мы можем наложить сначала c₁ поверх c_2, а затем c₀ поверх полученного цвета.

r_{1 над 2} = (1 - a₁) · r₂ + a₁· r₁

r_{0 over (1 over 2)} = (1 - a₀) · ((1 - a₁) · r₂ + a₁· r₁) + a₀· r₀

Если бы у нас был цвет c_01, который перекрывает c₂ с тем же результатом, что и наложение сначала c_1, а затем c_0, это было бы так:

r_{01 более 2} = (1 - a₀₁) · r₂ + a₀₁· r₀₁

Хорошо, давайте сделаем их равными:

(1 - a₀₁) · r₂ + a₀₁· r₀₁ = (1 - a₀) · ((1 - a₁) · r₂ + a₁· r₁) + a₀· r₀= (1 - a₀) · (1 - a₁) · r₂ + (1 - a₀) · a₁· r₁ + a₀· r₀

так

1 - a₀₁ = (1 - a₀) · (1 - a₁) = 1 - ((1 - a₀) · a₁ + a₀)

a₀₁· r₀₁ = (1 - a₀) · a₁· r₁ + a₀· r₀

Answer 2

Это функция Python, которая реализует приведенный выше ответ, когда оба цвета имеют одинаковую альфу:

      
def mix_two_colors_with_alpha(hex_color1, hex_color2, alpha=0.5):
    """Returns a color that's equivalent to displaying input color2 
    on top of input color1 where both have the given alpha.
    """

    hex_color1 = hex_color1.lower().strip("#")
    hex_color2 = hex_color2.lower().strip("#")
    result = "#"
    for i in 0, 2, 4:
        rgb_value1 = int("0x"+hex_color1[i:i+2], 16)
        rgb_value2 = int("0x"+hex_color2[i:i+2], 16)
        # r2 over r1 = (1 - a0)·r1 + a0·r2
        new_rgb_value = int((1-alpha) * rgb_value1 + alpha * rgb_value2)
        new_rgb_hex = hex(new_rgb_value).upper()
        result += new_rgb_hex[2:]
    return result

Пример:

      mix_two_colors_with_alpha("#FF80BF", "#004AC0", alpha=0.4) 

returns '#996ABF'