本篇文章次要分两局部来解说，首先带你进一步认识一下色彩模型相干的概念，而后在此基础上封装一个本人的ColorPicker组件。
同时，在文章结尾处将分享一个前端小技巧，不要错过哦！
色彩模型
咱们平时开发中，常常用到的色彩模型次要是十六进制和RGB两种，浏览器所反对的色彩模型还有色彩标识符和HSL。作为前端开发人员，根本只须要依据设计稿给出的色值，复制过去就能够了，然而如果要封装一个色彩抉择组件，却不得不理解一下这几种色彩模型的原理。
RGB和十六进制
其中最直观的色彩模型应该就是RGB了，这个比较简单，它次要是将色彩分为了3个通道red、green、blue，就别离对应R、G、B。而后每一个通道又分成了256（0~255）个级别，来示意色彩的强度。依据屏幕的三原色原理，就能够合成咱们须要的各种色彩了，它所能示意的色彩就有256 ** 3 = 16777216种，曾经远远超过人眼所能辨认的色彩范畴了。
十六进制也是属于RGB色彩模型，只是展现的模式不一样而已。它将RGB所示意的十进制数值转成十六进制来示意，每个色彩通道（0~255）十六进制就是（00~FF），并也#号结尾。
举例：
- 所有色彩通道为
0时，体现进去的色彩就是全黑，RGB示意rgb(0,0,0)，十六进制示意#000000或者#000； - 所有色彩通道为
255时，体现进去的就是全白，RGB示意rgb(255,255,255)，十六进制示意#ffffff或者#fff; - 同理，蓝色、绿色、红色就是各自通道的数值设置最大，其余通道的数值设置最小。
尽管RGB三通道模型很直观，也能示意那么多的色彩，然而很显然，很难通过人来调出本人想要的色彩。因为当咱们须要一个色彩时，很难人为把控哪个通道的色彩须要多一点，哪个色彩通道设置小一些。专业人士可能会依据教训大略能调进去，然而对于咱们的用户小白，基本上就是大刀阔斧了。
HSL和HSV（很要害）
针对上述问题，咱们就不得不理解一下其余两个色彩模型了：HSL和HSV。 这两个色彩模型很类似，所以放在一起说了，搞明确了这两个色彩显示原理，就能够玩出很多花色了。
HSL次要是将色彩分为了 色相（H:hue）、饱和度（S:saturation）、亮度（L:lightness） 三个通道，其中最重要的就是色相（H）了。
色相H就是基于红、绿、蓝三原色用一个360°的圆环来示意，红色位于0°，绿色位于120°，蓝色位于240°。并且在红色和绿色之间60°地位减少了黄色，绿色和蓝色之间180°地位减少了青色，蓝色和红色之间300°地位减少洋红色。而后通过这6种颜色进行适度，就得出的一个360°的色相环。
饱和度S就是指色彩的强度或者说纯度，通过百分比0~100%来示意。数值越大，色彩看起来就越娇艳，数值越小，看起来就越黯淡。所出现进去的就是从灰色到色相色彩的适度。
亮度L就是示意色彩的明暗水平，也是用百分比0~100%来示意。次要反馈的就是色彩中的黑、白两种色彩，小于50%时，混入的彩色就越多，大于50%的时候，混入的红色就越多。当数值为0时，体现进去的色彩就是纯黑，数值为100%时，体现进去的色彩就是纯白，不论另外两个通道数值为多少的时候。
HSV模型和HSL模型一样，H也是示意色相，不同的是S和V（value）。
饱和度S尽管也是指色彩的纯度，但它反映进去的是混入红色的值，值越大，混入红色越少，色彩就越纯，值越小，混入的红色就越多。数值为0时，体现进去的就是纯白。
明度V它所体现的明暗水平是指混入彩色的水平。数值越小，混入彩色就越多，数值越大，混入的彩色就越少。数值为0时，体现的就是纯黑。
组件UI的实现
理解了这些色彩模型的原理，那咱们当初就能够开始上代码了。
仔细的同学应该发现了，为什么要介绍HSV模型呢？浏览器其实是不反对该色彩模型的。这其实次要是为了封装组件的须要，当初市面上的色彩抉择组件，基本上都是依据HSV色彩模型实现的。至于为什么，一种是为了对立吧，一些共识的规范不要去扭转它；第二个应该也是不便UI的实现，须要将这些三维的色彩模型开展成二维，而HSV开展后更合乎人的直观视觉。
怎么开展？
- 个别是将色相H开展成一维的线形（通过0°~360°的圆环或者是线段示意）；
- 饱和度S和明度V开展成二维的矩形，
x轴示意饱和度S，y轴示意明度V； - 如果须要透明度A，另外再减少一条一维的线段。下面没有着重介绍透明度，因为这些色彩模型透明度都是一样的，算是一个通用的色彩通道吧。
上面看UI的实现（留神：组件基于uniapp + vue3，只展现局部代码）：
色相的实现
<view class="hue"></view>.hue { /* 色相：从左到右顺次为 红、黄、绿、青、蓝、洋红，等分突变 */ background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}饱和度和明度矩形的实现
<!-- 对比度和明度的矩形 --><view class="sv" :style="{ background: hColor }"> <view class="s-mask"> <view class="v-mask"></view> </view></view>其中hColor示意色相环中抉择的色彩。
.s-mask { /* 饱和度x轴实现：从左到右，纯白 >>> 通明的突变 */ background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));}.v-mask { height: 150px; /* 明度y轴的实现：从下到上，纯黑 >>> 通明的突变 */ background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));}放一张最终的效果图：
如果想看具体成果，能够去我的微信小程序体验，搜寻【涂图了】就能够找到。
组件逻辑的实现
用到的第三方库：
color-convert
次要是为了不同色彩模型之间数值的转换，如果你有工夫，也能够去理解他们之间的转换算法，本人实现。
定义组件的props：
const props = defineProps({ value: { type: String, default: '#000', },});为了兼容所有的色彩模型，在拿到props参数之后，都须要转成咱们组件外部实现的HSV模型。
const setDefaultValue = (color: string) => { let defaultHSV: HSV = [0, 0, 0]; if (/^#/.test(color)) { defaultHSV = hex.hsv(color); } else if (/^rgb/.test(color)) { defaultHSV = rgb.hsv(color.match(/\d+/g) as unknown as RGB); } else if (/^hsl/.test(color)) { defaultHSV = hsl.hsv(color.match(/\d+/g) as unknown as HSL); } else if (/^hsv/.test(color)) { defaultHSV = color.match(/\d+/g) as unknown as HSL; } console.log(color, '===> hsv', defaultHSV);}在拿到HSV的各个数值之后，就能够对咱们的组件进行初始化了。因为代码量较多，就不贴代码了，大略就是对拖拽控件的偏移量进行初始化。
同时，在组件外部批改了色彩之后，也须要通过事件传出去，不要忘了将HSV模型转成浏览器能辨认的模型。
const emit = defineEmits<{ (event: 'change', value: string): void;}>();触发机会能够是实时的touchmove，也能够是在touchend时，或者在组件外部加一个确认按钮来触发。依据集体需要以及性能来衡量，我是在touchend时触发change事件的。
对于色彩抉择组件ColorPicker的封装就到这里了。最初，再分享一个干货小福利。
色彩转换小技巧
如何疾速将其余色彩模型转换成RGB呢？
间接看代码：
const $div = document.createElement('div');$div.style.color = 'red';document.body.appendChild($div);const colorRGB = window.getComputedStyle($div).color;console.log(colorRGB); // rgb(255, 0, 0)document.body.removeChild($div);将下面代码间接复制到你的浏览器控制台试一下，其次要是通过浏览器原生的APIgetComputedStyle来实现的，它能够将浏览器反对的任意色彩，主动转换成RGB/RGBA来返回。
最初
感激你的浏览，如果感觉不错，记得点赞和分享！
对于文章中组件的实现成果可参考我的小程序【涂图了】进行体验，同时也能够关注我的公众号【末日码农】，获取更多技术相干常识~