Multiply with white returns the non-white value about color-blend HOT 11 CLOSED

This is expected behavior. The Multiply mode does what the name says — it multiplies the RGB channels of the involved colors (on a scale from 0 to 1). So if you multiply any color with white (which has 1 for each color channel), the color will not change.

The alpha channel of neither of the colors has any influence on the resulting RGB channels. (In fact, it doesn't impact the RGB outcome in any blend mode.)
I've got to say that this confused me as well when I implemented the color modes in the first place, but that's how the algorithms are designed – alpha channels of both the source and the backdrop only impact the alpha channel of the resulting color, nothing else.

Hope that helped.

from color-blend.

Thanks! Design apps like Sketch and Figma use terms like "blend" and "multiply" that are almost impossible to reverse engineer accurately.

from color-blend.

True, reverse engineering this is almost impossible. But they're all abiding by the spec.

from color-blend.

@loilo If only that were true. Blending colors with opacities is becoming more and more common in design systems and tools. There aren't many good way to handle it on the web that doesn't involve overlaying two boxes with semi-transparent backgrounds and letting the browser handle it.

from color-blend.

True. It's why I built the library in the first place. 😁
That said, figuring out how opacity works with blend modes also was basically the biggest pain point when implementing this.

from color-blend.

@loilo I can't even image. Does the spec even support mixing a semi-transparent white with another color?

from color-blend.

Everything the browser does is written down in specs somewhere. However, you need quite some practice and knowledge about their environment to successfully decipher them.

Regarding opacity: The point (that I could hardly even believe when I found out) is that the opacity is irrelevant for the blending itself. All blend modes offered by this library use so-called "source-over" composition. (I say "offered by this library" because there are some new blend modes in the current iteration of the spec, and in part already in browsers, which don't use source-over composition and therefore work differently from everything done here, which is why I haven't implemented those yet.)

Back to topic: Using the source-over compositioning algorithm basically means that you first blend the RGB channels of the colors with the according blend mode algorithm (i.e. treat colors as if they all have full opacity) and only then calculate the result's opacity from the foreground/background opacities.

Or in other words: The used colors' opacities have no impact on the resulting color's RGB, only on its opacity. 🤯

from color-blend.

@loilo Yeah that's what I'm talking about, the fact that opacity is irrelevant in a blend. That completely floored me when I saw it in the spec. Given the direction that Material Design, and basically every other design system is going, it's going to have to change.

from color-blend.

Thanks man, you've been great. Your lib is good AND correct too.. I really wish I could have used it. :D

from color-blend.

Glad it's helping. Fun fact: I haven't used it, ever. 🙃
Built it because I wanted to try out if some basic version of Photoshop would be creatable in the browser (in 2015) and for some weird reason started with implementing blend modes — which is also the only thing I ever implemented for this project. 🙈

from color-blend.

Hahahaha. Yeah, implementing blend modes would be enough to get me to quit too.

I gave up and implemented Material's color blending with what I thought was the naive two boxes overlaid method.. Now that seems to the standard way of doing it.

from color-blend.