雖然如今好的配色方案已經(jīng)唾手可得涂身，但想為數(shù)據(jù)可視化找到合適的配色方案秃踩，難度仍然不小。因信息圖的獨特屬性，在保證色彩具有清晰辨識度的同時聪蘸，還必須滿足豐富而不凌亂的配色要求拒啰。不過即使你對色彩不敏感歧匈，用了今天這篇干貨提到的3個技巧檀训，也能輕松制作出好看的信息圖。
在信息圖方面埂软，事情甚至更加棘手锈遥，因為我們要通過上千種各不相同的數(shù)據(jù)集合來傳遞信息，它們有著各自迥異的視覺表現(xiàn)勘畔。
目前的問題
我們沒有立刻開始建立自己的配色表所灸，而是發(fā)起了一些調(diào)查，研究網(wǎng)絡上已存在的配色方案炫七。令人驚訝的是爬立，我們發(fā)現(xiàn)其中只有少數(shù)是為復雜的圖表和數(shù)據(jù)可視化而設計的。我們發(fā)現(xiàn)一些不能使用現(xiàn)有配色的原因万哪。
問題1：辨識度低
我們看過的許多配色方案都不適用于數(shù)據(jù)可視化侠驯。不僅由于顏色的明度差異不大抡秆，其實它們在創(chuàng)造時就沒有考慮過辨識度。Flat UI配色是最廣泛使用的配色之一吟策，原因顯而易見：它非常優(yōu)秀儒士。但是，正如它名字所述檩坚，這是為界面而設計的着撩。使用Flat UI配色的話，色盲者就難以辨認出數(shù)據(jù)圖像效床。
Flat UI配色的完整色彩睹酌、紅色盲模式权谁、灰度模式剩檀。
問題2：色彩不夠多
另一個問題是，許多現(xiàn)有配色方案沒有足夠的顏色旺芽。創(chuàng)造數(shù)據(jù)可視化信息圖時沪猴，我們需要至少6種顏色的配色方案，甚至有時需要8到12種顏色采章，才能滿足所有的應用場景运嗜。我們看過的許多配色方案都沒有足夠多的色彩供選擇。
下面是Color Hunt里的一些例子：
雖然這些都是很棒的配色悯舟，但它們都不夠靈活担租，無法提供豐富的色系。
問題3：難以區(qū)分
不過等一下抵怎，還有一些配色方案看起來像是漸變——理論上說可以創(chuàng)造出任意數(shù)量的顏色奋救，對吧？
不幸的是反惕，它們明度差異通常不大尝艘，其中許多顏色很容易變得無法區(qū)分，就像這一組姿染，同樣來自Color Hunt：
我們試著選第一組背亥，把它擴展為10級色彩：
如果普通用戶能正確的區(qū)分出這些顏色，并與相應的數(shù)據(jù)項對應起來悬赏，我就服了狡汉，尤其是能區(qū)分出左邊的4種綠色。
在Graphiq闽颇，我們以數(shù)據(jù)為生命盾戴，并且投入了大量時間尋找能夠用于數(shù)據(jù)可視化的配色方案，不是一組进萄，而是許多組捻脖。我們在這個過程中受益良多锐峭，并且打算分享這些能夠創(chuàng)造出靈活配色的準則：
第1條：色調(diào)與明度的跨度都要大
要確保配色非常容易辨識與區(qū)分，它們的明度差異一定要夠大可婶。明度差異需要全局考慮沿癞。選擇一種單色系的配色，并且測試它在紅色盲矛渴、綠色盲與灰度模式下的表現(xiàn)椎扬。你就能迅速了解這個配色的辨識度水平。
△ Google Material配色中的淺藍色的完整色彩具温、紅色盲模式與灰度模式蚕涤。
但是，有一組明度跨度大的配色還不夠铣猩。配色越多樣揖铜，用戶越容易將數(shù)據(jù)與圖像聯(lián)系起來。如果能善加利用色調(diào)的變化达皿，就能使非色盲用戶更加輕松天吓。
對于明度與色調(diào)，跨度越大峦椰，就能承載越多的數(shù)據(jù)龄寞。
第2條：仿照自然的配色
設計師都知道一個小秘密，對于理性派們而言這似乎不符合常識：并非所有顏色都是均等的汤功。
從純數(shù)學的角度來看物邑，淡紫到深黃的過渡，與淡黃到深紫的過渡滔金，感覺大概相似色解。但我們在下面可以看到，前者感覺很自然鹦蠕，后者則不是冒签。
這是由于我們已經(jīng)習慣于那些長期存在于自然界中的漸變。在華麗的日落中钟病，我們就能看到明黃色向深紫色的漸變萧恕，但卻沒有哪里能看到淡紫色向深黃色的過渡。
類似的肠阱，還有淺綠色到藏藍色票唆、鵝黃色到深綠色、棕紅色到藍灰色屹徘，等等走趋。
由于我總能看到這些自然的漸變，所以當我們在可視化圖表中看到對應的配色時噪伊，會感覺熟悉和愉快簿煌。
第3條：使用漸變氮唯，不要選擇一系列固定顏色
漸變配色結合不同色調(diào)，對兩者都最好姨伟。無論你需要2種顏色還是10種惩琉，漸變中都能提取出這些顏色，讓可視化圖表感覺自然夺荒，同時保有足夠的色調(diào)與明度差異瞒渠。
改用漸變的思維并不容易，不過有個好方法技扼，可以在Photoshop中拉輔助線到斷點位置伍玖，與數(shù)據(jù)的數(shù)量對應上，然后持續(xù)對漸變進行測試與調(diào)整剿吻。以下是我們在修正漸變時產(chǎn)生的屏幕截圖窍箍。
可以看到，我們將配色表緊挨著頂部的灰度漸變和橙，調(diào)整漸變疊加（之后就能得到精確的漸變色值）仔燕，然后從那些斷點處選取顏色，測試配色在實際運用中的效果魔招。
我們的配色方案
我們對最終成果感到興奮。下面是我們使用的部分配色五辽，它們都有從純白到純黑的漸變办斑，以達到最大限度的明度差異。
冷色杆逗、暖色和霓虹色乡翅。
配色的實際運用
長話短說
盡管優(yōu)秀的配色方案越來越多，但并非所有都適用于圖表和數(shù)據(jù)可視化罪郊。我們的配色方法就是創(chuàng)建色調(diào)與明度變化都足夠大的自然漸變蠕蚜。這么做能使我們的配色便于色盲辨識，對其他人則更明顯悔橄，并且可以滿足1到12種數(shù)據(jù)靶累。
這個過程中，我們發(fā)現(xiàn)了一些很棒的資源和文章癣疟，與我們得出的結論類似挣柬，但他們采用了更精確的方法，甚至鉆研了色彩理論睛挚。我們覺得應該分享出來邪蛔，供大家深度閱讀：
閱讀
通過chroma.js控制多色調(diào)的色彩比例扎狱，作者Gregor Aisch
微妙的顏色侧到，作者Robert Simmon
翠綠配色方案勃教，作者Bob Rudis、Noam Ross和Simon Garnier
工具
數(shù)據(jù)顏色采集工具——一件很趁手的工具荣回，讓你保持濃度不變的同時輕松選擇配色
Chroma.js——一個處理色彩的JavaScript庫
Colorbrewer2——熱點圖與數(shù)據(jù)可視化顏色工具，自帶了多色調(diào)與單色調(diào)的方案
其他資源
我們還找到一些其他愛不釋手的配色資源戈咳。雖然它們并非專為數(shù)據(jù)可視化而設計心软，不過我們覺得或許對你有幫助。
ColorHunt——高質(zhì)量配色方案著蛙，能夠快速預覽删铃，如果你只需要4種顏色，這是絕佳的資源
COLOURlovers——很棒的顏色社區(qū)踏堡，其中有許多工具可以創(chuàng)建配色方案猎唁，還有設計模式
ColorSchemer Studio——強大的桌面取色應用
Coolors——輕量級隨機配色生成器，你可以鎖定你想要的顏色顷蟆，然后替換其他的
Flat UI Colors——很棒的UI配色诫隅，這是最流行的配色之一
Material Design Colors——另一套優(yōu)秀的UI配色。它不僅提供了跨度巨大的顏色帐偎，也為每種顏色提供了不同的“色深”逐纬，或者說明度
Palettab——一個Chrome插件，在每個標簽頁里呈現(xiàn)一套新的配色方案和字體靈感
Swiss Style Color Picker——另一個優(yōu)秀的配色方案集
希望本文對你有所幫助削樊！
