colorpicker是一款开源的颜色选择插件，中规中矩，其外观简洁明了，通过这款颜色选择插件，可以直接获取颜色值，方便快捷，返回值提供hex、rgb、rgba三中类型。
1、下载及初始化
https://github.com/farbelous/bootstrap-colorpicker
colorpicker提供多种下载安装方式
①直接进入上面网站下载插件文件，把文件放到项目任意目录，然后引入js、css文件即可
②NPM安装命令：npm install bootstrap-colorpicker
③Yarn安装命令：yarn add bootstrap-colorpicker
④Composer安装命令：composer require itsjavi/bootstrap-colorpicker
初始化colorpicker插件
<input id="cp1" type="text" class="form-control" value="#5367ce" />
<script>
$(function() {
$('#cp1').colorpicker();
});
</script>
输入以上代码后，效果如下图所示，至此一个简单的颜色选择器就初始化完成了。
2、基本应用演示
①小组件触发选择器（js代码不变）
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
②水平排列（HTML代码不变）
$(function() {
$('#cp1').colorpicker({
color: "#88cc33",
horizontal: true
});
});
③页面内联显示
<div id="cp1" class="inl-bl"></div>
<style> .inl-bl { display: inline-block; }</style>
<script>
$(function() {
$('#cp1').colorpicker({
color: '#ffaa00',
container: true,
inline: true
});
});
</script>
colorpicker还有很多配置属性，可以进行简单的操作，还有内置方法如设置/获取值、显示/隐藏、启用/禁用、销毁等，监听事件有创建、显示/隐藏、改变、启用/禁用、销毁事件，都是一些常用的，通过组合使用能够完成简单的颜色选择。
官方网站：
https://farbelous.github.io/bootstrap-colorpicker/