mix-blend-mode

Using the mix-blend-mode property, you can mix the color of an element with those below it or the parent background. This results in interesting effects, and sometimes it can help maintain text contrast on different backgrounds.

        
          
          h1 {  mix-blend-mode: exclusion;}
          h1 {
  mix-blend-mode: exclusion;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

• normal — the default value; the colors of the elements do not blend;
• multiply — the element's color is multiplied by the background color and replaces it. The resulting color will always be as dark as the background;
• screen — multiplies the background color and the element's color, then complements the result. The final color of the element will be brighter than background-color;
• overlay — multiplies or lightens the element's color depending on the background color. The mode is opposite to the value hard-light;
• darken — the background color is replaced by the element's color where the element is darker; in other cases, the background color remains unchanged;
• lighten — the background color is replaced by the element's color where the element is lighter;
• color-dodge — at this value, the background color is lightened so as to reflect the element's color;
• color-burn — the background color is darkened so as to reflect the natural color of the element;
• hard-light — depending on the color of the element, this value will lighten or multiply it;
• soft-light — depending on the color of the element, this value will darken or lighten it;
• difference — subtracts the darker color from the lighter one;
• exclusion — similar to difference but with lower contrast;
• hue — creates a color in which the hue comes from the element, while saturation and brightness come from the background;
• saturation — creates a color in which the saturation comes from the element, while hue and brightness come from the background;
• color — creates a color with the hue and saturation of the element and the brightness of the background;
• luminosity — creates a color with the brightness of the element, while hue and saturation come from the background. The result is opposite to color.

What’s the math behind it?

Technically speaking, blend modes are mathematical operations over the color components of each pixel of the image on the screen.

Let's blend blue rgb(46 154 255) and pink rgb(244 152 173) in multiply mode.

We multiply the values of each channel — red, green, blue — together and then divide by the maximum value each channel can take — 255. This is done to normalize the values and achieve a result ranging from 0 to 255.

R: (46 * 244) / 255 = 44.047 (rounded to 44)
G: (154 * 152) / 255 = 92.075 (rounded to 92)
B: (255 * 173) / 255 = 173

The result will be rgb(44 92 173).