CSS：颜色混合模式

一、混合模式

css3的颜色混合模式，共有16种：

Photoshop图层	CSS混合模式	中文名称	功能描述
normal	normal	正常模式	混合色的像素会透过所用的颜色显示出来
multiply	multiply	正片叠底模式	在“正片叠底”模式中，查看每个通道中的颜色信息，并将“基色”与“混合色”复合。
screen	screen	滤色模式	“滤色”模式与“正片叠底”模式正好相反，它将图像的“基色”颜色与“混合色”颜色结合起来产生比两种颜色都浅的第三种颜色
overlay	overlay	叠加模式	“叠加”模式把图像的“基色”颜色与“混合色”颜色相混合产生一种中间色。
darken	darken	变暗模式	在“变暗”模式中，查看每个通道中的颜色信息，并选择“基色”或“混合色”中较暗的颜色作为“结果色”。
lighten	lighten	变亮模式	在“变亮”模式中，查看每个通道中的颜色信息，并选择“基色”或“混合色”中较亮的颜色作为“结果色”。
color-dodge	color-dodge	颜色减淡模式	在“颜色减淡”模式中，查看每个通道中的颜色信息，并通过减小对比度使基色变亮以反映混合色。与黑色混合则不发生变化。
color-burn	color-burn	颜色加深模式	在“颜色加深”模式中，查看每个通道中的颜色信息，并通过增加对比度使基色变暗以反映混合色，如果与白色混合的话将不会产生变化。
hard-light	hard-light	强光模式	“强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些，那么“结果色”颜色将更亮；如果“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”将更暗。
soft-light	soft-light	柔光模式	柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些，那么“结果色”将更亮；如果“混合色”颜色比“基色”颜色的像素更暗一些，那么“结果色”颜色将更暗，使图像的亮度反差增大。
difference	difference	差值模式	在“差值”模式中，查看每个通道中的颜色信息，“差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值，如果结果为负，则取正值，产生反相效果。
exclusion	exclusion	排除模式	“排除”模式与“差值”模式相似，但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。
hue	hue	色相模式	“色相”模式只用“混合色”颜色的色相值进行着色，而使饱和度和亮度值保持不变。
saturation	saturation	饱和度模式	“饱和度”模式的作用方式与“色相”模式相似，它只用“混合色”颜色的饱和度值进行着色，而使色相值和亮度值保持不变。
color	color	颜色模式	“颜色”模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色，而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。
luminosity	luminosity	亮度模式	“亮度”模式能够使用“混合色”颜色的亮度值进行着色，而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。

我们可以对以上16种混合模式进行分类：

分类名称	混合模式名称	描述
基础混合模式	normal	利用图层透明度和不透明度来控制与下面的图层混合
降暗混合模式	darken,multiply,color-burn	减色模式，滤掉图像中高亮色，从而达到图像变暗
加亮混合模式	screen,lighten,color-dodge	加色模式，滤掉图像中暗色，从而达到图像变亮
融合混合模式	overlay,soft-light,hard-light	用于不同程度的对上、下两图层的融合
变异混合模式	difference,exclusion,hard-light	用于制作各种变异的图层混合
色彩叠加混合模式	hue,saturation,color,luminosity	根据图层的色相，饱和度等基本属性，完成图层融合

二、混合模式的颜色效果计算公式

1.公式定义

混合公式定义：

Cm = B(Cb, Cs)

其中：
Cm：混合后的结果颜色
B：进行混合的公式
Cb：背景色
Cs：源色

混合公式的结果必须限制在颜色范围的最小值和最大值中。
混合函数的结果由背景的alpha调制。一个完全不透明的背景允许用混合模式来实现。一个透明的背景会导致最终的结果是源颜色和混合颜色之间的加权平均，权重由背景的alpha来控制。新颜色的值变成：

Cr = (1 - αb) x Cs + αb x B(Cb, Cs)

其中：
Cr：结果颜色
B：进行混合的公式
Cs：源颜色
Cb：背景色
ab：背景色的alpha

2.各种模式下的混合公式定义

模式	公式	描述	效果
normal	B(Cb, Cs) = Cs	这是不指定混合的默认属性。混合公式简单选择源颜色。
multiply	B(Cb, Cs) = Cb x Cs	这是不指定混合的默认属性。混合公式简单选择源颜色。
screen	B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]= Cb + Cs -(Cb x Cs)	将Cb和Cs的颜色反转，然后相乘，最后再反转
overlay	B(Cb, Cs) = HardLight(Cs, Cb)	当Cb的颜色比Cs的颜色深时，执行multiply渲染；当Cb的颜色比Cs的颜色浅时，执行screen渲染
darken	B(Cb, Cs) = min(Cb, Cs)	比较Cb和Cs的颜色分量（即R、G和B），选择较暗的颜色，即保留较小值。
lighten	B(Cb, Cs) = max(Cb, Cs)	与darken类似，但选择较亮的颜色，即保留较大值
color-dodge	if(Cb == 0) B(Cb, Cs) = 0 else if(Cs == 1) B(Cb, Cs) = 1 else B(Cb, Cs) = min(1, Cb / (1 - Cs))	不改变颜色，但会将其调亮
color-burn	if(Cb == 1) B(Cb, Cs) = 1 else if(Cs == 0) B(Cb, Cs) = 0 else B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)	与color-dodge的作用相反，将颜色调暗
hard-light	if(Cs <= 0.5) B(Cb, Cs) = Multiply(Cb, 2 x Cs) else B(Cb, Cs) = Screen(Cb, 2 x Cs -1)	也是对multiply和screen的综合应用，但判断条件与overlay相反
soft-light	if(Cs <= 0.5) B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb) else B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb) with if(Cb <= 0.25) D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb else D(Cb) = sqrt(Cb)	与hard-light类似，但颜色更加柔和
difference	B(Cb, Cs) = | Cb - Cs |	取Cb和Cs颜色分量之差的绝对值，用较浅的颜色减去较深的颜色
exclusion	B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs	与difference类似，但对比度更低，颜色更柔和
hue	B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))	将Cb的颜色的饱和度与亮度跟Cs中对应位置的色相合并
saturation	B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))	将Cb的颜色的色相与亮度跟Cs中对应位置的饱和度合并
color	B(Cb, Cs) = SetLum(Cs, Lum(Cb))	将Cb的颜色的亮度跟Cs中对应位置的色相与饱和度合并
luminosity	B(Cb, Cs) = SetLum(Cb, Lum(Cs))	将Cb的颜色的色相与饱和度跟Cs中对应位置的亮度合并

注：
（1）色彩叠加混合模式分类中的4种模式涉及的SetLum、SetSat、 Sat、 Lum辅助函数定义可参阅W3C文档《Compositing and Blending Level 2》
（2）为什么w3c标准中rgb取值范围是0~1，而css中的rgb取值范围是0~255？这是因为W3C标准中的RGB取值范围是基于小数的百分比表示，即0表示0%，1表示100%，而CSS中的RGB取值范围是基于整数的表示，即0表示最小值，255表示最大值。这种表示方法可以更方便地进行计算和转换，并且更符合人们的习惯，因此在CSS中被广泛使用。但是，在某些情况下，使用小数表示的RGB值可以更方便地进行一些数学计算，因此在一些图形处理软件中也会使用小数表示的RGB值。