<html>
<head>
<style type="text/css">
* {
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body { background: #000; }
ul {
display: table;
width: 100%;
list-style: none;
padding-left: 0;
margin-left: 0;
}
li {
vertical-align: bottom;
text-align: center;
display: table-cell;
height: 300px;
width: 33%;
}
button { margin: auto; bottom: 0; }
div { color: #fff; font-size: 10em; }
#red { background: #A55; }
#grn { background: #5A5; }
#blu { background: #55A; }
</style>
</head>
<body>
<ul>
<li id="red">
<div id="redtxt">0</div>
<button id="redup">&#9650;</button>
<button id="reddn">&#9660;</button>
</li>
<li id="grn"></li>
<li id="blu">
<div id="blutxt">0</div>
<button id="bluup">&#9650;</button>
<button id="bludn">&#9660;</button>
</li>
</ul>
<script type="text/javascript">
var redadj = 0;
var bluadj = 0;
var red = document.getElementById("red");
var blu = document.getElementById("blu");
var redtxt = document.getElementById("redtxt");
var blutxt = document.getElementById("blutxt");
document.getElementById("redup").onclick = function () {
if (redadj < 5) redadj++;
red.style.background = "rgb(" + (170 + (redadj * 17)) + "," +
(85 + (redadj * 17)) + "," + (85 + (redadj * 17)) + ")";
redtxt.textContent = redadj;
}
document.getElementById("reddn").onclick = function () {
if (redadj > -5) redadj--;
red.style.background = "rgb(" + (170 + (redadj * 17)) + "," +
(85 + (redadj * 17)) + "," + (85 + (redadj * 17)) + ")";
redtxt.textContent = redadj;
}
document.getElementById("bluup").onclick = function () {
if (bluadj < 5) bluadj++;
blu.style.background = "rgb(" + (85 + (bluadj * 17)) + "," +
(85 + (bluadj * 17)) + "," + (170 + (bluadj * 17)) + ")";
blutxt.textContent = bluadj;
}
document.getElementById("bludn").onclick = function () {
if (bluadj > -5) bluadj--;
blu.style.background = "rgb(" + (85 + (bluadj * 17)) + "," +
(85 + (bluadj * 17)) + "," + (170 + (bluadj * 17)) + ")";
blutxt.textContent = bluadj;
}
</script>
</body>
</html>