快速实现一个颜色选择器

[梦断畅通]

  在做前端界面开发的时候，遇到需要改变颜色的需求，就需要使用颜色选择器。针对这个问题，第一想法，自然是H5提供了input color，可以实现。但不出意外的，IE并不支持。而且，chrome的实现方式和firefox也会不太一样。

  而chrome和Firefox的差异也十分明显，chrome浏览器自身实现的就是一个颜色的选择器控件，而Firefox实现的是引入一个操作系统自带的颜色选择器控件。而针对这些差异性，就很有必要实现一个统一的颜色选择器组件，譬如我们来实现一个类似chrome浏览器自带的这种选择器。
我们前端开发，最常见的颜色模型就是RGB，即红绿蓝三基色模型，而前端浏览器能支持颜色显示的颜色模型只有两种：RGB和HSL。

  而HSV 与 HSL 的区别在于HSV是基于色相H(hue)、饱和度S(saturation)、明度V(Value)；HSL基于色相H(hue)、饱和度S(saturation)、亮度L(lightness)。其中色相是一样的，本质都是一种颜色值。在这两个模型中，色相是以六大主色为基础，分别按60度的间隔排列在圆环上。
色相：色相的原理在于HSV和HSL一样。落实到代码层面的话，也是很好实现的，以css和div的方式，只需要进行颜色的线性渐变即可：颜色面板一般是一个长方形的区域，以HSV为例。当然，饱和度和明亮度在水平或者垂直方向上是可以调换的。