系统学习下
Web图形系统中表示颜色的基本方法。
一、RGB 和 RGBA 颜色表示法
1. 定义
-
RGB颜色RGB颜色的十六进制表示法形如：#RRGGBB，其中RR、GG、BB分表时两位十六进制数字，表示红（red）、绿（green）、蓝（blue）三色通道的色阶。色阶 表示某个通道的强弱。取值
[0, 255]。RGB颜色是将人眼可见的颜色表示为红、绿、蓝三原色不同色阶的混合。并不能表示人眼可见的全部颜色。但是一般的显示器、彩色打印机、扫描仪都支持它。在浏览器中，
CSS一般有两种表示RGB颜色值的方式：#RRGGBB十六进制表示法rgb(red, green, blue)十进制表示法
-
RGBARGBA其实就是在RGB的基础上增加了一个Alpha通道，也就是透明度（取值[0, 1]）。一些新版本的浏览器，可以用
#RRGGBBAA的形式来表示RGBA色值。但是较早期的浏览器只支持rgba(red, green, blue, alpha)这种形式。
WebGL 的 shader 默认支持 RGBA。但是 WebGL 采用归一化的浮点数值，即：WebGL 的颜色分量 r、g、b、a 的数值都是 0 到 1 之间的浮点数。
2. 特点
RGB 和 RGBA 的颜色表示法非常简单，但是当要选择一组颜色给图表使用时，我们并不知道要以什么样的规则来配置颜色才能让不同数据对应的图形之间的对比尽可能鲜明。因为对于一个 RGB 颜色来说，只能大致直观地判断出它偏向于红色、绿色还是蓝色。
在需要动态构建视觉颜色效果的时候，很少直接选用 RGB 色值。而是比较常用的 HSL 和 HSV 颜色表示法。
二、HSL 和 HSV 颜色表示法
1. 定义
HSL 和 HSV 用色相（Hue）、饱和度（Saturation）和亮度（Lightness）或明度（Value）来表示颜色。其中，Hue 是角度，取值范围是 0 到 360 度，饱和度、亮度或明度的值都是从 0 到 100% 。
根据 HSL 的规则，亮度越高，颜色越接近白色，只有同时提升饱和度才能确保颜色不会太浅。
CSS 和 Canvas2D 都可以直接支持 HSL 颜色，只有 WebGL 需要转换。
2.特点
由于人眼对不同频率的光的敏感度不同，即使我们可以均匀地修改颜色地亮度和饱和度，但仍存在有的颜色看起来和其他颜色的差距明显，有的颜色还是没那么明显。
3. 转换
在着色器中使用 RGB 和 HSV 的转换代码，生成绘图所需顶点着色器和片元着色器。
vec3 rgb2hsv(vec3 c){
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
vec3 hsv2rgb(vec3 c){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0);
rgb = rgb * rgb * (3.0 - 2.0 * rgb);
return c.z * mix(vec3(1.0), rgb, c.y);
}
三、CIE Lab 和 CIE Lch 颜色表示法
1. 定义
一个针对人类感觉的颜色描述方式 CIE Lab 。它用 L 表示亮度，a 和 b 表示颜色对立度。
// css-color level4 规范给的 Lab 颜色值的定义
lab() = lab(<percentage> <number> <nubmer> [ / <alpha-value> ]?)
RGB 值可以转 Lab 值。
2. 特点
目前还没有能支持 CIE Lab 的图形系统。需要借助相关工具，如：d3-color JavaScript 库。
四、Cubehelix 色盘
1. 定义
Cubehelix 色盘（立方螺旋色盘），在 RGB 的立方中构建一段螺旋线，让色相随着亮度增加螺旋变换。
2. 应用
借助 NPM 包 cubehelix 构造 cubehelix 色盘颜色映射函数。
五、业务场景
在可视化应用里，一般有两种使用颜色的方式：
- 整个项目的
UI配色全部由UI设计师设计好，开发者使用任何格式的颜色都行。 - 设计师定下视觉基调和一些主色，开发者根据主色和数据来动态生成颜色值。
在一般的图表呈现项目中，方式一使用较多。但是在一些数据比较复杂的项目中，方式二比较常用。如：希望连续变化的数据能够呈现连续的颜色变换时，把 HLS、CIELab、Cubehelix 色盘结合数据变量来动态生成颜色值。
六、小结
Web 图形系统表示颜色的方法可以分为 2 大类：
RGB、HLS和HLV、CIELab和CIELch等颜色空间表示法；Cubehelix色盘表示法。
Web 图形系统表示颜色的方法 | 定义 | 优点 | 缺点 |
|---|---|---|---|
RGB | 用三原色的色阶来表示颜色 | 最基础的颜色表示法 | 对用户不够友好 |
HLS 和 HLV | 用色相、饱和度、亮度或明度来表示颜色 | 对开发者比较友好 | 数值变换与人眼感知不完全相符 |
CIELab 和 CIELch | 颜色空间表示法 | 与人眼感知相符的色彩空间表示法 | 还没有被浏览器支持，但是有一些 JavaScript 库（如：d3-color ）可以直接处理 Lab 颜色空间 |
Cubehelix | 色盘表示法 | 适合呈现颜色随数据动态改变的效果 | - |
在可视化中，使用图形的 大小、高低、宽窄、颜色 和 形状 这些常见信息来反映数据。同时也会使用二维强化的技巧来叠加两个维度的信息，从而加强可视化的视觉呈现效果。
