当我们打开一个页面时，色彩会引导着我们的注意力运动，设计者对色彩的运用和搭配，将决定可视化的展现效果。在学习数据可视化颜色内容前，首先应该掌握一些色彩和配色基础知识。
1. 色彩的特征
在设计中，色彩可以分为两大类，即有彩色和无彩色，无彩色大多指我们常说的黑、白、灰。有彩色则是除无彩色之外的颜色。下面主要介绍有彩色的三大特征，即色相、饱和度、明度：
1）色相
色彩的首要特征，也就是色彩可呈现出来的质地面貌，比如我们常说的：红色、蓝色、绿色……
2）饱和度
色彩的鲜艳程度，也就是色彩的纯度，饱和度取决于该色中含色成分和消色成分（灰色）的比例，比如天蓝色、淡蓝色、灰蓝色，这种就是同一色相不同饱和度的体现：
（饱和度由高→低的变化）
3）明度
是眼睛对光源和物体表面的明暗程度的感觉，简单理解就是色彩的明亮程度，比如白天和黑夜：
（明度由亮→暗的变化）
一般的拾色器分别如下对应：
色相、饱和度、明度三大特征相辅相成、共同作用，就形成了丰富的色彩，任何一种彩色都必然有以上三种特征。
2. 色彩的关系
在彩色范围内，不同色相之间存在着一些可遵循的视觉关系，根据这些视觉关系，我们也能得到一些常见的色彩搭配方式。
1）同类色
色相环间隔在 30° 以内的色相是同类色。同类色搭配的优点是：舒服、统一、视觉比较柔和、容易把控，不容易出错；缺点是：冲击性很弱，运用不得当会单调、缺少视觉层次感。
所以此类配色方式不易用于对抗、冲击力强的设计作品。
| 关系 | 案例 |
|---|---|
| |
2）邻近色
色相环相隔 90° 的颜色称之为邻近色，邻近色搭配的优点：阳光、活泼、稳定、有一定视觉冲击力、视觉层次感丰富。
| 关系 | 案例 |
|---|---|
| |
3）对比色
色相环间隔 120° 的颜色称之为对比色，对比色搭配的优点：视觉冲击力强烈、富有跳跃性、突出、点缀能力强，比如：常用作画面中的点缀色，或与主体固有色成对比关系的背景色，用于突出主体；缺点：大面积使用比较难把控。
| 关系 | 案例 |
|---|---|
| |
4）互补色
色相环间隔 180° 的颜色称之为互补色，互补色的颜色性质相差较大，将这两种颜色相互搭配，区别度会更加鲜明，也将视觉冲击力强度提升至峰值！这类配色优缺点和对比色很相似，只不过视觉冲击力更强也更难把控。
| 关系 | 案例 |
|---|---|
| |
3. 色彩的色调
通过改变明度与饱和度来调配色彩浓淡、强弱程度，叫做色调。简单理解就是决定色调的主要因素是明度和饱和度，而决定作品最终色调的因素是画面中视觉比例较大色彩的属性，色调一般可以划分成以下几类。
1）浅白色调
泛指偏低饱和度、高明度的色相搭配。浅白色调，色相固有的视觉属性表现力有所降低，带来的视觉感受很缓和，即便是以互补色的形式搭配，视觉冲击力也明显减弱。
这类色调的设计作品带给用户的视觉感受比较清纯、阳光、年轻、干净、舒服，此类色调的作品中搭配时要注意突出主题。
| 色调 | 案例 |
|---|---|
| |
2）亮色调
泛指偏高明度、高饱和度的色相搭配，相比而言色相固有视觉属性表现力较强，视觉冲击力也很强，这类色调的设计作品带给用户的视觉感受是：活泼、明亮、欲望。
| 色调 | 案例 |
|---|---|
| |
3）暗色调
泛指低明度的配色搭配，相对前两者而言，暗色调给人的视觉感受更稳重、有品质感，对于很多专题性、故事性、品牌调性强的作品能起到很好的加强、提升作用，当然暗色调有时候运用不好也会形成恐怖、阴森的视觉感受。
| 色调 | 案例 |
|---|---|
| |
不管是哪种色调方式，都不是仅限于某一色调范围内的颜色相互搭配，而是在确定主色调后结合其他属性的颜色相互结合使用。在此基础之上同样可以结合色彩关系（同类色、邻近色……）进行配色。
4. 色彩的感知
不同的色彩能带给用户不同的感知，换句话说色彩具有一定的心理暗示作用，比如带给人温度感知、红、橙暖色系让人觉得温暖；而蓝、绿冷色系会让人觉得凉爽，清冷。
色彩给人带来的感知是多方面的。
1）温度感知
色彩会让人联想到事物，进而感受它的温度。如红、橙暖色系会联想到火炉、阳光，进而觉得温暖；而蓝、绿冷色系则会联想到大海、森林，进而觉得凉爽。
色彩温度也不是绝对的，联想会因经验而不同，所以在进行设计时，温度感也要根据目标用户进行相应调整。
2）体积感知
暖色或明度高的颜色使物体看起来更大，被称为膨胀色；冷色或明度低的颜色使物体看起来更小，被称为收缩色，人们常说的穿黑色显瘦就是这个道理。
设计时可使用膨胀色使物体看起来更丰满，或使用收缩色使物体看起来更紧凑。
3）距离感知
暖色或纯度高的颜色会给人“凸起”或“前进”的感觉，称为前进色；冷色或明度低的颜色显得“凹陷”或“后退”，称为后退色。对重要信息使用前进色以吸引用户注意，对经常显示在屏幕的选项（如菜单项）使用后退色，既保证其在视野范围内，又不会太分散用户的注意力。
4）时间感知
红、橙色等环境中时间感觉比实际更长（过得慢），而蓝色等环境则麻痹了人的时间感，感觉比实际时间更短（过得快）。如快餐使用橙色或红色，促进顾客快速就餐进而早点离开。偏冷色系的咖啡馆可能让人多待一会。
5）重量感知
明度和纯度高的颜色给人感觉更轻，称为轻色；明度和纯度低的颜色给人感觉更重，称为重色。
设计中，对移动的物体（比如羽毛球）可以使用轻色使其看起来更加轻盈；反过来，对产品的下半部分使用重色可以使产品看起来更稳定。
6）硬度感知
暖色、明度高纯度低的颜色有柔软的感觉，称为柔软色；冷色、明度低纯度高的颜色有坚硬的感觉，称为坚硬色。在休闲区场所使用柔软色，可以营造一种温馨的气氛；路障可以使用坚硬色，增强制造“禁止通行”的效果。
7）情绪影响
色彩能影响使用者的情绪，暖色系相较于冷色系，对人的视觉刺激更大，冷色系则可以缓解压力和视觉疲劳。比如橙色代表能量、青春和热情，使人感到乐观且有活力；蓝色代表安宁、和谐和智慧，给人一种宁静和放松的感觉。
5. 色彩的语义
由于文化、经验、常识等因素，不同的色彩对用户会有一些特殊的含义，如绿色表示正常，红色表示停止。
所以我们在进行设计时，就要注意色彩的语义，不要出现反日常认识的设计，这样会增加用户的理解成本。
色彩的语义也不是绝对的，文化、经验不同，用户对颜色的理解可能存在差异，在视觉设计时，可以针对目标用户进行设计。
