wave2013,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[data-var]:after {
content: attr(data-var);
}
.color {
height: 100px;
width: 100px;
background-color: var(--color, #fff)
}
</style>
</head>
<body>
<input type="number" min="0" step="1" value="16777215">
<div data-var="r : 255" class="r"></div>
<div data-var="g : 255" class="g"></div>
<div data-var="b : 255" class="b"></div>
<div class="color"></div>
<script>
window.addEventListener('DOMContentLoaded', function() {
let color = document.querySelector('.color');
document.querySelector('input').addEventListener('input', function() {
let c = +this.value,
b = c / 65536 | 0,
g = (c - b * 65536) / 256 | 0,
r = c - b * 65536 - g * 256;
let components = {
r,
g,
b
}
for (let k in components) document.querySelector(`.${k}`).dataset.var = `${k} : ${components[k]}`
color.style.setProperty("--color", `rgb(${r},${g},${b})`);
});
});
</script>
</body>
</html>