RGB、HSL、HSV及各种颜色选择器界面

你知道吗？原来颜色是种四维产物。

色彩体系模型

我们知道，在描述一个颜色时，往往需要4个变量，其中三个变量代表颜色，最后一个变量代表透明度。

以目前应用最广泛的孟塞尔色体为例，横切面展示了色相的变化。色相是指色彩的相貌， 用于区分不同的颜色 。根据光的不同波长，通过物体表面反射表现出红色、黄色或绿色等，这种特性被称之为色相。

孟塞尔色立纵剖面图的纵向代表色彩的明度。物体表面反射光的程度不同，色彩的明暗程度就会有区别，这种色彩的明暗程度称为明度。在孟塞尔颜色系统中，黑色的绝对明度被定义为0（理想黑），而白色的绝对明度被定义为100（理想白）；而相对明度就如通常我们所看到的字黑被定义为5，纸白被定义为95；其他系列灰色则介于两者之间。

塞尔色立纵剖面图的横向代表色彩的纯度，纯度值由0开始，向球面以2递增。纯度代表着色彩中包含的单种标准色成分的比例，也是色彩感觉强弱的标志 。
不同色相所能达到的纯度范围是不一样的，比如红色的纯度最高，而绿色纯度相对低些，其他的色相居中，同时由于不同色相本身的冷暖亮暗差别很大，明度因色相而异。

有了色相、明度、纯度三个维度，再加上第四个维度——透明度，我们就可以用它们来表示我们看到的色彩了。

常见的色彩表示方式

• RGB
  R：red 红色
  G：green 绿色
  B：blue 蓝色
  

• HSL/ESL
  H/E：hue 色相
  S：saturation 饱和度
  L：lightness 亮度（最白→最黑）
  

• HSB/HSV
  H：hue 色相
  S：saturation 饱和度
  B：brightness 明度
  V：value 值（代表深浅）
  

• HEX
  HEX色彩空间：又叫十六进制颜色模式，格式为#000000。当然，HEX也可以添加透明度。

透明度参照表；
00%=FF（不透明） 5%=F2 10%=E5 15%=D8 20%=CC
25%=BF 30%=B2 35%=A5 40%=99 45%=8c 50%=7F
55%=72 60%=66 65%=59 70%=4c 75%=3F 80%=33
85%=21 90%=19 95%=0c 100%=00（全透明）

不同软件和系统的色彩选择器

我们知道，颜色是个四维产物，必须由4个变量才能精确表达一种颜色。而在用户界面中，大都都是在平面内操作，所以一般需要一个二维面选择器、一个一维滑动选择器，再加一个透明度控制值器。

• Windows
  Windows的默认颜色选择器中，二维面选择器选择的是色相和饱和度，然后单独选择明度。
  

• MacOS
  MacOS系统，颜色选择器就丰富多了，可以按照不同的分类来自由选择。
  

• Sketch
  在设计软件中，二维面一般为饱和度和明度，色相和透明度单独选择。
  

• Photoshop
  

• Adobe XD
  

• Axure
  

• Blender
  

• C4D
  

参考资料：
1. RGB、HSL、Hex网页色彩，看完这篇全懂了
2. 走进色彩的四维世界
3. 透明度与十六进制代码转换