3.4 可视化色彩的运用原理

3.4.1 RGB颜色模式

我们先从颜色模式开始讲解图表的色彩运用原理。在图像处理中，最常用的颜色空间是RGB模式，常用于颜色显示和图像处理。RGB颜色模式使用了红（red）、绿（green）和蓝（blue）来定义所给颜色中红色、绿色和蓝色的光的量。在24位图像中，每一种颜色成分都由0到255之间的数值表示。在位速率更高的图像中，如48位图像，值的范围更大。这些颜色成分的组合就定义了一种单一的颜色。RGB颜色模式采用三维坐标的模型形式，非常容易被理解，如图3-4-1（a）所示，原点到白色顶点的中轴线是灰度线，R、G、B三分量相等，强度可以由三分量的向量表示。我们可以用RGB来理解色彩、深浅、明暗变化。

（1）色彩变化：三个坐标轴RGB最大分量顶点与黄（yellow）、紫（magenta）、青（cyan）色顶点的连线。

（2）深浅变化：RGB顶点和黄、紫、青顶点到原点和白色顶点的中轴线的距离。

（3）明暗变化：中轴线的点的位置，到原点，就偏暗，到白色顶点就偏亮。

RGB模式也被称为加色法混色模式。它是以RGB三色光互相叠加来实现混色的方法，因而适合于显示器等发光体的显示。其混色规律是：以等量的红、绿、蓝基色光混合。我们平时在绘图软件中调整颜色主要就是通过修改RGB颜色的三个数值来实现，如图3-4-3（b）所示的Windows系统自带的选色器的右下角。

3.4.2 HSL颜色模式

大家平时在颜色选择中还会遇到一种颜色模式：HSL（色相、饱和度、亮度），如图3-4-1（b）所示，在这里也给大家做简要的介绍。HSL色彩模式是基于人眼的一种颜色模式，是普及型设计软件中常见的色彩模式，具体如下。

（1）色相H（hue）：代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色，如图3-4-2（a）所示。色相值的意义在于，当不改变光感时，可以通过旋转色相环来改变颜色。在实际应用中，可用作基本参照的色相环的六大主色为：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。

（2）饱和度S（saturation）：是指色彩的饱和度，它用0至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性（灰度）到感性（纯色）的变化，如图3-4-2（b）所示。

（3）亮度L（lightness）：是色彩的明度，作用是控制色彩的明暗变化。通常是从0（黑）～100%（白）的百分比来度量的，数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色，如图3-4-2（c）所示。

与HSL颜色模式类似的还有：HSB［色相（hue）、饱和度（saturation）、亮度（brightness）］，有时也被称作HSV［色相（hue）、饱和度（saturation）、色调（value）］，如图3-4-1（c）所示。比起RGB系统，HSL使用了更贴近人类感官直觉的方式来描述色彩，可以指导设计者更好地搭配色彩，在色彩搭配中经常被用到，如图3-4-3所示。

我们使用颜色时参考的色轮（色相轮）就是来源于HSB、HSL颜色模式或LUV颜色模式。配色网就是基于HSL颜色空间模型自动生成高级配色方案的在线网站，如图3-4-4所示。HSL色彩空间可以更加直观地表达颜色。HSL是色相、饱和度和亮度这三个颜色属性的简称。色相是色彩的基本属性，就是人们平常所说的颜色名称，如紫色、青色、品红等。我们可以在一个圆环上表示出所有的色相。它不仅基于常用的场景给出合适的配色方案，而且还允许用户使用配色工具自行配置出极具个人风格又不失美观的方案，功能完备且实用。色彩搭配基本理论方法除了图3-4-5所说的三种外，还有类似色（analogous）搭配、分裂互补色（split complement）搭配、矩形（rectangle）搭配和正方形（square）搭配等（见链接7）。

色环又称作色轮，是一种按照色相将色彩排列的呈现方式。当我们开始进行色环排列时，需要把原色按照等距关系排列，如图3-4-5所示为12色5轮色轮。

