@*以下 是测试html 颜色选择器的*@@*<a href="https://zhishitu.com/ke" mce_href="https://zhishitu.com/ke" onclick="initColorPicker('demo'); return false" id="demo" style="position:absolute;left:200px">颜色选择</a>*@<!-- Color Picker -->@*<script type="text/JavaScript"> var colorPicker = function (idStr) { this.colorPool = ["#000000", "#993300", "#333300", "#003300", "#003366", "#000080", "#333399", "#333333", "#800000", "#FF6600", "#808000", "#008000", "#008080", "#0000FF", "#666699", "#808080", "#FF0000", "#FF9900", "#99CC00", "#339966", "#33CCCC", "#3366FF", "#800080", "#999999", "#FF00FF", "#FFCC00", "#FFFF00", "#00FF00", "#00FFFF", "#00CCFF", "#993366", "#CCCCCC", "#FF99CC", "#FFCC99", "#FFFF99", "#CCFFCC", "#CCFFFF", "#99CCFF", "#CC99FF", "#FFFFFF"]; this.initialize(idStr); } colorPicker.prototype = { initialize: function (idStr) { var count = 0; var html = ''; var self = this; html += '<table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000" style="cursor:pointer;background:#ECE9D8" mce_style="cursor:pointer;background:#ECE9D8" >'; // html+= '<tr><td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff">当前颜色</td></tr>'; for (i = 0; i < 5; i++) { html += "<tr>"; for (j = 0; j < 8; j++) { html += '<td align="center" width="20" height="20" style="background:' + this.colorPool[count] + '" mce_style="background:' + this.colorPool[count] + '" unselectable="on"> </td>'; count++; } html += "</tr>"; } html += '</table>'; this.trigger = document.getElementById(idStr); this.p = document.createElement('p'); this.p.innerHTML = html; var tds = this.p.getElementsByTagName('td'); for (var i = 0, l = tds.length; i < l; i++) { tds[i].onclick = function () { self.setColor(this.style.backgroundColor, idStr); } } this.p.id = 'myColorPicker'; this.trigger.parentNode.appendChild(this.p); this.p.style.position = 'absolute'; this.p.style.left = this.trigger.offsetLeft + 'px' this.p.style.top = (this.trigger.clientHeight + this.trigger.offsetTop) + 'px'; //this.hide(); this.trigger.onclick = function () { if (self.p.style.display == 'none') { self.show(); return false; } else { self.hide(); return false; } } }, setColor: function (c, idStr) { this.hide(); // document.getElementById(idStr).style.backgroundColor = c //proEditor.setColor(c); //自己定义函数决定setColor的功能 document.getElementById(idStr).style.color = c //var rgb2Hex = colorRGB2Hex(c); //alert(rgb2Hex); }, hide: function () { this.p.style.display = 'none' }, show: function () { this.p.style.display = 'block' } } function initColorPicker(str) { picker = new colorPicker(str); } function colorRGB2Hex(color) { var rgb = color.split(','); var r = parseInt(rgb[0].split('(')[1]); var g = parseInt(rgb[1]); var b = parseInt(rgb[2].split(')')[0]);var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); return hex; } </script>*@相关推荐：
5款Javascript颜色选择器_javascript技巧
以上就是（超好用）html 颜色选择器的用法的知识。速戳>>知识兔学习精品课！