颜色选择器ColorPicker, 通常应用在photoshop等桌面应用程序中，用来针对某个颜色特性，选择和设置丰富的颜色值。
近来，随着开发需求的多样化，B端应用也开始引入颜色选择器控件到项目中，在B端颜色选择器要如何开发呢？下面探讨一下颜色选择器的设计原理。
色彩模式
ColorPicker开发需要对色彩模式有一定的了解，包括：RGB、 HSL、 HSV / HSB、CMYK等。我们重点了解下前三个：
RGB
RGB是代表Red红、Green绿、Blue蓝三原色光组成的颜色空间，R、G、B各有256级亮度, 可相互组合组成256^3种颜色，如下图所示：
HSL
HSL是由色相Hue、饱和度Saturation、亮度Lightness三部分组成的颜色空间。
Hue是由原色、间色、复色组成的，其中原色则是色彩的三原色红、黄、蓝，间色为原色中的两种颜色按一定比例混合得到的颜色，复色为原色中三种颜色按一定比例混合得到的颜色。
在HSL色彩空间下，色相可以表现为由：红色、黄色、绿色、青色、蓝色、品红六种颜色渐变过度形成一个闭环，如下图所示:
Colorpicker中可以用下图这样的色相表示法用作色相值得选择
Saturation饱和度是色彩的纯度， 饱和度越高色彩越浓，饱和度越低色彩越淡，通常取值范围为0%～100%
亮度（Lightness）指的是色彩的明暗程度，亮度值越高，色彩越白，亮度越低，色彩越黑 ，通常取值范围为0%～100%
把色相（Hue）、饱和度（Saturation）和亮度（Lightness）三个属性整合到一个圆柱中，就形成了HSL色彩空间模型
HSL应用到Colorpicker中展示效果则如下图所示:
HSV / HSB
HSV / HSB是由色相Hue、饱和度Saturation、明度Value / Brightness三部分组成的颜色空间，HSV和HSB表示得是同一个概念，是在不同的领域应用中出现的名称差异。
HSB的色相Hue与前面介绍的HSL色相是一样的
Saturation饱和度是色彩中混入白色的量，饱和度越高，颜色则深而艳，光谱色的白光成分饱和度为0，饱和度达到最高，通常取值范围为0%～100%，值越大，颜色越饱和
Value / Brightness明度是色彩的明亮度, 可以理解成颜色混入黑色的量。明度为0时即为黑色。最大明度时色彩最鲜明的状态。取值范围0～100%
把色相（Hue）、饱和度（Saturation）和明度（Value / Brightness）三个属性整合到一个圆柱中，就形成了HSV / HSB色彩空间模型
单个色相的HSV色彩空间可以表示为下图所示：
应用在Colorpicker中
Alpha透明度
Alpha 透明度，取值0% ~ 100%，是描述色彩的另一个通道, 与色彩模式可以组成RGBA、HSLA、HSVA
完整的颜色选择器Colorpicker就可以应用以上这些概念进行实际开发了，其中还可能会用到颜色转换相关的库进行开发，具体实现效果如下图：