（1）单色（monochromatic）搭配：色相由暗、中、明3种色调组成的单色。单色搭配并没有形成颜色的层次，但形成了明暗的层次。这种搭配在设计中应用时，效果永远不错，其重要性也可见一斑。

（2）互补色（complement）搭配：如果颜色方案只包括两种颜色，就会选择色环上对立的两种颜色（在色轮上直线相对的两种颜色称为互补色，比如红色和绿色），如图3-4-5（b）所示。互补色搭配在正式的设计中比较少见，主要是因为色彩之间强烈对比所产生的特殊性和不稳定，但是很显然的是，在各种色相搭配中，互补色搭配无疑是一种最突出的搭配，所以如果你想让你的作品特别引人注目，那互补色搭配或许是一种最佳选择。

（3）三角形（triad）搭配：如果颜色方案只包括3种颜色，那么就会以120°的间隔选择3种颜色，如图3-4-5（c）所示。三角形搭配是一种能使画面生动的搭配方式，即使使用了低饱和度的色彩也是如此。在使用三角形搭配时一定要选出一种颜色作为主色，另外两种颜色作为辅助色。

3.4.3 LUV颜色模式

LUV色彩空间全称为CIE 1976（L*，u*，v*）（也称作CIELUV）色彩空间，L*表示物体亮度，u*和v*是色度，如图3-4-6（a）所示。1976年由国际照明委员会（International Commission on Illumination）提出，由CIE XYZ颜色空间经简单变换得到，具有视觉统一性。对于一般的图像，u*和v*的取值范围为-100到+100，亮度为0到100。类似的色彩空间有CIELAB，如图3-4-6（b）所示。

R语言ggplot2包绘图默认的颜色主题方案如图3-4-7所示，色轮为HSLuv颜色模式。HSLuv是相对于HSL颜色空间模式更加人性化的选择。当把CIELUV颜色空间转换到极坐标系时，就类似于HSL颜色空间模式。它拓展了CIELUV颜色模式，从而新的饱和度（saturation）分量可以允许用户间隔选择色度（chroma）（见链接10）。

但是，HSLuv颜色模式又不同于CIELUV LCh颜色模式。CIELUV LCh颜色模式有一部分颜色不能显示，比如饱和度高的深黄色（见链接11）。图3-4-7离散的颜色主题（Hex颜色码）也可以通过seaborn.husl_palette（n_colors=6，h=0.01，s=0.9，l=0.65）函数获取，其中n_colors表示输出的颜色总数，h表示起始的颜色色相（hue），s表示颜色的饱和度（saturation），l表示颜色的亮度（lightness），代码如下：

这种类型的颜色主题是由一个圆环形的颜色提取出来的，所以在matplotlib里这种颜色主题属于环状循环型颜色主题（cyclic colormaps）。Seaborn里有还有1个环状循环型颜色主题函数：seaborn.hls_palette（n_colors=6，h=0.01，l=0.6，s=0.65），这个函数基于HSL［色相（hue）、饱和度（saturation）、L（lightness）］颜色模型。另外，matplotlib还有3种环状循环型颜色主题：'twilight'，'twilight_shifted'，'hsv'。

3.4.4 颜色主题的搭配原理

我们对相同的数据图表对比不同的颜色效果，如图3-4-8所示的带散点分布的箱形图。图3-4-8（a）～图3-4-8（c）的颜色主题方案分别对应的软件为Excel、Origin和R ggplot2，图3-4-8（c）使用的就是图3-4-7所示的4种颜色的颜色主题方案。所谓“人靠衣装，佛靠金装”，符合美学规律设计的颜色主题方案往往能在很大程度上提高图表的美观程度，如图3-4-8（c）所示。所以，我们很有必要研究与讲解颜色主题方案的搭配。

