Color选择器的开发实现

我心飞翔 分类:javascript

颜色选择器ColorPicker, 通常应用在photoshop等桌面应用程序中,用来针对某个颜色特性,选择和设置丰富的颜色值。

近来,随着开发需求的多样化,B端应用也开始引入颜色选择器控件到项目中,在B端颜色选择器要如何开发呢?下面探讨一下颜色选择器的设计原理。

image.png

色彩模式

ColorPicker开发需要对色彩模式有一定的了解,包括:RGB、 HSL、 HSV / HSB、CMYK等。我们重点了解下前三个:

RGB

RGB是代表Red红、Green绿、Blue蓝三原色光组成的颜色空间,R、G、B各有256级亮度, 可相互组合组成256^3种颜色,如下图所示:

image.png

HSL

HSL是由色相Hue、饱和度Saturation、亮度Lightness三部分组成的颜色空间。

Hue是由原色、间色、复色组成的,其中原色则是色彩的三原色红、黄、蓝,间色为原色中的两种颜色按一定比例混合得到的颜色,复色为原色中三种颜色按一定比例混合得到的颜色。

在HSL色彩空间下,色相可以表现为由:红色、黄色、绿色、青色、蓝色、品红六种颜色渐变过度形成一个闭环,如下图所示:

image.png

Colorpicker中可以用下图这样的色相表示法用作色相值得选择

image.png

Saturation饱和度是色彩的纯度, 饱和度越高色彩越浓,饱和度越低色彩越淡,通常取值范围为0%~100%

image.png

image.png

亮度(Lightness)指的是色彩的明暗程度,亮度值越高,色彩越白,亮度越低,色彩越黑 ,通常取值范围为0%~100%

image.png

image.png

把色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个属性整合到一个圆柱中,就形成了HSL色彩空间模型

image.png

HSL应用到Colorpicker中展示效果则如下图所示:

image.png

HSV / HSB

HSV / HSB是由色相Hue、饱和度Saturation、明度Value / Brightness三部分组成的颜色空间,HSVHSB表示得是同一个概念,是在不同的领域应用中出现的名称差异。

HSB的色相Hue与前面介绍的HSL色相是一样的

Saturation饱和度是色彩中混入白色的量,饱和度越高,颜色则深而艳,光谱色的白光成分饱和度为0,饱和度达到最高,通常取值范围为0%~100%,值越大,颜色越饱和

image.png

Value / Brightness明度是色彩的明亮度, 可以理解成颜色混入黑色的量。明度为0时即为黑色。最大明度时色彩最鲜明的状态。取值范围0~100%

image.png

把色相(Hue)、饱和度(Saturation)和明度(Value / Brightness)三个属性整合到一个圆柱中,就形成了HSV / HSB色彩空间模型

image.png

单个色相的HSV色彩空间可以表示为下图所示:

image.png

应用在Colorpicker

image.png

Alpha透明度

Alpha 透明度,取值0% ~ 100%,是描述色彩的另一个通道, 与色彩模式可以组成RGBA、HSLA、HSVA

image.png

完整的颜色选择器Colorpicker就可以应用以上这些概念进行实际开发了,其中还可能会用到颜色转换相关的库进行开发,具体实现效果如下图:

image.png

回复

我来回复
  • 暂无回复内容