平时使用这个功能的时候都是逐个点击各个「混合模式(blending modes)」试看效果。下面就解释一下各个「混合模式」的工作原理。
简单来说,「混合模式」是基于两种输入颜色,输出新颜色的方法。这里输入颜色被分为了「前景(混合色)」和「背景(基础色)」。
其中最简单的就是 Darken 和 Lighten,
Darken 是分别比较前后景的 RGB 通道的值,选择最暗的值组成新的 RGB 颜色。RGB 通道的值范围在 0-255 之间,数字越小,颜色越暗。
\begin{gather*} C = min(A, B) \end{gather*}
Lighten 和 Darken 原理一样,只不过选择最亮的颜色,也就是数字更大的 RGB 通道值组成新的颜色。
\begin{gather*} C = max(A, B) \end{gather*}
Multiply 和 Screen 与 Darken 和 Lighten 产生类似的效果,但是更加优雅。当有了 Multiply 和 Screen 后,就没有理由去使用 Darken 和 Lighten 了。
Multiply 顾名思义,就是将每个通道的数值相乘。
可以发现这里的数值不是 0-255 而是 0-1,这里是将 0-255 映射到 0-1 后计算。因为数值都是在 0-1 之间,所以乘积总是比原始值更暗。也因此,白色表现出透明(任何数值和 1 相乘都不变),黑色会一直存在(任何数值和 0 相乘都是 0)。
\begin{gather*} C=\frac{A}{255}\times\frac{B}{255}\times255=\frac{AB}{255} \end{gather*}
Screen 实际上和 Multiply 相似,但是它是先将各通道颜色反相后相乘,相乘的结果再反相后得到更浅的颜色。
\begin{gather*} C=(1-(1-\frac{A}{255})(1-\frac{B}{255}))\times255 = 255-\frac{(255-A)(255-B)}{255} \end{gather*}
最后一对是 Color Burn 和 Color Dodge,可以看到明显的步进,所以结果颜色会更加饱和。
Color Burn 的原理是对背景反相后除以前景,再将结果反相得到最终的颜色。
Color Dodge 类似,是将前景反相,除以背景。
\begin{gather*} C=\frac{(1-A)}{B} \end{gather*}
Overlay、Soft Light 和 Hard Light 被称为「对比度混合模式」,可以让亮部更亮,暗部更暗。
如果背景是浅色(>127.5),就以一半的强度参与 Screen 计算,使得最终颜色变浅;
\begin{gather*} C=(1-(1-\frac{A}{255})(1-\frac{B}{255})\times2)\times255 = 255-\frac{(255-A)(255-B)}{127.5} \end{gather*}
如果背景是暗色,也以一半的强度参与 Multiply 计算,使得最终颜色变深。
\begin{gather*} C=\frac{A}{255}\times(\frac{B}{255}\times2)\times255=\frac{AB}{127.5} \end{gather*}
Hard Light 和 Overlay 一样,只不过判断的依据换成了前景。
Soft Light 是标准混合模式中最复杂的一种。它产生的效果和 Overlay 相似,但更加微妙。
Difference 和 Exclusion 的结果几乎就是其中一个输入颜色的反相,所以称为反相混合模式,
Difference 顾名思义,用前景减去背景的通道颜色值并取绝对值。
Exclusion 也产生类似的效果,但方式要复杂的多。
Hue、Saturation、Color 和 Luminosity 与其他模式不同,它们操作的是 Hue、Saturation 和 Luminosity,而不是 RGB 通道值。
它们通过结合两个输入的 HSL 值得出一种新的颜色。
Hue 从前景提取 Hue 值,从背景中提取 Saturation 和 Luminosity 值,组成新的颜色。
Saturation 从前景提取 Saturation 值,从背景中提取 Hue 和 Luminosity 值,组成新的颜色。
Color 从前景提取 Hue 和 Saturation 值,从背景中提取 Luminosity 值,组成新的颜色。
Luminosity 从前景提取 Luminosity 值,从背景中提取 Hue 和 Saturation 值,组成新的颜色。