前言

最近呢，在写色彩选择器小插件的时候需要用到RGB,HSL,HSB相互转换的一些东西，就想着好好整理一下这方面的内容，顺便用js实现一下三者之间的转换，通过对色彩转换的学习，对平时整整ps，摄影也是有一定的基础帮助的,恩！

色彩模型

关于色彩模型的相关知识，主要是整理了别人的分享主要参考了色彩模型介绍和HSL,HSV维基百科上的内容，这里简单做下整理

RGB模型

RGB模型也称为加色法混色模型，以RGB三色光互相叠加来实现混色的方法。
它是一种以硬件为导向的色彩模型，它描述了显示器的电子枪打在Red红、Green绿、Blue蓝三色发光极上的显色方式，因而适合于显示器等发光体的显示。

优点：对机器友好
缺点：对用户很不友好

HSL

HSL色彩的表述方式是：H(hue)色相，S(saturation)饱和度，以及L(lightness)亮度

HSL的H(hue)分量，代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。

HSL的S(saturation)分量，指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化。

HSL的L(lightness)分量，指的是色彩的明度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。

HSV

HSV色彩的表述方式是：H(hue)色相，S(saturation)饱和度，以及V(Value)明度

与HSL有些类似，但也有不同，二者在数学上都是圆柱，但HSV（色相，饱和度，明度）在概念上可以被认为是颜色的倒圆锥体（黑点在下顶点，白色在上底面圆心），HSL在概念上表示了一个双圆锥体和圆球体（白色在上顶点，黑色在下顶点，最大横切面的圆心是半程灰色）。注意尽管在HSL和HSV中“色相”指称相同的性质，它们的“饱和度”的定义是明显不同的。

HSL和HSV对比

HSL类似于HSV。对于一些人，HSL更好的反映了“饱和度”和“亮度”作为两个独立参数的直觉观念，但是在某些情况时，它的饱和度定义是错误的，因为非常柔和的几乎白色的颜色在HSL可以被定义为是完全饱和的。对于HSV还是HSL更适合于人类用户界面是有争议的。

在HSL中，饱和度分量总是从完全饱和色变化到等价的灰色（在HSV中，在极大值V的时候，饱和度从全饱和色变化到白色，这可以被认为是反直觉的）。
在HSL中，亮度跨越从黑色过选择的色相到白色的完整范围（在HSV中，V分量只走一半行程，从黑到选择的色相）。
在软件中，通常以一个线性或圆形色相选择器和在其中为选定的色相选取饱和度和明度／亮度的一个二维区域（通常为方形或三角形）形式提供给用户基于色相的颜色模型。这种时候，HSL和HSV都可以使用，但HSV传统上更常用。HSL,HSV维基百科给了一些例子，这里就不再赘述。

相互转换JS代码实现

转换公式(来自维基百科)

rgb转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转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转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转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)];
}

JS实现RGB,HSL,HSB相互转换相关推荐

HSI, HSV,RGB,HSL,HSB,CMYK ,Ycc,XYZ,Lab,YUV空间的区别
HSV颜色空间 HSV(hue,saturation,value)颜色空间的模型对应于圆柱坐标系中的一个圆锥形子集,圆锥的顶面对应于V=1. 它包含RGB模型中的R=1,G=1,B=1 三个面,所 ...
Hex hsl 转换 php,关于 RGB，HEX，HSL 颜色相互转换
最近一段时间在折腾一个微信在线编辑器的项目,使用 UEditor 进行二次开发. 关于 UEditor 的定制,用到的都太粗浅,官方文档上都能找得到.主题使用的样式表是 ueditor.css 而不是 ...
JS十六进制颜色（#fff）与RGB, HSL颜色的相互转换（实用、赞）
原文出处:https://www.haorooms.com/post/color_rgb_transform 延伸阅读:用js生成全色系调色盘的算法前言今天做了这个需求,就是前端支持rgba设置, ...
VC编程实现色彩空间RGB与XYZ相互转换
VC编程实现色彩空间RGB与XYZ相互转换使用过PhotoShop软件的朋友对色彩空间应该不会感到陌生,在PhotoShop中经常使用有RGB(红色.绿色.蓝色).CMYK(青色.洋红.黄色.黑 ...
RGB与HSB之间转换
先来了解一些概念: 1.RGB是一种加色模型,就是将不同比例的Red/Green/Blue混合在一起得到新颜色.通常RGB颜色模型表示为: 2.HSB(HSV) 通过色相/饱和度/亮度三要素来表达颜色 ...
php: RGB 转 HSB(HSV)
前言最近因为涉及到一个算色规则,其中需要把RGB转HSB的要求,所以自己研究了下,故此记录下. 什么是RGB? RGB表示红色(R).绿色(G).蓝色(B),又称为三原色光.它是通过对三个颜色通道的 ...
RGB 和 CMYK 相互转换
Adobe 色彩系统 RGB 和 CMYK 相互转换原理为了说明 adobe 的 RGB 转换 CMYK 的过程,不得不先涉及到一些色彩转换程序方面的东西. CMYK_ADOBE_COLORS ...
python:实现RGB和HSV相互转换算法(附完整源码)
python:实现RGB和HSV相互转换算法 def hsv_to_rgb(hue: float, saturation: float, value: float) -> list[int]:i ...
js,jQuery时间与时间戳相互转换
js,jQuery时间与时间戳相互转换一.时间转时间戳 //获取当前时间 var myDate = new Date(); //获取当前时间(从1970.1.1开始的毫秒数,时间戳) myDate. ...

JS实现RGB,HSL,HSB相互转换

前言