Preface
Recently, when writing the color selector widget, you need to use some things that convert between RGB, HSL, and HSB. I want to sort out the content in this area. By the way, use js to achieve the conversion between the three, through The study of color conversion can also provide some basic help for the usual ps and photography, eh!
Color model
About the relevant knowledge of the color model, it is mainly to sort out the sharing of others, mainly refer to the introduction of the color model and the content on the HSL, HSV Wikipedia , here is a brief summary
RGB model
The RGB model is also called the additive color mixing model, which is a method in which RGB three colors are superimposed on each other to achieve color mixing.
It is a hardware-oriented color model, which describes the color rendering method of the display's electron gun on the red, green, and blue luminous poles, so it is suitable for the display of luminous bodies such as displays.
Advantages: friendly to machines
Disadvantages: very unfriendly to users
HSL
HSL color expression is: H (hue) hue, S (saturation) saturation, and L (lightness) brightness
The H (hue) component of HSL represents the range of colors that the human eye can perceive. These colors are distributed on a flat hue ring. The value range is 0° to 360° central angle, and each angle can represent a Kinds of colors. The significance of the hue value is that we can change the color by rotating the hue ring without changing the light perception. In practical applications, we need to remember the six main colors on the hue circle as a basic reference: 360°/0°red, 60°yellow, 120°green, 180°cyan, 240°blue, 300°magenta, They are arranged on the hue circle at intervals of 60° central angle.
The S (saturation) component of HSL refers to the saturation of the color. It uses a value from 0% to 100% to describe the change of color purity under the same hue and lightness. The larger the value, the less gray in the color and the brighter the color, showing a change from rational (grayscale) to perceptual (pure color).
The L (lightness) component of HSL refers to the lightness of the color, and its function is to control the change of color. It also uses a value range of 0% to 100%. The smaller the value, the darker the color, and the closer to black; the larger the value, the brighter the color, and the closer to white.
HSV
HSV color expression is: H (hue) hue, S (saturation) saturation, and V (Value) lightness
It is somewhat similar to HSL, but there are also differences. Both are mathematically cylindrical, but HSV (hue, saturation, lightness) can be conceptually considered as an inverted cone of color (black dots are at the bottom vertex, and white is on the top bottom. Center), HSL conceptually represents a double cone and sphere (white at the upper vertex, black at the lower vertex, and the center of the largest cross section is half-way gray). Note that although "hue" refers to the same property in HSL and HSV, their definition of "saturation" is significantly different.
HSL and HSV comparison
HSL is similar to HSV. For some people, HSL better reflects the intuition of "saturation" and "brightness" as two independent parameters, but in some cases, its definition of saturation is wrong because it is very soft and almost white Color can be defined as fully saturated in HSL. Whether HSV or HSL is more suitable for human user interface is disputed.
在HSL中，饱和度分量总是从完全饱和色变化到等价的灰色（在HSV中，在极大值V的时候，饱和度从全饱和色变化到白色，这可以被认为是反直觉的）。
在HSL中，亮度跨越从黑色过选择的色相到白色的完整范围（在HSV中，V分量只走一半行程，从黑到选择的色相）。
在软件中，通常以一个线性或圆形色相选择器和在其中为选定的色相选取饱和度和明度／亮度的一个二维区域（通常为方形或三角形）形式提供给用户基于色相的颜色模型。这种时候，HSL和HSV都可以使用，但HSV传统上更常用。HSL,HSV维基百科给了一些例子，这里就不再赘述。
Implementation of mutual conversion JS code
Conversion formula (from Wikipedia)
rgb to hsl
// r,g,b范围为[0,255],转换成h范围为[0,360]
// s,l为百分比形式，范围是[0,100],可根据需求做相应调整
function rgbtohsl(r,g,b){
r=r/255;
g=g/255;
b=b/255;
var min=Math.min(r,g,b);
var max=Math.max(r,g,b);
var l=(min+max)/2;
var difference = max-min;
var h,s,l;
if(max==min){
h=0;
s=0;
}else{
s=l>0.5?difference/(2.0-max-min):difference/(max+min);
switch(max){
case r: h=(g-b)/difference+(g < b ? 6 : 0);break;
case g: h=2.0+(b-r)/difference;break;
case b: h=4.0+(r-g)/difference;break;
}
h=Math.round(h*60);
}
s=Math.round(s*100);//转换成百分比的形式
l=Math.round(l*100);
return [h,s,l];
}
console.log(rgbtohsl(2,5,10)); //[218, 67, 2]
rgb to hsv
// r,g,b范围为[0,255],转换成h范围为[0,360]
// s,v为百分比形式，范围是[0,100],可根据需求做相应调整
function rgbtohsv(r,g,b){
r=r/255;
g=g/255;
b=b/255;
var h,s,v;
var min=Math.min(r,g,b);
var max=v=Math.max(r,g,b);
var l=(min+max)/2;
var difference = max-min;
if(max==min){
h=0;
}else{
switch(max){
case r: h=(g-b)/difference+(g < b ? 6 : 0);break;
case g: h=2.0+(b-r)/difference;break;
case b: h=4.0+(r-g)/difference;break;
}
h=Math.round(h*60);
}
if(max==0){
s=0;
}else{
s=1-min/max;
}
s=Math.round(s*100);
v=Math.round(v*100);
return [h,s,v];
}
hsl to rgb
//输入的h范围为[0,360],s,l为百分比形式的数值,范围是[0,100]
//输出r,g,b范围为[0,255],可根据需求做相应调整
function hsltorgb(h,s,l){
var h=h/360;
var s=s/100;
var l=l/100;
var rgb=[];
if(s==0){
rgb=[Math.round(l*255),Math.round(l*255),Math.round(l*255)];
}else{
var q=l>=0.5?(l+s-l*s):(l*(1+s));
var p=2*l-q;
var tr=rgb[0]=h+1/3;
var tg=rgb[1]=h;
var tb=rgb[2]=h-1/3;
for(var i=0; i<rgb.length;i++){
var tc=rgb[i];
console.log(tc);
if(tc<0){
tc=tc+1;
}else if(tc>1){
tc=tc-1;
}
switch(true){
case (tc<(1/6)):
tc=p+(q-p)*6*tc;
break;
case ((1/6)<=tc && tc<0.5):
tc=q;
break;
case (0.5<=tc && tc<(2/3)):
tc=p+(q-p)*(4-6*tc);
break;
default:
tc=p;
break;
}
rgb[i]=Math.round(tc*255);
}
}
return rgb;
}
hsb to rgb
//输入的h范围为[0,360],s,l为百分比形式的数值,范围是[0,100]
//输出r,g,b范围为[0,255],可根据需求做相应调整
function hsvtorgb(h,s,v){
var s=s/100;
var v=v/100;
var h1=Math.floor(h/60) % 6;
var f=h/60-h1;
var p=v*(1-s);
var q=v*(1-f*s);
var t=v*(1-(1-f)*s);
var r,g,b;
switch(h1){
case 0:
r=v;
g=t;
b=p;
break;
case 1:
r=q;
g=v;
b=p;
break;
case 2:
r=p;
g=v;
b=t;
break;
case 3:
r=p;
g=q;
b=v;
break;
case 4:
r=t;
g=p;
b=v;
break;
case 5:
r=v;
g=p;
b=q;
break;
}
return [Math.round(r*255),Math.round(g*255),Math.round(b*255)];
}