Mix-blend-mode: multiply not working in Chrome

Question

I am trying to use mix-blend-mode: multiply on Chrome but it doesn't work as expected: when I add magenta, cyan and yellow together it doesn't give me black but brown. In Safari, everything is working fine.

I tried the trick to add the following code :

html, body {
    background-color: white;
}

But it does not change anything. Is there any other solution?

Thanks!

Answer 1

I ran into the same problem when using mix-blend-mode in Google Chrome on a computer that has a DCI-P3 color gamut.

The reason that it happens has to do with color spaces. Blend mode calculations in some browsers are done in the display’s color space, which may not be sRGB, but CSS color declarations are in sRGB (unless specified otherwise).

A max-saturated CSS color such as #ff0000 is not maximally saturated in a larger color space like DCI-P3. colorjs.io’s converter shows that the reddest red rgb(srgb 255 0 0) in sRGB is equivalent to a partially saturated red rgb(p3 235.052, 61.663, 46.740) in P3.

On a P3 screen, multiplying magenta, cyan and yellow produces a result of multiplying these colors that’re partially saturated, and that doesn’t make black.

This article explains how that works.

Image in the article:

Read More : https://danielcwilson.com/blog/2020/03/blend-modes-in-spaaaace

Answer 2

Chrome has a somewhat known issue with mix-blend-mode and body, the issue is that it doesn’t take into effect the body as background, so you should try using an intermediate div with white background for this effect.