:root {
  --orange: rgb(255, 107, 0);
  --red: rgb(255, 67, 56);
  --green: rgb(5, 206, 124);
  --blue: rgb(0, 179, 227);
  --magenta: rgb(218, 58, 179);
  --yellow: rgb(255, 200, 67);
  --size: 8rem;
  font-size: 16px;
}

body {
  display: flex;
  flex-direction: column;
}

.compare, .control {
  display: flex;
  margin: 1rem auto;
}
.compare > div, 
.control > div {
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  margin: 0 calc(-.125 * var(--size));
}

.compare > div {
  mix-blend-mode: screen;
}
.control > div {
  mix-blend-mode: color-dodge;
}

.green {
  background: var(--green);
}
.orange {
  background: var(--orange);
}
.yellow {
  background: var(--yellow);
}
.red {
  background: var(--red);
}
.magenta {
  background: var(--magenta);
}
.blue {
  background: var(--blue);
}