本例应用颜色拾取插件 https://farbelous.io/bootstrap-colorpicker/tutorial-Basics.html
直接放源码，有兴趣的点击例子查看：
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>色调旋转滤镜下的按钮</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="css/bootstrap-colorpicker.css" rel="stylesheet">
<style type="text/css">
html,
body {
height: 100%;
}
</style>
</head>
<body>
<div class="container jumbotron h-100">
<h1>选择颜色</h1>
<div id="demo" class="input-group" title="Using input value">
<input type="text" class="form-control input-lg" value="" />
<span class="input-group-append"><span
class="input-group-text colorpicker-input-addon"><i></i></span></span>
</div>
<h4 class="pt-3">色调旋转滤镜下的按钮</h4>
<div id="hueBtnBox"></div>
<h4 class="pt-3">css</h4>
<div id="css"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-colorpicker.js"></script>
<script>
$(function () {
$('#demo').colorpicker({
"color": "#ff0000"
});
$('#demo').on('colorpickerChange', function (event) {
initColor(event.color);
});
//初始化
initColor('#ff0000');
//生成36种旋转滤镜颜色
function initColor(color) {
color = String(color).indexOf('#') >= 0 ? color : hexify(String(color));
var templeteStyle = '.ui-button-primary{border: 1px solid ' + color + ';background-color: ' +
color + ';color: #fff;}.ui-button-primary:hover {background-color: ' + LightenDarkenColor(
color, -20) + ';border-color: ' + LightenDarkenColor(color, -20) + ';}';
var res = [];
if (!$('#colorPickerStyle').length) {
$(document.head).append('<style id="colorPickerStyle">' + templeteStyle + '</style>');
} else {
$('#colorPickerStyle').html(templeteStyle);
}
for (var i = 0, len = 36; i < len; i++) {
res.push('<button class="btn ui-button-primary m-1" style="filter:hue-rotate(' + i +
'0deg);">其它色按钮</button>')
}
$('#hueBtnBox').html(res.join(''));
$('#css').html(templeteStyle);
}
});
//十六进制转为RGB
function hex2Rgb(hex) {
var rgb = [];
if (/^\#[0-9A-F]{3}$/i.test(hex)) { //判断传入是否为#三位十六进制数
let sixHex = '#';
hex.replace(/[0-9A-F]/ig, function (kw) {
sixHex += kw + kw; //把三位16进制数转化为六位
});
hex = sixHex; //保存回hex
}
if (/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数
hex.replace(/[0-9A-F]{2}/ig, function (kw) {
rgb.push(eval('0x' + kw)); //十六进制转化为十进制并存如数组
});
return `rgb(${rgb.join(',')})`; //输出RGB格式颜色
} else {
console.log(`Input ${hex} is wrong!`);
return 'rgb(0,0,0)';
}
}
//rgb转换十六进制
function hexify(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',');
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
return "#" +
("0" + r.toString(16)).slice(-2) +
("0" + g.toString(16)).slice(-2) +
("0" + b.toString(16)).slice(-2);
}
//转换颜色变亮、变暗
function LightenDarkenColor(col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
}
</script>
</body>
示例：请点这里
