<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Change color using colorbox </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div id="testColor" style="margin-top:40px;"></div>
<div class="colorBoxDiv" id="colorDiv"></div>
</div>
<script>
var select_colors = ["red", "darkgreen", "mediumvioletred", "darkblue", "yellow", "darkorange", "deeppink"];
var myColor = document.getElementById("testColor");
for (var i = 0; i < select_colors.length; i++) {
var color = select_colors[i];
myColor.innerHTML += '<button onClick="paintColor(\'' + color + '\')" class="testColBox" style="background-color:' + color + ';"></button>';
}
function paintColor(col){
document.getElementById("colorDiv").style.backgroundColor = col;
}
