用js生成全色系调色盘的算法

js的调色盘组件其实制作起来还算比较复杂的,网上有一些现成的,但是大部分组件只能提供部分颜色的选取,例如web色.那如何制作一个全色系的颜色选取器呢?

本文主要将如何从底层来讲全色系用js生成一张色盘.然后如果要使用色盘的时候,利用坐标就可以逆过来计算出选取到的颜色了.

首先看个demo吧,下面的demo,需要在现代浏览器里浏览,这个色盘使用canvas动态生成的,每个像素的点都是经过计算后生成的,拖动滑动条可以调节明暗动态更新色盘.是不是很神奇,下面就会介绍这里面用到的一系列知识.

调节明暗度(0-1)

 

首先色彩有几种表示方法,这里用到两种,所以只介绍两种,一种叫做HSL,一种叫做RGB.
RGB大家很常用的,这个应该很熟悉了,就是red,green,blue.设置值的时候分别设置红绿蓝三色的比例就可以组合成不同的颜色,通常每个色系都是用0-255来表示.
HSL这个算是新概念吧,百科上有介绍,还是比较详细的:

http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4

三个单词的意思分别是:hue（色相）、saturation（饱和度）、lightness（亮度）.其中色相的取值是0-360,饱和度取值是0-1,亮度取值也是0-1.其实用模型来理解HSL更容易理解.HSL模型建立起来后其实就是一个色相环
如上面的例子中右边的色环所示.色相就代表角度,从0-360,正好转了一个圈,饱和度代表半径,亮度是第三个维度,用滑动条控制,三个维度结合起来就是一个完整的色系了.

可以看出来了吧,用HSL来建模更形象直观,所以在程序中我们用HSL来建模,然后在显示到屏幕上的时候,我们用一个算法把HSL转换成RGB,然后显示到屏幕上.这个算法是这样的:

点击查看源代码( powered by www.html-js.com )

functionHSVToRGB(h,s,v){
vari;
varf,p,q,t;
varr,g,b;
if(s==0){
v=Math.floor(v*255);
return{
r:v,
g:v,
b:v
};
}
h/=60;
i=Math.floor(h);
f=h-i;
p=v*(1-s);
q=v*(1-s*f);
t=v*(1-s*(1-f));
switch(i){
case0:r=v;g=t;b=p; break;
case1:r=q;g=v;b=p; break;
case2:r=p;g=v;b=t; break;
case3:r=p;g=q;b=v; break;
case4:r=t;g=p;b=v; break;
default:r=v;g=p;b=q; break;
}
return{
r:r*255,
g:g*255,
b:b*255
};
}

其实就是一个公式,公式在维基百科上有给出,这里就不列出来了.网上有不少这种算法,但是发现有很多的算法有问题….我试了好几个最后才找出一个可用的.
然后,我们开始建模,将HSL中的HS表示成一个二维的平面,宽360,高100,然后将HS的值映射到这个平面上,L则映射到滑动条上,可以自由调节.

点击查看源代码( powered by www.html-js.com )