Помощь в задумке

*, 
*:after, 
*:before { 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  padding: 0; 
  margin: 0; 
  outline: 0; 
} 
 
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/ 
 
.module-mixed-color { 
  position: relative; 
  height: 150px; 
  width: 300px; 
  border: 2px solid #000; 
  margin: 50px auto; 
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #ffffff), color-stop(50%, #000000)); 
  background: -webkit-linear-gradient(left, #ffffff 50%, #000000 50%); 
  background: -o-linear-gradient(left, #ffffff 50%, #000000 50%); 
  background: linear-gradient(to right, #ffffff 50%, #000000 50%); 
} 
 
.module-mixed-color>.text { 
  position: absolute; 
  height: 100%; 
  line-height: 200%; 
  width: 100%; 
  text-align: center; 
  font-weight: bold; 
  font-size: 60px; 
  color: #fff; 
  mix-blend-mode: difference; 
}

<div class="module-mixed-color"> 
  <div class="text">TEXT</div> 
</div>