可视化设计-色彩空间

1. 颜色在可视化中的应用与问题

颜色在可视化中是一个非常重要的视觉通道,颜色通常有三个主要用途

  • 描述量化的模式/规律
  • 类别标注
  • 高亮强调

在可视化设计时,颜色很容易被错误的使用从而引发错误的数据解读。

image.png
图1-1 美国1971-2000年各地区蒸发量与降水量的比值(估计)
颜色在表达数值时很容易被误用,如图1-1,虽然彩虹色的颜色序列在经过一定训练后大家还是相对比较容易的能够快速辨别出颜色在彩虹序列中的相对位置,但是却很难给出一个准确的区间差的估计。上图中,能够很明显的感觉到黄色区域和绿色区域的明显分界线,视觉的直观感受是在这条分界线上,数值发生了大的变化。但蓝色与绿色的分界线却感知的没有那么明显。但实际上,从图例上将,这两条分界线两侧颜色所代表的数值的差值是相同的。这就是一种典型的可视化的数据误读。除此之外,由于每个颜色的亮度不同,使得有的颜色会更吸引注意,而有的颜色则不会获得太多关注。

1.1 颜色误用的案例

image.png
图1-2 非洲地区地下水质量(右)
image.png
图1-3 红色代表高中毕业占比,黄色大学毕业占比,蓝色代表收入中位数。
作者把三张图CMYK三原色的地图合并在了一起。。。其实硬要说的话,经过一定的训练也是可以解读的。。。但是对于大多数人来说,解读成本太高。

接下来,本文针对颜色着重会介绍两点:

  • 颜色感知
  • 颜色声明(如何设计一种自然、易读、表达准确的颜色池)

2. 色彩感知(Color Perception)

要了解人是如何感知色彩的,首先需要了解人眼的结构

image.pngimage.png
(左)图2-1 人眼视网膜的结构(右)图2-2 rods和cones在视网膜不同区域的密度

在视网膜上有一块区域叫做fovea,其上的感光细胞(photoreceptor cell)的密度要远远大于其他区域。人的视网膜上分布着两种photoreceptor cell:Rod(视杆细胞)和cone(视锥细胞)。

Rods负责感知低亮度的情况,cones负责感知高亮度的情况。
image.png
图2-3 视网膜上感光细胞的分布
cones总共有三种,每一种负责感知不同波长的光,如图2-4所示。

  • 短波长(S)
  • 中等波长(M)
  • 长波长(L)

Trichromacy theory(Balaraman, 1962)对此做了详细的研究与描述。一个启发是,理论上在设计色彩空间时只需要三个参数就可以描述人眼能够观测到的所有颜色,有的色彩的三个参数直接选用了三种不同的波长,如rgb。有的色彩空间则将相对抽象的波长的概念转换为人类便于理解控制的参数,如hsv。

image.png
图2-4 三种对不同波长敏感的感光细胞

Opponent Process Theory提出,人眼在感知颜色的时候并不是直接感受到三种颜色,而是经由大脑处理后,将颜色处理为了三个通道(Hurvich et al. 1957),而关于颜色的感知是由两个通道(红绿,蓝黄)共同完成的,如图2-5所示:

  • Red - Green
  • Blue - Yellow
  • Black - White(luminance)

image.png
图2-5 Opponent Process Theory

色盲患者是由于某种cone的缺失,导致在某个色觉通道上的能力丧失或者减弱,根据opponent-process theory可知,色盲通常分为红绿色盲和蓝黄色盲,图2-6即缺失不同类型cones的患者在色彩感知上的情况。
image.png
图2-6 色盲患者的色彩感知

有趣的是,皮皮虾拥有16种cones,其中4种可以看到部分波长的紫外线。对于可见光的部分,皮皮虾感知到的色彩种类要更多一些,一些对于人类而言看起来是同样的颜色,皮皮虾能够看到更多的细分种类。羡慕。
image.png
图2-7 皮皮虾的色彩感知

3. 色彩声明/描述(Color Specification)

注:人为定义的一些色彩空间(如rgb)可能是人类能够感知全部色彩空间的子集。

3.1 RGB

RGB色彩空间是有三个三原色的色彩强度(color intensity)控制,通过控制不同原色的色彩强度来控制最终的颜色。
image.png
图3-1 RGB色彩空间
rgb相对来说比较难以使用,比如说,现在需要控制黄色的明暗程度,就需要保证红色和绿色同时按相同量增大或减小,或者要控制一个混色的亮度(如橙色),就更难一些。

人类在设计时更希望操作的是感知通道(perceptual channels)而不是物理通道(phycial channels)。

https://www.csfieldguide.org.nz/en/interactives/rgb-mixer/

3.2 HSV/HSL

hsv/hsl是一种更易用的,更自然的色彩空间的描述方式。起初,为了更好的描述艺术设计中虽色彩的描述,AR Smith设计了hsv色彩空间(Smith & Ray, 1978),同一时期,Joblove和Greenberg设计了hsl色彩空间(Joblove&Greenberg, 1978)。

  • hue:色相
  • saturation:饱和度
  • lightness/value:亮度/明度

3.2.1 取色案例

image.png
图3-2 hsl色彩空间上,控制饱和度与亮度不变,取不同色相的结果。

虽然hsv/hsl在使用的直观度上表现较好,便于设计师的使用,但在数据表达上,hsl/hsv并不是感知均匀(perceptually uniform)的
image.png
图3-3 hsl空间即便在控制亮度饱和度不变的情况下取不同的色相,实际取到的颜色亮度仍是不同的

即便控制v不变,将颜色装换到灰色尺度下,会发现色彩强度(color intensity)并不相同。这会导致人解读可视化时会对数值的变化量(对应色彩的变化量)做出误差较大的估计。

