如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

雖然如今好的配色方案已經唾手可得，但為數據可視化找到合適的配色方案，卻仍是一項巨大挑戰。

在Graphiq，事情甚至更加棘手，因為我們要通過上千種各不相同的數據集合來傳遞信息，它們有著各自迥異的視覺表現。

目前的問題

我們沒有立刻開始建立自己的配色表，而是發起了一些調查，研究網絡上已存在的配色方案。令人驚訝的是，我們發現其中只有少數是為復雜的圖表和數據可視化而設計的。我們發現一些不能使用現有配色的原因。

問題1：辨識度低

我們看過的許多配色方案都不適用于數據可視化。不僅由于顏色的明度差異不大，其實它們在創造時就沒有考慮過辨識度。Flat UI配色是最廣泛使用的配色之一，原因顯而易見：它非常優秀。但是，正如它名字所述，這是為界面而設計的。使用Flat UI配色的話，色盲者就難以辨認出數據圖像。

Flat UI配色的完整色彩、紅色盲模式、灰度模式。

問題2：色彩不夠多

另一個問題是，許多現有配色方案沒有足夠的顏色。創造Graphiq的數據可視化時，我們需要至少6種顏色的配色方案，甚至有時需要8到12種顏色，才能滿足所有的應用場景。我們看過的許多配色方案都沒有足夠多的色彩供選擇。

下面是Color Hunt里的一些例子：

雖然這些都是很棒的配色，但它們都不夠靈活，無法提供豐富的色系。

問題3：難以區分

不過等一下，還有一些配色方案看起來像是漸變——理論上說可以創造出任意數量的顏色，對吧？

不幸的是，它們明度差異通常不大，其中許多顏色很容易變得無法區分，就像這一組，同樣來自Color Hunt：

我們試著選第一組，把它擴展為10級色彩：

如果普通用戶能正確的區分出這些顏色，并與相應的數據項對應起來，我就服了，尤其是能區分出左邊的4種綠色。

我們的方式

在Graphiq，我們以數據為生命，并且投入了大量時間尋找能夠用于數據可視化的配色方案，不是一組，而是許多組。我們在這個過程中受益良多，并且打算分享這些能夠創造出靈活配色的準則：

第1條：色調與明度的跨度都要大

要確保配色非常容易辨識與區分，它們的明度差異一定要夠大。明度差異需要全局考慮。選擇一種單色系的配色，并且測試它在紅色盲、綠色盲與灰度模式下的表現。你就能迅速了解這個配色的辨識度水平。

Google Material配色中的淺藍色的完整色彩、紅色盲模式與灰度模式。

但是，有一組明度跨度大的配色還不夠。配色越多樣，用戶越容易將數據與圖像聯系起來。如果能善加利用色調的變化，就能使非色盲用戶更加輕松。

對于明度與色調，跨度越大，就能承載越多的數據。

第2條：仿照自然的配色

設計師都知道一個小秘密，對于理性派們而言這似乎不符合常識：并非所有顏色都是均等的。

從純數學的角度來看，淡紫到深黃的過渡，與淡黃到深紫的過渡，感覺大概相似。但我們在下面可以看到，前者感覺很自然，后者則不是。

這是由于我們已經習慣于那些長期存在于自然界中的漸變。在華麗的日落中，我們就能看到明黃色向深紫色的漸變，但卻沒有哪里能看到淡紫色向深黃色的過渡。

第3條：使用漸變，不要選擇一系列固定顏色

漸變配色結合不同色調，對兩者都最好。無論你需要2種顏色還是10種，漸變中都能提取出這些顏色，讓可視化圖表感覺自然，同時保有足夠的色調與明度差異。

改用漸變的思維并不容易，不過有個好方法，可以在Photoshop中拉輔助線到斷點位置，與數據的數量對應上，然后持續對漸變進行測試與調整。以下是我們在修正漸變時產生的屏幕截圖。

可以看到，我們將配色表緊挨著頂部的灰度漸變，調整漸變疊加（之后就能得到的漸變色值），然后從那些斷點處選取顏色，測試配色在實際運用中的效果。

我們的配色方案

 

我們對最終成果感到興奮。下面是我們使用的部分配色，它們都有從純白到純黑的漸變，以達到最大限度的明度差異。

冷色、暖色和霓虹色。

配色的實際運用

長話短說

盡管優秀的配色方案越來越多，但并非所有都適用于圖表和數據可視化。我們的配色方法就是創建色調與明度變化都足夠大的自然漸變。這么做能使我們的配色便于色盲辨識，對其他人則更明顯，并且可以滿足1到12種數據。

閱讀、工具和資源 [更新]

這個過程中，我們發現了一些很棒的資源和文章，與我們得出的結論類似，但他們采用了更的方法，甚至鉆研了色彩理論。我們覺得應該分享出來，供大家深度閱讀：

閱讀

1. 如何避免等差的HSV顏色，作者Gregor Aisch
2. 通過chroma.js控制多色調的色彩比例，作者Gregor Aisch
3. 微妙的顏色，作者Robert Simmon
4. 翠綠配色方案，作者Bob Rudis、Noam Ross和Simon Garnier
5. MATLAB色彩地圖，作者Steve Eddins

工具

1. 數據顏色采集工具——一件很趁手的工具，讓你保持濃度不變的同時輕松選擇配色
2. Chroma.js——一個處理色彩的JavaScript庫
3. Colorbrewer2——熱點圖與數據可視化顏色工具，自帶了多色調與單色調的方案

其他資源

我們還找到一些其他愛不釋手的配色資源。雖然它們并非專為數據可視化而設計，不過我們覺得或許對你有幫助。

1. ColorHunt——高質量配色方案，能夠快速預覽，如果你只需要4種顏色，這是絕佳的資源
2. COLOURlovers——很棒的顏色社區，其中有許多工具可以創建配色方案，還有設計模式
3. ColorSchemer Studio——強大的桌面取色應用
4. Coolors——輕量級隨機配色生成器，你可以鎖定你想要的顏色，然后替換其他的
5. Flat UI Colors——很棒的UI配色，這是最流行的配色之一
6. Material Design Colors——另一套優秀的UI配色。它不僅提供了跨度巨大的顏色，也為每種顏色提供了不同的“色深”，或者說明度
7. Palettab——一個Chrome插件，在每個標簽頁里呈現一套新的配色方案和字體靈感
8. Swiss Style Color Picker——另一個優秀的配色方案集

希望本文對你有所幫助！你建立配色方案的過程是怎樣的？你還用到其他的工具嗎？我們想聽聽你在配色與可視化圖表方面的經驗。

想了解更多我們的工作流程，請訂閱我們的刊物：Graphiq Engineering。

原文鏈接：medium
作者：Samantha Zhang
譯文地址：可樂橙

藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計

來源：莫貝網