<div class="wrapper">
<!--  <div class="color-bg"></div>-->
  <div class="layers">
    <div class="color-base">
      <div class="image-base"></div>
    </div>
    <div class="image-mids"></div>
    <div class="image-highlights"></div>
  </div>
</div>
<div class="inputs">
  <label for="baseColor">base:</label>
  <input type="color" id="baseColor" name="baseColor" value="#7B1FA2">
  <select id="baseBlendMode" name="baseBlendMode" value="screen">
    <option value="normal">normal</option>
    <option value="multiply">multiply</option>
    <option value="screen">screen</option>
    <option value="overlay">overlay</option>
    <option value="darken">darken</option>
    <option value="lighten">lighten</option>
    <option value="color-dodge">color-dodge</option>
    <option value="color-burn">color-burn</option>
    <option value="hard-light">hard-light</option>
    <option value="soft-light">soft-light</option>
    <option value="difference">difference</option>
    <option value="exclusion">exclusion</option>
    <option value="hue">hue</option>
    <option value="saturation">saturation</option>
    <option selected value="color">color</option>
    <option value="luminosity">luminosity</option>
  </select>
  <br/>
  <label for="midsColor">mids:</label>
  <input type="color" id="midsColor" name="midsColor" value="#EC407A">
  <select id="midsBlendMode" name="midsBlendMode" value="screen">
    <option value="normal">normal</option>
    <option value="multiply">multiply</option>
    <option selected value="screen">screen</option>
    <option value="overlay">overlay</option>
    <option value="darken">darken</option>
    <option value="lighten">lighten</option>
    <option value="color-dodge">color-dodge</option>
    <option value="color-burn">color-burn</option>
    <option value="hard-light">hard-light</option>
    <option value="soft-light">soft-light</option>
    <option value="difference">difference</option>
    <option value="exclusion">exclusion</option>
    <option value="hue">hue</option>
    <option value="saturation">saturation</option>
    <option value="color">color</option>
    <option value="luminosity">luminosity</option>
  </select>
  <br/>
  <label for="highlightsColor">highlights:</label>
  <input type="color" id="highlightsColor" name="highlightsColor" value="#FFFB00">
  <select id="highlightsBlendMode" name="highlightsBlendMode" value="screen">
    <option value="normal">normal</option>
    <option value="multiply">multiply</option>
    <option value="screen">screen</option>
    <option value="overlay">overlay</option>
    <option value="darken">darken</option>
    <option value="lighten">lighten</option>
    <option selected value="color-dodge">color-dodge</option>
    <option value="color-burn">color-burn</option>
    <option value="hard-light">hard-light</option>
    <option value="soft-light">soft-light</option>
    <option value="difference">difference</option>
    <option value="exclusion">exclusion</option>
    <option value="hue">hue</option>
    <option value="saturation">saturation</option>
    <option value="color">color</option>
    <option value="luminosity">luminosity</option>
  </select>
  <br/>
  <label for="blurHighlights">blurry:</label>
  <input type="checkbox" id="blurHighlights" name="blurHighlights" />
  <br/>
  <h3>original:</h3>
  <img class="original" width="300" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/Riven.png" />
</div>
$imageW: 666px;
$imageH: 717px;
$imageSrc: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/Riven.png');
$baseColor: #7B1FA2;
$midsColor: #EC407A;
$highlightsColor: #FFFB00;
$bgColor: #232323;

.wrapper {
  float: left;
  position: relative;
  width: $imageW;
  height: $imageH;
}
%size-and-position {
  position: absolute;
  left: 0;
  top: 0;
  width: $imageW;
  height: $imageH;
}
.color-base {
  z-index: 3;
  @extend %size-and-position;
  background: black;
}
.layers {
  @extend %size-and-position;
  background: $bgColor;
}
.color-base {
  z-index: 2;
  @extend %size-and-position;
  background: $baseColor;
  mix-blend-mode: color;
}
.image-base {
  &:after {
    content: " ";
    z-index: 4;
    @extend %size-and-position;
    filter: brightness(0) invert(1);
    background: $imageSrc;
  }
  z-index: 2;
  @extend %size-and-position;
  background: black;
  mix-blend-mode: multiply;
}
.image-mids {
  &:after {
    content: " ";
    z-index: 6;
    @extend %size-and-position;
    filter: brightness(0.94) grayscale(1) contrast(9001%);
    background: $imageSrc, black;
    mix-blend-mode: multiply;
  }
  &.blurry {
    &:after {
      filter: brightness(0.94) grayscale(1) contrast(9001%) blur(1px);
    }
  }
  z-index: 5;
  @extend %size-and-position;
  background: $midsColor;
  mix-blend-mode: screen;
}
.image-highlights {
  &:after {
    content: " ";
    z-index: 8;
    @extend %size-and-position;
    filter: brightness(0.70) grayscale(1) contrast(9001%);
    background: $imageSrc, black;
    mix-blend-mode: multiply;
  }
  &.blurry {
    &:after {
      filter: brightness(0.70) grayscale(1) contrast(9001%) blur(1px);
    }
  }
  z-index: 7;
  @extend %size-and-position;
  background: $highlightsColor;
  mix-blend-mode: color-dodge;
}

//misc/UI
html, body {
  min-height: 100%;
}
body {
  position: relative;
  background: radial-gradient(ellipse at top left, rgba(24,28,35,1) 12%,rgba(0,0,0,1) 90%);
  color: white;
}
.inputs {
  float: left;
  padding: 50px;
  font-size: 36px;
  label {
    display: inline-block;
    min-width: 200px;
    font-weight: 300;
    line-height: 1.5;
  }
  input {
    height: 30px;
  }
  select {
    font-size: 20px;
    height: 30px;
    color: #000000;
  }
  .original {
    border: 1px solid white;
  }
}
View Compiled
//color pickers
$('#baseColor').on('change', function(evt) {
  $('.color-base').css('background', $('#baseColor').val());
});
$('#midsColor').on('change', function(evt) {
  $('.image-mids').css('background', $('#midsColor').val());
});
$('#highlightsColor').on('change', function(evt) {
  $('.image-highlights').css('background', $('#highlightsColor').val());
});

//blend modes
$('#baseBlendMode').on('change', function(evt) {
  $('.color-base').css('mix-blend-mode', $('#baseBlendMode').val());
});
$('#midsBlendMode').on('change', function(evt) {
  $('.image-mids').css('mix-blend-mode', $('#midsBlendMode').val());
});
$('#highlightsBlendMode').on('change', function(evt) {
  $('.image-highlights').css('mix-blend-mode', $('#highlightsBlendMode').val());
});

//sharpen checkbox
$('#blurHighlights').on('change', function(evt) {
  if ($('#blurHighlights').is(':checked')) {
    $('.image-highlights,.image-mids').addClass('blurry');
  } else {
    $('.image-highlights,.image-mids').removeClass('blurry');
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js