Additive color model with mix-blend-mode

Additive color model. mix-blend-mode: lighten

by denvdmj

HTML

<div class="color">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

CSS

body {
  top: 100px;
  width: 400px;
  margin: 100px auto;
  background: #fff;
  mix-blend-mode: multiply; 
  /*
    background: black;
    mix-blend-mode: lighten;  
  */
}
.color {
  position: relative;
--size: 240px;  
}
.color > div {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: absolute;
  mix-blend-mode: lighten;
  top: calc(var(--size) * .5);
}
.color > .red {
  background-color: red;
  left: calc(50% - var(--size) * .5);
  top: 0;
}
.color > .green {
  background-color: lime;
  left: calc(50% - var(--size) * .25);
}
.color > .blue {
  background-color: blue;
  left: calc(50% - var(--size) * .75);
}