07《跟月影学可视化》学习笔记@Web 图形系统的颜色表示法

系统学习下 Web 图形系统中表示颜色的基本方法。

一、RGB 和 RGBA 颜色表示法

1. 定义

1. RGB 颜色

   RGB 颜色的十六进制表示法形如：#RRGGBB，其中 RR、GG、BB 分表时两位十六进制数字，表示红（red）、绿（green）、蓝（blue）三色通道的色阶。

   色阶 表示某个通道的强弱。取值 [0, 255] 。

   RGB 颜色是将人眼可见的颜色表示为红、绿、蓝三原色不同色阶的混合。并不能表示人眼可见的全部颜色。但是一般的 显示器、彩色打印机、扫描仪 都支持它。

   在浏览器中，CSS 一般有两种表示 RGB 颜色值的方式：

   • #RRGGBB 十六进制表示法
   • rgb(red, green, blue) 十进制表示法

2. RGBA

   RGBA 其实就是在 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 色盘颜色映射函数。

五、业务场景

在可视化应用里，一般有两种使用颜色的方式：

1. 整个项目的 UI 配色全部由 UI 设计师设计好，开发者使用任何格式的颜色都行。
2. 设计师定下视觉基调和一些主色，开发者根据主色和数据来动态生成颜色值。

在一般的图表呈现项目中，方式一使用较多。但是在一些数据比较复杂的项目中，方式二比较常用。如：希望连续变化的数据能够呈现连续的颜色变换时，把 HLS、CIELab、Cubehelix 色盘结合数据变量来动态生成颜色值。

六、小结

Web 图形系统表示颜色的方法可以分为 2 大类：

1. RGB、HLS 和 HLV、CIELab 和 CIELch 等颜色空间表示法；
2. Cubehelix 色盘表示法。

Web 图形系统表示颜色的方法	定义	优点	缺点
RGB	用三原色的色阶来表示颜色	最基础的颜色表示法	对用户不够友好
HLS 和 HLV	用色相、饱和度、亮度或明度来表示颜色	对开发者比较友好	数值变换与人眼感知不完全相符
CIELab 和 CIELch	颜色空间表示法	与人眼感知相符的色彩空间表示法	还没有被浏览器支持，但是有一些 JavaScript 库（如：d3-color ）可以直接处理 Lab 颜色空间
Cubehelix	色盘表示法	适合呈现颜色随数据动态改变的效果	-

在可视化中，使用图形的 大小、高低、宽窄、颜色 和 形状 这些常见信息来反映数据。同时也会使用二维强化的技巧来叠加两个维度的信息，从而加强可视化的视觉呈现效果。