MENU


Color Blending

multiply(@color1, @color2) Multiply two colors. Corresponding RGB channels from each of the two colors are multiplied together then divided by 255. The result is a darker color.
screen(@color1, @color2) Do the opposite of multiply. The result is a brighter color.
overlay(@color1, @color2) Combines the effects of both multiply and screen. Conditionally make light channels lighter and dark channels darker. Note: The results of the conditions are determined by the first color parameter.
softlight(@color1, @color2) Similar to overlay but avoids pure black resulting in pure black, and pure white resulting in pure white.
hardlight(@color1, @color2) The same as overlay but with the color roles reversed.
difference(@color1, @color2) Subtracts the second color from the first color on a channel-by-channel basis. Negative values are inverted. Subtracting black results in no change; subtracting white results in color inversion.
exclusion(@color1, @color2) A similar effect to difference with lower contrast.
average(@color1, @color2) Compute the average of two colors on a per-channel (RGB) basis.
negation(@color1, @color2) Do the opposite effect to difference.
These operations are similar (though not necessarily identical) to the blend modes found in image editors like Photoshop, Fireworks or GIMP, so you can use them to make your CSS colors match your images.
@c1: #886644;
@c2: #000000;

.a {color: multiply(@c1,@c2);}
.b {color: screen(@c1,@c2);}
.c {color: overlay(@c1,@c2);}
.d {color: softlight(@c1,@c2);}
.e {color: hardlight(@c1,@c2);}
.f {color: difference(@c1,@c2);}
.g {color: exclusion(@c1,@c2);}
.h {color: average(@c1,@c2);}
.i {color: negation(@c1,@c2);}

.a {
  color: #000000;
}
.b {
  color: #886644;
}
.c {
  color: #110000;
}
.d {
  color: #492912;
}
.e {
  color: #000000;
}
.f {
  color: #886644;
}
.g {
  color: #886644;
}
.h {
  color: #443322;
}
.i {
  color: #886644;
}