Color选择器的开发实现
颜色选择器ColorPicker
, 通常应用在photoshop
等桌面应用程序中,用来针对某个颜色特性,选择和设置丰富的颜色值。
近来,随着开发需求的多样化,B端应用也开始引入颜色选择器控件到项目中,在B端颜色选择器要如何开发呢?下面探讨一下颜色选择器的设计原理。
色彩模式
ColorPicker
开发需要对色彩模式有一定的了解,包括:RGB、 HSL、 HSV / HSB、CMYK
等。我们重点了解下前三个:
RGB
RGB
是代表Red
红、Green
绿、Blue
蓝三原色光组成的颜色空间,R、G、B
各有256级亮度, 可相互组合组成256^3种颜色,如下图所示:
HSL
HSL
是由色相Hue
、饱和度Saturation
、亮度Lightness
三部分组成的颜色空间。
Hue
是由原色、间色、复色组成的,其中原色则是色彩的三原色红、黄、蓝,间色为原色中的两种颜色按一定比例混合得到的颜色,复色为原色中三种颜色按一定比例混合得到的颜色。
在HSL色彩空间下,色相可以表现为由:红色、黄色、绿色、青色、蓝色、品红六种颜色渐变过度形成一个闭环,如下图所示:
Colorpicker
中可以用下图这样的色相表示法用作色相值得选择
Saturation
饱和度是色彩的纯度, 饱和度越高色彩越浓,饱和度越低色彩越淡,通常取值范围为0%~100%
亮度(Lightness
)指的是色彩的明暗程度,亮度值越高,色彩越白,亮度越低,色彩越黑 ,通常取值范围为0%~100%
把色相(Hue
)、饱和度(Saturation
)和亮度(Lightness
)三个属性整合到一个圆柱中,就形成了HSL
色彩空间模型
HSL
应用到Colorpicker
中展示效果则如下图所示:
HSV / HSB
HSV / HSB
是由色相Hue
、饱和度Saturation
、明度Value / Brightness
三部分组成的颜色空间,HSV
和HSB
表示得是同一个概念,是在不同的领域应用中出现的名称差异。
HSB
的色相Hue
与前面介绍的HSL
色相是一样的
Saturation
饱和度是色彩中混入白色的量,饱和度越高,颜色则深而艳,光谱色的白光成分饱和度为0,饱和度达到最高,通常取值范围为0%~100%,值越大,颜色越饱和
Value / Brightness
明度是色彩的明亮度, 可以理解成颜色混入黑色的量。明度为0时即为黑色。最大明度时色彩最鲜明的状态。取值范围0~100%
把色相(Hue
)、饱和度(Saturation
)和明度(Value / Brightness
)三个属性整合到一个圆柱中,就形成了HSV / HSB
色彩空间模型
单个色相的HSV
色彩空间可以表示为下图所示:
应用在Colorpicker
中
Alpha透明度
Alpha
透明度,取值0% ~ 100%,是描述色彩的另一个通道, 与色彩模式可以组成RGBA、HSLA、HSVA
完整的颜色选择器Colorpicker
就可以应用以上这些概念进行实际开发了,其中还可能会用到颜色转换相关的库进行开发,具体实现效果如下图: