<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="page">
  <h2>
        Color components:
    </h2>
  <div class="sliders">
    <label>
        <span>
            Red
            <code>var(--r);</code>
        </span>
            <input type="range" min="0" max="255" name="r" value="207">
        </label>
    <label>
        <span>
            Green
            <code>var(--g);</code>
        </span>
            <input type="range" min="0" max="255" name="g" value="50">
        </label>
    <label>
        <span>
            Blue
            <code>var(--b);</code>
        </span>
            <input type="range" min="0" max="255" name="b" value="50">
        </label>
  </div>

  <h2>
        Background-color:
    </h2>
  <div class="color-block">
    <pre><code>rgba(var(--r), var(--g), var(--b), 1);</code></pre>
    <div class="color main-color"></div>
  </div>


  <h2>
        Filtered colors:
    </h2>
  <div class="filters">
    <div class="filter color-block">
      <strong class="text">Invert</strong>
      <pre><code>rgba( calc(255 - var(--r)), calc(255 - var(--g)), calc(255 - var(--b)), 1 );</code></pre>
      <div class="color invert"></div>
    </div>

  </div>

</div>

/* Generated background-color */
.main-color {
    background-color: rgba(
      var(--r),
      var(--g),
      var(--b),
      1
    );
}

.invert {
    background-color: rgba(
            calc(255 - var(--r)),
            calc(255 - var(--g)),
            calc(255 - var(--b)),
            1
    );
}

/* Common styles */

.page {
    padding: 0 15px 15px;
}

/* COMMON */
.color {
    width: 50px;
    height: 50px;
}

/* SLIDERS */
.sliders {
    display: -ms-flexbox;
    display: flex;
}

.sliders > * {
    margin-right: 20px;
}

/* COLOR-BLOCK */
.color-block {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px;
}

.color-block > pre {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 0 10px;
}

.color-block > .color {
    -ms-flex: 0 0 50px;
    flex: 0 0 50px;
}

function setProp(prop, value) {
    document.documentElement.style.setProperty('--' + prop, Number(value));
}

var inputs = document.querySelectorAll('input[type="range"]');
var inputsArr = Array.prototype.slice.call(inputs);

inputsArr.forEach(function (input) {
    input.addEventListener('input', function (e) {
        setProp(e.target.name, e.target.value);
    });

    setProp(input.name, input.value);// init values
});