JavaScript快速实现一个颜色选择器.docx

第

JavaScript快速实现一个颜色选择器

目录颜色模型HSV与HSL的区别实现选择器色相饱和度和明亮度hsv转rgb透明度基于HSL的颜色选择器使用canvas在做前端界面开发的时候，遇到需要改变颜色的需求，就需要使用颜色选择器。

针对这个问题，第一想法，自然是H5提供了inputcolor，可以实现。但不出意外的，IE并不支持。而且，chrome的实现方式和firefox也不太一样，见下图：

左图是chrome的，浏览器自身实现的一个颜色选择器控件；右图是firefox的，引入的是操作系统自带的颜色选择器控件。

鉴于这些差异性，就很有必要实现一个统一的颜色选择器组件，譬如我们来实现一个类似chrome浏览器自带的这种选择器。

要做这个组件，首先需要了解的一个知识点，就是颜色模型。

颜色模型

我们前端开发，最常见的颜色模型就是RGB，即红绿蓝三基色模型，而前端浏览器能支持颜色显示的颜色模型只有两种：RGB和HSL。

其中，RGB模型是以三色的值在0-255以内的范围内，混合成一种颜色，对机器较友好，但并不太适合人直观的进行颜色选择。所以，通常的颜色选择器一般会使用另外两种更面向视觉感知的模型：HSV和HSL。关于颜色模型的详细知识，可见颜色模型的基础知识。

而chrome浏览器自带的颜色选择器，就是基于HSV的。

HSV与HSL的区别

HSV是基于色相H(hue)、饱和度S(saturation)、明度V(Value)；HSL基于色相H(hue)、饱和度S(saturation)、亮度L(lightness)。

其中色相是一样的，本质都是一种颜色值。

在这两个模型中，色相是以六大主色为基础，分别按60度的间隔排列在圆环上。

这六大主色分别是：0红、60黄、120绿、180青、240蓝、300洋红、360红。

而在前端进行布局设计时，常常把圆环处理成长方形的色块，通过颜色的线性渐变方式进行分段处理，角度换算成一定的比例，如下所示：

而饱和度和明亮度都是有区别的，为方便理解颜色选择器，本文概括简单的描述，如下：

HSV中的S饱和度，反映色相颜色中混入白色的值，呈现白色到色相(H)颜色的变化；HSL中的S饱和度，反映色相颜色中混入灰色的值，呈现的是一种从灰色到色相(H)颜色的变化。HSV中的V明度，体现的是从黑色到色相(H)颜色的过渡。HSL中的L亮度，体现的是从黑色到色相(H)颜色再到白色的过渡。

另外需要明确的是，各个部分的取值范围：Hue色相：0-360；饱和度和明亮度都是：0~100%。

具体的实现上的差别，我们可以接着往下看。

实现选择器

色相

色相的原理上面已经介绍了，HSV和HSL一样。落实到代码层面的话，也是很好实现的，以css和div的方式，只需要进行颜色的线性渐变即可：

div

!--色相柱--

divid=colorBar/div

!--滑动块--

divid=divSlider/div

/div

.div-bar{

position:relative;

width:10px;

height:200px;

margin-left:15px;

cursor:pointer;

.color-bar{

background:linear-gradient(180deg,#f00,#ff017%,#0f033%,#0ff50%,#00f67%,#f0f83%,#f00);

width:10px;

height:200px;

margin-left:20px;

.div-slider{

width:8px;

height:8px;

}

这里是竖向的色相柱，宽高10*200，如果需要横向的改动宽高布局即可。

计算色相柱的滑块位置

要想移动滑块获取位置信息，首先需要监听色相柱上的鼠标事件，具体如下：

colorBar.addEventListener(mousedown,function(e){

setHueSlider(e)

document.addEventListener(mousemove,setHueSlider)

document.addEventListener(mouseup,function(){

document.remove