Using screen mix-blend-mode to get white when combining red green and blue divs

Question

I am using the screen value of mix-blend-mode to combine three divs, one of each of red green and blue. I think I should expect white at the center of the combined divs, but the colours seem off. Am i misunderstanding how this works, or am I using it incorrectly? Thank you.

See this code snippet:

body {
  background-color: black;
}

.shape {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  mix-blend-mode: screen;
  position: absolute;
}

#red {
  background-color: red;
  left: 75px;
}

#green {
  background-color: green;
  top: 125px;
}

#blue {
  background-color: blue;
  top: 125px;
  left: 150px;
}

<body>
  <div class="shape" id="blue"></div>
  <div class="shape" id="red"></div>
  <div class="shape" id="green"></div>
</body>

score 2 · Accepted Answer · answered Nov 19 '17 at 16:58

You're doing it right. The thing is that the css red, blue, green are not pure red, pure blue and pure green and can be interpreted by the browser your are using.

Instead, you should use :

#FF0000;
#00FF00;
#0000FF;

body {
  background-color: black;
}

.shape {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  mix-blend-mode: screen;
  position: absolute;
}

#red {
  background-color: #FF0000;
  left: 75px;
}

#green {
  background-color: #00FF00;
  top: 125px;
}

#blue {
  background-color: #0000FF;
  top: 125px;
  left: 150px;
}

<body>
  <div class="shape" id="blue"></div>
  <div class="shape" id="red"></div>
  <div class="shape" id="green"></div>
</body>

Using screen mix-blend-mode to get white when combining red green and blue divs

1 Answers1