0

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:

Current Behaviour

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.

Nano
  • 1,398
  • 6
  • 20
  • 32

1 Answers1

3

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>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Thank you for the Answer. But the Problem with this is, that the Text is not getting white but rather yellow. do you know how to prevent this? – Nano Jan 05 '21 at 07:13
  • For me it is definitely white. What browser are you using? I tried it on Edge on Windows 10. If the background is white you definitely should not be getting a yellow color. – A Haworth Jan 05 '21 at 07:17
  • I have altered the snippet to use explicit rgb colors so that we know we are talking about the same thing and not relying on the colors having not been redefined (even if that were possible!). Did you change anything in the snippet? – A Haworth Jan 05 '21 at 07:22
  • Have now tested on Edge/Chrome, Firefox and IE11 on windows 10 and on Safari IOS 14.2 and the text is definitely white. – A Haworth Jan 05 '21 at 07:29
  • [Im using Chrome on Mac. Heres a Screenshot where you can see the yellow tint of the text](https://imgur.com/NFPfW5g) – Nano Jan 05 '21 at 07:52
  • Hmm, I haven't got direct access to a Mac but I'll see if I can get hold of one. One thing I noticed in your picture is that the color of the text looks to be a darker blue. This may be an illusion but it would explain the discrepancy. Is there a way of you finding out exactly what color is being rendered in the text on the Mac, if it's anything other than rgb(0, 0, 255) that would explain it, and does Safari give the same problem? – A Haworth Jan 05 '21 at 07:56
  • The color shifts to orange in safai ... :( https://imgur.com/A31wLTY #FFDB98 this time – Nano Jan 05 '21 at 07:59
  • On a Mac we've just tried it with Firefox it's definitely white BUT on Chrome on the Mac it's a faint blue [link]https://i.stack.imgur.com/WfU6l.png so there seems be to inconsistency on Macs but consistency on WIndows and, strangely, IOS. – A Haworth Jan 05 '21 at 11:33