Seaborn和plotnine的颜色主题方案基本都是基于matplotlib的颜色主题方案。matplotlib除了环状循环型颜色主题外，还有三种常见的颜色主题：单色系、多色系和双色渐变系（见链接13），如图3-4-9所示（见链接12）。或许你不知道，其实R ColorBrewer包的颜色主题方案系列来源于一个颜色主题方案搭配网站：ColorBrewer 2.0（见链接14），如图3-4-10所示。该网站提供了大量的颜色搭配主题方案，可以供用户学习与使用。强烈建议大家登录这个网站，自己操作与观看这里面的配色方案，由于版面有限不能全面地介绍ColorBrewer 2.0配色的各个系列与功能。从另一个角度说，可以将图3-4-10看成ColorBrewer 2.0网页颜色主题系列方案的精华版。

ColorBrewer 2.0的配色功能如此强大，它的颜色搭配原理又是什么呢？如图3-4-11所示，通过排列组合实现二值色系、单色系、双色渐变系和多色系等颜色主题方案。其中，最为常用的3种颜色搭配方法如图3-4-12所示。圆形分布的多色系（circular color system）是一类特殊的多色系配色方案，如Python Seabron的HLS颜色主题方案。这类颜色主题方案适合时间类的周期性数据，如小时、天、月、年等有关的时序数据。

3.4.5 颜色主题方案的拾取使用

1.使用plotnine获取颜色主题方案

结合以上颜色主题方案的获取方法：我们可以使用matplotlib和plotnine的颜色包获取颜色主题方案，或者使用颜色拾取软件获得颜色值。根据数据映射变量的类型，可以将颜色度量调整scale_color/fill_*（）函数的应用主要分成离散型和连续型，具体如图3-4-13和图3-4-14所示。

图3-4-13的数据集是df，df是总共有4列的数据集：tau、SOD、age和Class（Control、Impaired和Uncertain），其数据映射代码如下所示。

将离散型的类别型变量Class映射的数据点到填充颜色（fill），具体的图3-4-13离散型颜色主题方案的代码如表3-4-1所示。

图3-4-14的数据集df，其数据映射代码如下所示。

将连续型的数值型变量age映射到数据点的填充颜色（fill），具体的图3-4-14离散型颜色主题方案的代码如表3-4-2所示。

2.使用Seaborn获取颜色主题方案

Seaborn的颜色主题也是基于matplotlib的颜色主题（见链接17），使用Seaborn绘制图表时，如果需要修改图表的颜色主题，则可以通过如下语句完成：

如果想获得颜色主题的Hex颜色码，则可以使用sns.color_palette（）函数或者sns.husl_palette（）函数，n_colors为想获取的颜色数目：

＃当n_colors=3，pal_Set1=['＃e41a1c'，'＃377eb8'，'＃4daf4a']时，具体颜色为：

＃当n_colors=3，pal_Set1=['＃fe6e63'，'＃0ab450'，'＃639bfe']时，具体颜色为：

或者使用matplotlib的函数也可以获得不同颜色主题的Hex颜色编码：

＃当n_colors=3，pal_Set1=['＃e41a1c'，'＃377eb8'，'＃4daf4a']时，具体颜色为：

3.颜色的拾取

有时我们需要获取颜色主题方案中每个颜色的RGB数值或者Hex颜色码，比如在Excel、AI等其他软件中使用这些颜色主题方案，可以通过图3-4-15所示的几种方式获得相关颜色数值。

手动调整数据系列的RGB颜色值有时会很麻烦，其实还有一种利用取色器的便捷方法，如PowerPoint和Illustrator软件都有取色器，但是Excel、GraphPad Prism、Origin等绘图软件没有取色器。对于Excel的图表，可以复制到PowerPoint中，使用PowerPoint的取色器修改图表的颜色。对于GraphPad Prism、Origin等绘图软件的图表，可以导出SVG、EPS等矢量格式的图片，然后使用Illustrator软件打开：①选择图片，选择“对象（O）”→“剪切蒙版（M）”→“释放（R）”；②再选择图片“对象（O）”→“复合路径（O）”→“释放（R）”；③选择要修改的图表元素，然后使用取色器调整“填充”和“描边（边框）”颜色；④导出相应的标量格式的图片，同时设置好图片的分辨率。

