CSS blending mode to replicate additive blending - css

Question

I'm trying to create an RGB additive color model on my website.
I'm using the following code:
#colorBox1 {
background-color: rgb(255, 0, 0);
}
#colorBox2 {
background-color: rgb(0, 255, 0);
mix-blend-mode: screen;
}
#colorBox3 {
background-color: rgb(0, 0, 255);
mix-blend-mode: screen;
}
#colorBox4 {
background-color: rgb(255, 255, 255);
border: 1px solid black;
}
<div id="color">
<div id="colorBox1" class="colorBox"></div>
<div id="colorBox2" class="colorBox"></div>
<div id="colorBox3" class="colorBox"></div>
<div id="colorBox4" class="colorBox"></div>
</div>
* I've skipped some of the positioning rules to make the code as clear as possible
So I was expecting the 3 colors to blend into white color of rgb(255, 255, 255). But when I preview the page the color is a little bit off-white. It is actually rgb(248, 255, 253). Although rgb(255, 255, 255) (colorBox4) does display as pure white of (255, 255, 255) - all via a color picker.
Is this it - css colors are different?
Is it just the monitor?
Or is there a CSS blending method or a chain of CSS blending methods where I can achieve "true" color additive mode?

Answer 1

I am not seeing the results you are. In this test the colors are correctly blended. How are you determining the color of the blended region?
.colorBox{
position:absolute;
width: 100px;
height: 100px;
border-radius: 50%;
}
#colorBox1 {
background-color: rgb(255,0,0);
}
#colorBox2 {
background-color: rgb(0, 255, 0);
mix-blend-mode: screen;
left: 70px;
}
#colorBox3 {
background-color: rgb(0, 0, 255);
mix-blend-mode: screen;
top: 70px;
left:40px;
}
<div id="color">
<div id = "colorBox1" class="colorBox"></div>
<div id = "colorBox2" class="colorBox"></div>
<div id = "colorBox3" class="colorBox"></div>
</div>