MadVR chroma upsampling

screenshot comparison

HTML

<div>
  <img id='nn' src='http://imhocloud.com/images/2016/01/12/nnf9daf.png'>
  <img id='b' src='http://imhocloud.com/images/2016/01/12/b0710d.png'>
  <img id='xbr' src='http://imhocloud.com/images/2016/01/12/xbr24bf3.png'>
  <img id='nnedi' src='http://imhocloud.com/images/2016/01/12/nnedi12f72.png'>
  <img id='r_soft' src='http://imhocloud.com/images/2016/01/12/r_soft7d559.png'>
  <img id='r_sharp' src='http://imhocloud.com/images/2016/01/12/r_sharpee69f.png'>
  <img id='r_placebo' src='http://imhocloud.com/images/2016/01/12/r_placeboc23d8.png'>
  <img id='r_sharp-ar' src='http://imhocloud.com/images/2016/01/12/r_sharp-ar0efed.png'>
  <img id='r_placebo-ar' src='http://imhocloud.com/images/2016/01/12/r_placebo-arbecfc.png'>
</div>
<div>
  <button onmouseover="showOnly('nn'); hover(this);">Nearest Neighbor</button>
  <button onmouseover="showOnly('b'); hover(this);">Bilinear</button>
  <button onmouseover="showOnly('xbr'); hover(this);">Super-XBR</button>
  <button onmouseover="showOnly('nnedi'); hover(this);">NNEDI 256</button>
  <button onmouseover="showOnly('r_soft'); hover(this);">Reconstruction Soft</button>
  <button onmouseover="showOnly('r_sharp'); hover(this);">Reconstruction Sharp</button>
  <button onmouseover="showOnly('r_placebo'); hover(this);">Reconstruction Placebo</button>
  <button onmouseover="showOnly('r_sharp-ar'); hover(this);">Reconstruction Sharp AR</button>
  <button onmouseover="showOnly('r_placebo-ar'); hover(this);">Reconstruction Placebo AR</button>
</div>
<script>
  showOnly('nn');
  hover(document.getElementsByTagName('button')[0]);
</script>

CSS

html,
body {
  background: black;
}

img {
  margin: 20px auto;
  image-rendering: -moz-crisp-edges;  /* Firefox */
  image-rendering:   -o-crisp-edges;  /* Opera */
  image-rendering: -webkit-optimize-contrast;  /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
  //width: 100%;
}

div {
  text-align: center;
}

button {
  display: block;
  width: 320px;
  height: 36px;
  font-family: 'Segoe UI';
  font-size: 21px;
  background: #222;
  border: 1px solid #666;
  margin: 4px auto;
  color: #eee;
}
.hover {
  background: #666;
  color: #fff;
}

JavaScript

var tags = [
  'nn',
  'b',
  'xbr',
  'nnedi',
  'r_soft',
  'r_sharp',
  'r_placebo',
  'r_sharp-ar',
  'r_placebo-ar'
];

function hide(tag) {
  document.getElementById(tag).style.display = 'none';
}

function show(tag) {
  document.getElementById(tag).style.display = 'block';
}

function showOnly(tag) {
  tags.forEach(hide);
  show(tag)
}
function hover(element) {
	var buttons = document.getElementsByTagName('button');
  for (var i = 0; i < buttons.length; i++) {
  	buttons[i].className = '';
  };
  element.className = 'hover';
}