вариант ближе к вашему
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rainbow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>#field {
position: relative;
width: 400px;
height: 400px;
margin-left: 10%;
margin-top: 10%;
border: 5px solid black;
}
.block {
width: 100%;
height: 33.33%;
border: 1px solid black;
}
</style>
<body>
<div id="field">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<script type="text/javascript">
window.onload = function () {
var $block = $('.block'),
width = 123,
center = 123,
i = 0,
step,
rValue,
gValue,
bValue,
startShow;
window.onclick = function () {
if (startShow) { clearInterval(startShow); startShow = null }
else startShow = setInterval(Rainbow, 50);
}
function Rainbow() {
if (i < 360) {
step = 2 * Math.PI * i / 360;
rValue = Math.sin(step) * width + center;
gValue = Math.sin(step + Math.PI / 2) * width + center;
bValue = Math.sin(step + Math.PI) * width + center;
var r = Math.floor(rValue),
g = Math.floor(gValue),
b = Math.floor(bValue);
$block.eq(0).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1 + ")" });
$block.eq(1).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.7 + ")" });
$block.eq(2).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")" });
i++;
} else i = 0;
}
}
</script>
</body>
</html>