Skip to main content

Blending Colors

Other than blending values of different color types directly, the following outline the mathematics for each blending method.

Each forumla is applied to each RGB value pair individually—that is, the R values of the first and second colors are blended separately from G and B. In other words, aa, bb, and cc below are equivalent to a^i\hat{a}_i, b^i\hat{b}_i, and c^i\hat{c}_i where i=[R,G,B]i = [R,G,B] for the following forumlae. Values of cc are clamped to ∈[0,1]∈ [0,1].

Instead of blending alpha, alpha is used as the amount of blending. Or, the blended result c^\hat{c} is then blended with the first source color a^\hat{a} by the amount of the alpha channel where a^alpha∈[0,1]\hat{a}_{alpha} ∈ [0,1].

methodformulae
screenc=1−(1−a)(1−b)c = 1 - (1 - a)(1 - b)
multiplyc=a⋅bc = a \cdot b
overlayc={1−(1−a)(1−b) if b≥0.5a⋅b otherwise c = \begin{cases}1 - (1 - a)(1 - b) & \text{ if } b \geq 0.5 \\ a \cdot b & \text { otherwise } \end{cases}
colordodgec=a1−bc = \frac{a}{1 - b}
colorburnc=1−1−bac = 1 - \frac{1 - b}{a}
vividlightc={a1−b if b≥0.51−1−ba otherwise c = \begin{cases} \frac{a}{1 - b} & \text{ if } b \geq 0.5 \\ 1 - \frac{1 - b}{a} & \text { otherwise } \end{cases}
lineardodge or additionc=a+bc = a + b
linearburnc=a+b−1c = a + b - 1
linearlightc={a+b if b≥0.5a+b−1 otherwise c = \begin{cases} a + b & \text{ if } b \geq 0.5 \\ a + b - 1 & \text { otherwise } \end{cases}
dividec=abc = \frac{a}{b}
subtractionc=a−bc = a - b
differencec=∣a−b∣c = \lvert a - b \rvert
softlightg={((16a−12)⋅a+4)⋅a if a≤0.25a otherwise g = \begin{cases} ((16a - 12) \cdot a + 4) \cdot a & \text { if } a \leq 0.25 \\ \sqrt{a} & \text{ otherwise } \end{cases}

c={a+(2b−1)(g−a) if b≥0.5a−a(1−2b)(1−a) otherwise c = \begin{cases} a + (2b - 1)(g - a) & \text{ if } b \geq 0.5 \\ a - a(1 - 2b)(1 - a) & \text { otherwise } \end{cases}