<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
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.