Change div color on parents background-color

Question

I am trying to make a cube change based on its background color. I hoped this was possible by giving an element a bit of a transparent background and a filter to invert the

Answer 1

Maybe you are looking for mix-blend-mode:

.cube {
  position: fixed;
  height: 50px;
  width: 50px;
  left: calc( 50vw - 25px);
  bottom: 50px;
  background-color: RGBA(255, 255, 255);
  mix-blend-mode: difference;
}

.section {
  height: 600px;
  width: 100vw;
}

.section1 {
  background-color: #AAAAFF;
}

.section2 {
  background-color: #FFAAAA;
}

.section3 {
  background-color: #AAFFAA;
}

<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>

<div class="cube"></div>