Javascript 为按钮使用十六进制值并通过onClick（）将其传递给函数

我应该创建45个色样。我希望能够为色样使用十六进制值，并通过onClick事件将十六进制值传递给函数。怎么做

下面是我的代码

<input class="colBtn c1" id="cp1" type="button" onclick="colChg('#FF6600')" />

function colChg(val) {
  <!-- do something... -->
}

我希望能够做到这样：

colVal = array (#ffffff, #cccccc, #ff6600....)
for(i=1;i<45;i++){
<input class="colBtn" id="cp"+i  background-color: colVal[i] type="button" onclick="colChg('colVal[i]')" />
}

colVal=array（#ffffff，#cccccc，#ff6600…）
对于（i=1；i你可以按自己的方式来做，但我可能会做以下事情：

var colVal = [ 'color1', 'color2', 'color3'], //etc..
    HTMLinsert = ""

colVal.forEach( function( color ) {

     HTMLinsert += '<input class="colBtn c1" id="cp1" type="button" id="' + color +'" />';

});

document.getElementById('insertArea').innerHTML = HTMLinsert;

在颜色数组中循环：

colVal = ["#ffffff", "#cccccc", "#ff6600"];
for(var i = 0; i < colVal.length; i++) {
    $("body").append('<button class="colors" style="background-color:' + colVal[i] + ';">click!</button>');
}

注意：
.css（“color”）；
可能返回RGB值。（请参阅此处：）

演示：

更新：
无需转换即可将颜色设置为十六进制值的小技巧：

var thisColorHex = $(this).attr("style").substring($(this).attr("style").indexOf("background-color:") + 17, $(this).attr("style").indexOf(";", $(this).attr("style").indexOf("background-color:"))).trim();

演示：
为什么选择e.target而不是这个？
colVal = ["#ffffff", "#cccccc", "#ff6600"];
for(var i = 0; i < colVal.length; i++) {
    $("body").append('<button class="colors" style="background-color:' + colVal[i] + ';">click!</button>');
}

$(".colors").click(function() {
    var thisColor = $(this).css("background-color");
    alert(thisColor);
});

var thisColorHex = $(this).attr("style").substring($(this).attr("style").indexOf("background-color:") + 17, $(this).attr("style").indexOf(";", $(this).attr("style").indexOf("background-color:"))).trim();