CSS Colored Background Blend over Text - html

Question

I've tried for several days to blend a colored background over a text with the same color and end up with the blended text to get white. Here is an example of what i managed to archive with only black and white:
But as soon as i change the color of the text and background from black to - for example - blue, the text does not get white but yellow or another color instead.
I used the CSS mix-blend-mode exclusion.
A working example with black and white can currently be found here. My goal is to replace the black and white primary button with a blue and white one.

Answer 1

If we consider the mix-blend-mode difference, this takes the difference between the background and the content colors.
So, if we have our text as blue which is rgb(0, 0, 255) to get to white we need to difference it with rgb(255, 255, 0).
Conversely, if our text is rgb(255, 255, 0) and we difference it with white which is rgb(255, 255, 255) we get rgb(0, 0, 255) which is blue.
So, we give the text a color of rgb(255, 255, 0) and ask it to blend with the background which is white and that will give us blue. Then as we overlay a blue we will get white text.
Here's the snippet. I haven't provided the wavyness which would be the subject of a different question.
UPDATE: as can be seen from the comments, the results so far on Windows10 and IOS look OK, but on MACOS variable results have been seen with the text taking on some pale color in Chrome and Safari, though being white on Firefox. Differences in interpretation (especially between mix-blend-mode and background-blend-mode) need further investigation.
body {
position: relative;
background-color: rgb(255, 255, 255);
width: 100vw;
height: 100vh;
}
#keyframes updown {
0% {
height: 0;
top: 200px;
}
50% {
height: 200px;
top: 0;
}
100% {
height: 0;
top: 200px;
}
}
.background {
position: absolute;
background-color: rgb(0, 0, 255);
width: 400px;
height: 200px;
animation: updown 10s ease infinite;
}
.text {
position: absolute;
font-family: sans-serif;
width: 400px;
color: rgb(255,255,0);/* complement of blue */
mix-blend-mode: difference;
text-align: center;
font-size: 50px;
}
<div class="background"></div>
<div class="text">Primary button</div>