How to make magenta, cyan and yellow to give black with css mix-blend-mode multiply?

Question

I am trying to multiply magenta, cyan and yellow with mix-blend-mode in css, but it gives me brown instead of black.

what I want : Working mix-blend-mode

what I have : Non-working mix-blend-mode

In Figma it was working well, what am I doing wrong ?

Thanks a lot !

Answer 1

You are looking for mix-blend-mode: darken:

Demo:

.c {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    position: fixed;
    left: 5px;
    mix-blend-mode: darken;
}

.m { 
    background-color: magenta;
}
.b {
    left: 75px;
    background-color: cyan;
}
.y {
    top: 60px;
    left: 40px;
    background-color: yellow;
}

<div class='c m'></div>
<div class='c b'></div>
<div class='c y'></div>

---

The above snippet will output: