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

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>

Solution

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>