[譯文] 如何設計圖表色彩

譯者 Z Yuhan：對色彩的研究通常要麼太過隨意缺乏邏輯，要不太過理論化難以理解，這篇文章用非常淺顯易懂的方式，講述了一個專門研究數據可視化的團隊探尋圖標色彩搭配的歷程，給出有力的論證，並得出很棒的結論，非常值得一讀。

——

雖然現在要獲取的色彩搭配並不難，但是尋找圖表（可視化數據）的配色依舊有難度。

在 Graphiq （用可視化的形式提供全球各種數據的一家公司，也是作者工作的地方），設計圖表色彩就更難了，因為我們的圖表需要用各種各樣的形式傳達上千種數據。

現在的問題

我們一開始並沒有直接著手設計，而是調查了現在網上已有的色彩搭配。驚喜的是，我們發現其中有一些確實是為複雜的圖表和可視化數據而設計的。當時我們發現了幾個問題，讓我們不能直接使用這些已有的配色。

問題一：對色盲色弱不夠友好*

很多這些配色並不夠可視化，不但在明度上差別不大，而且設計它們的人並沒有考慮到清晰的問題。 Flat UI Colors 被使用最多的色板之一，你可以輕易發現：這些配色看起來很棒，但是色如其名，它們是為 UI 而設計的。對色盲和色弱用戶而言，要在圖表上分辨這些顏色恐怕有困難。

Flat UI Colors 的一個色板：

該色板在紅色盲眼中的樣子：

該色板在色盲眼中的樣子：

問題二：不夠清晰

另一個問題是這些配色裡面並沒有足夠的顏色。在設計 Graphiq 的視覺樣式時，我們需要一個提供至少6種顏色的配色方案，多一點的話甚至是8到12種，這樣才能覆蓋所有使用場景。

這裡有一些 Color Hunt 的例子：

雖然這些配色很好，但是卻不能夠用來展示複雜的數據。

問題三：難以分辨

等等，也有一些搭配是漸變色，理論上這種搭配可以衍生出很多種顏色不是嗎？

遺憾的是這些漸變色的明度變化通常不夠，例如下面這些也是從 Color Hunt 來的：

讓我們用其中第一個測試一下，看如果用它來展示有10個維度的數據會怎樣：

這樣看來一般用戶幾乎不可能在圖表中分辨這些顏色，尤其是最左邊哪四個綠色實在太像了。

我們的方法

在 Graphiq ，我們以各種方式理解並感受數據，並且我們投入了大量時間尋找了很多適合我們圖表的配色方案。在這個過程中我們學到了很多，並且我們願意向大家分享我們發現的以下三條原則：

原則一：在色相和明度上都要有足夠大的範圍

為了保證配色容易辨識，且對色弱和色盲來說足夠友好，顏色之間在明度上要有足夠的差異。因為對明度的辨識最容易的，不論是紅色盲、綠色盲還是完全色盲來說。

谷歌 Material Colors 中的 Light Blue：

紅色盲看到的樣子：

色盲看到的樣子：

然而，如果配色中只有明度差異恐怕不夠。顏色間中變化的維度越大，用戶就越容易在圖表上進行數據比對。如果能夠利用色相的差異，對視力正常的人來說肯定更好。

如上圖，明度和色相上跨越範圍越大，配色就能支持越多維度的圖表。

原則二：借鑒自然色彩

設計師們都知道一個秘密，可能對邏輯性較強的人*來說不太容易理解：顏色之間並不是平等的。

從純粹的數學角度來看，一個從亮黃到暗紫的漸變與一個從亮紫到暗黃的漸變相比，給人的感受應該是相似的。但是當我們實際看到下圖時，會覺得前者比後者要自然很多。

這是因為我們已經習慣了自然界中的漸變。我們在日落餘暉中可以看到從亮黃到暗紫的漸變，但是地球上卻無處可見從亮紫到暗黃的漸變。

以下圖片來自 Kyle Pearce ：

同樣，從亮綠到藍紫色，從亮黃到暗綠色、從橙棕色到冷灰色……都是如此：