Hex十六进制颜色码

在软件中设定颜色值的代码通常使用十六进制颜色码（Hex color code）（见链接18）。颜色一般可以使用RGB三个数值表示。十六进制颜色代码指定颜色的组成方式：前两位表示红色（red），中间两位表示绿色（green），最后两位表示蓝色（blue）。把三个数值依次并列起来，以＃开头，就是我们平时使用的十六进制颜色码。如纯红：＃FF0000，其中FF即十进制的R（红）=255，00和00即G（绿）=0和B（蓝）=0；同样的原理，纯绿：＃00FF00，即R=0，G=255，B=0。

3.4.6 颜色主题的应用案例

关于颜色的基础知识讲解了这么多，下面带大家一起来应用各个颜色主题方案，以提升图表的美观性。对于多色系颜色主题方案的应用，大家很容易使用：直接选择一个颜色主题方案，然后修改数据系列的颜色即可。但是对于单色系和双色渐变系的颜色主题方案的应用，大家可能不是那么容易适应。所以，现在重点讲解单色系和双色渐变系的颜色主题方案的应用。

图3-4-16展示了不同颜色主题的饼图。不要使用多种阴影或者多种色相的饼图（见图3-4-16（a）），因为这样会分散读者直接比较各部分的注意力。可以使用相同的颜色代表同一变量（见图3-4-16（c）），或者使用单色渐变颜色主题（见图3-4-16（b）），这样读者可以更好地集中注意力去比较数据。如果需要特别强调某个部分的数据，则并不建议使用将其从整个圆形饼图中分离出来的方法，而推荐使用较深的色彩或者不同的颜色强调焦点，如图3-4-16（d）所示。

图3-4-17（a）是多色系颜色主题方案的带误差线柱形图，图3-4-17（b）是使用单色系颜色主题方案（蓝色系列：）改进的Science期刊上的图表。不要使用多种阴影或者多种色素的柱形图和饼图，因为这样会分散读者直接比较各部分的注意力。可以使用相同的颜色代表同一变量，或者使用单色渐变系颜色主题，但是可以使用较深的色彩或者不同的颜色强调焦点。

图3-4-18（a）是多色系颜色主题方案的曲线散点图，图3-4-18（b）是使用单色系颜色主题方案（橙色系列：）改进的曲线散点图，单色系颜色主题方案是根据数据系列的数值类别设定的，亮度随数值从低到高。图3-4-18（c）是使用单色系颜色主题方案再改进的曲线图，省去散点数据标记，只留下曲线以展示数据系列的规律。

图3-4-19（a）使用红色和蓝色两种不同颜色表示相关系数的数值，蓝色表示负值，圆圈越大表示负相关越大，红色表示正值，圆圈越大表示正相关越大。用双色渐变系颜色主题方案（）改进图表，如图3-4-19（b）所示：借助圆圈填充颜色的深浅和圆圈的大小两个视觉暗示，更加清晰地表达了数据，更便于读者观察数据之间的关系。中间白色对应的数值就是相关系数的分界点0。

图3-4-20为时间序列的柱形图，图3-4-20（a）使用蓝色填充柱形数据系列，仅仅使用长度视觉暗示表达数据。用双色渐变系颜色主题方案（）改进图表，如图3-4-20（b）所示：中间白色对应的数值就是分界点的温度值0，当温度越高时，红色更深；当温度越低时，蓝色更深。借助柱形颜色的深浅和长度两个视觉暗示，更加清晰地表达了数据，更便于读者观察时序数据的变化规律。

我们平时绘制图表除了要注意颜色主题，还要注意颜色的透明度（transparency）。颜色的透明度也是一个重要的设置参数，尤其在处理数据系列之间的遮挡问题时特别有效，如图3-4-21所示。绘图软件中基本都有颜色透明度的设置参数。颜色透明度的设置还适合用于高密度散点图的绘制，通过颜色深浅可以观察数据的分布情况。