數據可視化配色指南：三大配色方法，做出諮詢報告一樣的圖表丨附在線工具資源

• 2019 年 10 月 31 日
• 筆記

做數據圖表的時候，只會用Excel里的系統默認顏色？

別別別，大家都用默認配色，千篇一律，毫無特點。

可是學習色彩設計，又是十分費工夫的一件事，不僅要搞明白RGB、CMYK等各種顏色體系，搞懂各種配色方法，重點是還要看大量的案例，培養良好的審美觀，防止自己做出來的東西辣眼睛……

不如我們來「一文學會」系列吧，這篇Michael Yi發在Medium上的文章，就簡單清晰的介紹了三種數據可視化中的配色方法，讓你的圖表看起來清晰、翔實、用戶體驗友好，就像諮詢公司的報告一樣專業。

另外，還有不少實用技巧和工具~

三種配色方法

根據數據的不同類型，有三種不同的調色方法。

定性調色板

定性調色板主要用在分類展示的數據圖中，比如不同國家、不同企業、不同個體分類展示，每個類目沒有固定的順序。

當然，你必須得給每個類目一種專屬的顏色，不然重複了或者顏色太接近就分不清了。

實在不行可以給同一種顏色調整明度和飽和度，比如紅色有暗紅色、大紅色、粉紅色，不過，最好是同一種色系之間有某種聯繫，比如淺色是以日為單位，深色是以周圍單位。

或者，用最簡單粗暴的方式，把數目太小的那些類目打包起來，命名為「其它」。

順序調色板

如果你的類目是按照一定順序排列的，或者就是數字，那麼可用順序調色板，用顏色的深淺表示數據。

比如可以用比較淺的顏色表示比較小的數字，用比較深的顏色表示比較大的數字。

分散調色板

分散調色板更像是兩個順序調色板拼起來一樣，只不過區別是顏色較暗淡的放在中間部分，兩邊各選擇明亮的顏色。

這樣做的意義在於，中間暗淡的部分可以用作中心值或者參考值，比如用藍色表示正數，用橙色表示負數，中間的灰色則是0；或者用藍色表示正面，用橙色表示負面，用灰色表示中立。

重點避坑指南

掌握了方法，還要注意規避一些問題。

不要亂用顏色

如果你需要在許多個類目中強調個別幾個，那就在顏色上加以區分。

比如在這張圖裡，如果你只想強調Cobras和Bulls兩個類目，那就不要把所有類目都加上顏色，可以選擇把其他設計成灰色，給這兩個類目加上顏色。

系列配色保持一致

如果你的整份文件里包含很多圖表，那麼在不同的圖表中，同一個類目最好用同一種顏色。

這樣當你的讀者從頭到尾往下看的時候，不會因為顏色所指代的目標變了而感到懵逼。

顏色，是有意義的

另外，在不同情況下，顏色是有不同意義的，比如我們做一個阿里和騰訊對比的圖，那麼用橙色指代阿里，藍色指代騰訊就非常合適了，因為他們本身的logo就是這兩個顏色。再比如，公司內部的文件，可以用自己公司的品牌色來作圖。

而在不同國家不同文化中，同一個顏色的意義也是不同的，比如大紅色，在我國往往給人一種過年的感覺，但在一些西方國家則可能意味着熱情，也可能意味着危險。所以，配色的時候考慮一下你的受眾。

另外非常重要的一點是：

不要用熒光色！ 不要用熒光色！ 不要用熒光色！

這些高亮度高飽和度的顏色，只會讓你的讀者感到亮瞎了。

甚至，在必要的時候用灰色展示非重點數據，也可以將重點數據展示的更清晰。

對色盲友好一點

另外，你總會遇到色盲人群，其中紅綠色盲最多，所以，在設置顏色的時候，除了調整色相之外，可以稍微調整一下明度和飽和度，這樣他們也可以分得清不同顏色代指的類目。

或者，你可以乾脆用色盲模擬器，來看看你的配色能否被色盲人群分辨出來：

https://www.color-blindness.com/coblis-color-blindness-simulator/

配色工具

最後，這裡有一些在線配色工具可供選用。

ColorBrewer

這個工具的配色非常經典，幾乎就是office里的默認配色。

http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3

Data Color Picker

用於生成兩種顏色的漸變，可以自由選擇需要多少種顏色過渡。

https://learnui.design/tools/data-color-picker.html

Chroma.js Color Palette Helper

可以製作順序調色板或者發散調色板，根據不同需要調整調色板的漸變過程。

https://vis4.net/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1

Color Thief

我們知道許多自然情景中的顏色都是讓人感到舒服的配色，這款工具就可以幫你把照片中的顏色提取出來。

https://lokeshdhakar.com/projects/color-thief/

Viz Palette

對色盲非常友好的調色工具。

https://projects.susielu.com/viz-palette

傳送門

How to Choose Colors for Your Data Visualizations 作者：Michael Yi https://medium.com/nightingale/how-to-choose-the-colors-for-your-data-visualizations-50b2557fa335