來自 Kbh3rd ：

來自 Ian Britton ：

來自 Jon Sullivan ：

因為我們長期以來都能看到這些自然漸變，我們在配色中看到它們時也感到熟悉而愉悅。

原則三：使用漸變而不是零散的顏色

漸變配色是最好的，不論你需要的是2種還是10種顏色，都可以從漸變中獲取到。這樣一來不但能夠保證色彩的感覺自然，而且還有足夠的色相和明度差異。

從色板模式轉為漸變模式並不容易，你可以嘗試著在 Photoshop 中給漸變畫幾條分隔線，然後對分割點進行測試並微調。這裡有一個截圖可以向大家展示我們是如何修正我們的漸變的：

你可以看到，我們把漸變色板放到最頂上，與灰度漸變相鄰，並從分割線上取色來測試這些真實的使用情況。

我們的色板

我們對成果非常滿意。下面展示了一些我們正在使用的色板，他們都以純白為起始，以純黑為終點，這樣才能最大限度地利用明度的差異。

冷色：

暖色：

霓虹色：

使用我們的色板

總結

現在配色越來越多，但是他們並不都時候圖標和可視化數據。我們研究的方法是讓色彩漸變在色相和明度上範圍竟可能廣。這樣一來我們的色彩就適合色盲和色弱了，對實力正常的人來說更是如此，並且可以運用於維度數量從1到12的圖標。

相關文章、工具和資源

研究過程中，我們發現了一些很棒的資源和文章。它們得出了與我們相似的結論，但是使用的方法更加數據化，並且甚至延伸至了色彩理論。我們認為應該分享給大家作為擴展閱讀。

文章

1. How To Avoid Equidistant HSV Colors

2. Mastering Multi-hued Color Scales with Chroma.js

3. Subtleties of Color (Part 1 of 6)

4. The viridis color palettes by Bob Rudis, Noam Ross and Simon Garnier

5. A New Colormap for MATLAB – Part 1 – Introduction

1. Colorpicker for data ：可以在 Chrome 上獲取漸變色，並立即在圖表上查看效果的工具

2. chroma.js：處理顏色的JavaScript庫

3. Colorbrewer2：用來為圖表選擇顏色的工具，既支持多種色相也支持單色相

4. gradStop.js：生成單色方案和等距漸變點的 JavaScript 庫

5. Color Oracle：免費的色盲測試工具， Windows 、 Mac 和 Linux 都能使用。

其它資源

這裡還有一些好的配色資源，儘管它們並不一定適合可視化數據，但是你也許會覺得有用。

Color Hunt ：高質量的色板，方便快速查看，如果你只需要4種顏色的話會很有用。

COLOURlovers ：很棒的色彩交流社區，還有各種工具可以用來做配色設計。

ColorSchemer Studio ：功能強大的PC取色工具

Coolors ：一個輕量的色板生成工具

Flat UI Colors ：最流行的的界面色板之一

Material Design Colors ：也是一個色板，不但提供廣泛的顏色，還提供每個顏色的「重量」和亮度。

Palettab ：提供顏色和字體方案的 Chrome 擴展工具

Swiss Style Color Picker ：也是一個很好的色板

——

未經允許請勿轉載

原文：Finding the Right Color Palettes for Data Visualizations by Samantha Zhang

——

標註：

對色盲色弱來不夠友好*：原文中問題一的標題是「Low Accessibility」，通常用形容來產品對殘障人士的友好度不夠，這一點在歐美國家經常作為需要重視的產品硬指標（也是由於他們的色盲色弱發病率比亞洲高很多）。因為在中文裡沒有簡短精準的說法，所以我在寫的是「對色盲色弱不夠友好」。

邏輯性較強的人*：原文的寫法是「left-brained folks」，直譯是左腦型的人。通常左腦型的人被認為邏輯嚴謹，右腦型的人被認為有藝術天賦。因為這種說法在中文裡不是很通用，所以我寫的是「邏輯性較強的人」。