<svg width="1024" height="640" viewBox="0 0 1024 640" id="duotone" preserveAspectRatio="xMidYMid slice">
  <defs>
    <filter id="duotone-filter">
      <feColorMatrix
        type="matrix"
        values="1  0  0  0  0
                1  0  0  0  0
                1  0  0  0  0
                0  0  0  1  0"/>
    </filter>    
  </defs>
    <image width="1024" height="640" filter="url(#duotone-filter)" xlink:href="https://jmperezperez.com/static/images/posts/fecolormatrix-kanye-west.jpg"/>
</svg>

html, body {
  height: 100%;
}

#duotone {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-size: cover;
}

svg {
    color-interpolation-filters:sRGB;
}

function convertToDueTone(color1, color2) {
  var matrix = document.querySelector('feColorMatrix');
  var value = [];
  value = value.concat(
  [color1[0]/256 - color2[0]/256, 0, 0, 0, color2[0]/256]);
  value = value.concat(
  [color1[1]/256 - color2[1]/256, 0, 0, 0, color2[1]/256]);
  value = value.concat(
  [color1[2]/256 - color2[2]/256, 0, 0, 0, color2[2]/256]);
  value = value.concat([0, 0, 0, 1, 0]);
  matrix.setAttribute('values', value.join(' '));
}

// RED
convertToDueTone([240, 14, 46], [25, 37, 80]);

// GREEN
//convertToDueTone([115, 217, 112], [36, 32, 106]);