rgba colour mix css

Question

Попытка сделать функцию, которая принимает два значения RGBa и результаты в третьем. Первое значение будет opacity: 1, например: color: rbga((0,0,0,1);, а второе будет представлять собой любую непрозрачность (установленную пользователем). Цель состоит в том, чтобы смешивать два цвета, как если бы у вас был COLOR A, а затем кто-то взял инструмент для рисования и прошел над ним с полупрозрачным COLOR B.

Вот эффект, который я хотел бы создать.

not code, just some values: 

(0,0,0,1) & (255,255,255,0.5) = (128,128,128,1) 

(255,0,0,1) & (255,255,255,0.5) = (225,128,128,1) 

(0,255,255,1) & (255,255,255,0.5) = (128,255,128,1) 

(0,0,255,1) & (255,255,255,0.5) = (128,128,255,1) 

(81,188,187,1) & (252,0,255,0.5) = (167,94,221,1) 

(81,188,187,1) & (102,192,110,0.5) = (92,190,148,1) 

(81,188,187,1) & (255,228,0,0.5) = (168,208,93,1) 

Здесь визуально: (мысль не точно такой же пример, как приведенные выше данные)

Здесь со значениями:

я в конечном итоге использовать javascript для создания функции, но на самом деле то, что мне нужно выяснить, это отношение betw een color 1 и color 2 таким образом, чтобы я мог ввести код. Я просто недостаточно хорош в математике, чтобы понять это. И вот я здесь.

Заранее благодарен!

Answer 1

Это простая композиция :)

C = Ca*Aa*(1-Ab) + Cb*Ab 

Где Са компонент (красный, зеленый или синий, в своей очереди) цвет A, Cb, является компонентом цвета B, и Аа и Ab являются значениями альфа соответственно A и B (в этом случае Aa будет 1).

Так (81,188,87,1) и (239,133,11,0.75), вы получите

81*1*(1-0.75) + 239*0.75 = 199.5 
188*1*(1-0.75) + 133*0.75 = 146.75 
87*1*(1-0.75) + 11*0.75 = 30 

Результирующее в (199,146,30,1)

(Alpha рассчитывается с A = Aa * (1-Ab) + Ab, но это всегда будет 1, если либо альфа-значение равно 1, что и в вашем случае)