“彩虹色”在可视化色彩设计中是一个经典的错误,其所导致的数据误读与数据可视化的初衷相违背。图3-4,图3-5展示了彩虹色与其他渐变色在表达均匀变化的数据时的表现:
image.png
图3-4 灰色渐变与彩虹渐变在描述相同数值变化下的表现
image.png
图3-5 彩虹渐变与其他渐变色(单色,双色)在描述相同数值变化下的表现

3.3 CIE Lab / Luv

CIEL Lab是由国际照明委员会(CIE)于1976年定义的一种色彩空间。CIE Lab是根据人的色彩感知通道设计的,其使用了之前提到的两个人类的色彩感知通道:红绿通道和蓝黄通道。



image.png
图3-6 CIE Lab色彩空间是有三个参数构成的,其中色相是由a, b两个通道控制

人类的大脑一般是从这三个通道来感知颜色的。这个色彩空间并不是物理上的颜色空间的线性变换,这也是需要强调的一点,人类感知的色彩的度量并不是实际物理上的度量的线性变换(比如光的波长均匀增加,但人类感知的颜色的变化并不是均匀的)。

但CIE Lab对于使用者来说仍然有些抽象,人们希望可以像hsv/hsl那样便于理解控制的色彩空间,同时尽量保证色彩变换是均匀的,于是就有了CIE Lch。

3.3.1 取色案例

image.png 控制亮度不变, 使AB两个通道均匀变化
image.png 控制B(黄蓝通道)值不变,使A通道的值和亮度均匀变化
image.png 控制A(红绿)通道的值不变,使B通道的值和亮度均匀变化

3.4 CIE LCh / HCL

CIE Lch 是CIE Lab从笛卡尔坐标系到圆柱坐标系的转换。

这种转换使得相对难以理解控制的a,b两个通道被Chroma和Hue来表达:

C: 色度(chroma),色彩的相对饱和度(相对暗的颜色可以取到的最大饱和度要小一些)
h: CIE Lab中的两个通道向量和在极坐标系下的角度
L: CIELAB中的lightness

lch色彩空间中的色相与hsv中的色相的构建方式不同,hsl通过控制rgb色彩强度构建的彩虹色环在亮度上并不是均匀的。
image.png
图 3-7 RGB彩虹的色彩强度
image.png
图3-8 HCL彩虹的色彩强度

lch色彩空间的大致形态:
image.png
图3-9 Lch色彩空间

lch的横切面示意图:

image.png
图3-10 Lch色彩空间

借助hcl空间,可以更加容易的选出适合可视化表达的取色组合。

image.png 控制颜色饱和度不变,保证亮度与色相是感知均匀变化的
image.png 控制色相不变,保证饱和度和亮度是均匀变化的。
image.png 控制亮度不变,保证色相和饱和度是均匀变化的,(适合映射类别型变量, 可以保证任何一个颜色/类别不会显得相对突兀而更吸引人视觉的注意力)

对比一下在hsv于lch下选择连续性变量色板的区别,能够感觉到Lch的渐变更平稳均匀一些,而hsv则在绿色部分相对平稳,在绿色区间的两侧变化率更大一些:
image.png
图3-11 hsv与lch下渐变色差异

优化案例

下图所示的是美国国家海洋和大气管理局的一个关于暴雨预测的可视化(A),可以看出,原始配色的色彩强度并不是均匀的(B),这会导致认为解读时会对数值的变化产生误读,人为的解读出实际并不存在的数值突变。
image.png
图 3-12 NOAA降雨预测图

将原有的色板转换为hcl空间下进行优化,使其色彩强度变化均匀(C),以及可以人为去控制标注一些阶梯(E)。
image.png
图 3-13 NOAA提供的原始色板
image.png
图3-14 hcl下的优化后的色板
image.png
图3-15 对色板人为的创造一些阶梯来标注不同的区间

4. 总结

本文介绍的几种色彩空间的性质如下:

Intutive(直观) Perceptually Uniform(感知均匀)
RGB
HSV/HSL
CIE Lab/Luv
HCL

颜色在可视化设计中是一个非常重要有效的工具,但也同样非常容易被误用。了解各种色彩空间的设计和使用方式,可以帮助可视化设计能够更准确的控制和表达数据的规律和特征。

扩展阅读

Simmon Robert. “Subtleties of Color”, earthobservatory, 2013 , https://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/

Kosara Robert. “How The Rainbow Color Map Misleads”, eagereyes, 2013 , https://eagereyes.org/basics/rainbow-color-map

Rogowitz, Bernice E., Lloyd A. Treinish, and Steve Bryson. “How not to lie with visualization.” Computers in Physics 10.3 (1996): 268-273.

工具:

https://www.csfieldguide.org.nz/en/interactives/rgb-mixer/
http://hclwizard.org/hclcolorpicker/
https://vis4.net/labs/colorvis/embed.html?m=lab&gradients=6

参考文献

Balaraman, Shakuntala. “Color vision research and trichromatic theory: A historical review.” Psychological bulletin 59.5 (1962): 434.

Hurvich, Leo M., and Dorothea Jameson. “An opponent-process theory of color vision.” Psychological review 64.6p1 (1957): 384.

Smith, Alvy Ray. “Color gamut transform pairs.” ACM Siggraph Computer Graphics 12.3 (1978): 12-19.

Joblove, George H., and Donald Greenberg. “Color spaces for computer graphics.” ACM siggraph computer graphics. Vol. 12. No. 3. ACM, 1978.

Author: Lobay Kanna
Link: http://lobay.moe/2019/12/27/Notes/可视化设计-色彩空间/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.