顏色搭配，3個(gè)可視化信息圖的色彩搭配技巧

由于我總能看到這些自然的漸變，所以當(dāng)我們?cè)诳梢暬瘓D表中看到對(duì)應(yīng)的配色時(shí)，會(huì)感覺熟悉和愉快。

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

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

改用漸變的思維并不容易，不過有個(gè)好方法，可以在Photoshop中拉輔助線到斷點(diǎn)位置，與數(shù)據(jù)的數(shù)量對(duì)應(yīng)上，然后持續(xù)對(duì)漸變進(jìn)行測(cè)試與調(diào)整。以下是我們?cè)谛拚凉u變時(shí)產(chǎn)生的屏幕截圖。

可以看到，我們將配色表緊挨著頂部的灰度漸變，調(diào)整漸變疊加（之后就能得到精確的漸變色值），然后從那些斷點(diǎn)處選取顏色，測(cè)試配色在實(shí)際運(yùn)用中的效果。

我們的配色方案

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

冷色、暖色和霓虹色。

配色的實(shí)際運(yùn)用

長(zhǎng)話短說

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

這個(gè)過程中，我們發(fā)現(xiàn)了一些很棒的資源和文章，與我們得出的結(jié)論類似，但他們采用了更精確的方法，甚至鉆研了色彩理論。我們覺得應(yīng)該分享出來，供大家深度閱讀：

閱讀

如何避免等差的HSV顏色，作者Gregor Aisch通過chroma.js控制多色調(diào)的色彩比例，作者Gregor Aisch微妙的顏色，作者Robert Simmon翠綠配色方案，作者Bob Rudis、Noam Ross和Simon GarnierMATLAB色彩地圖，作者Steve Eddins

工具

數(shù)據(jù)顏色采集工具——一件很趁手的工具，讓你保持濃度不變的同時(shí)輕松選擇配色Chroma.js——一個(gè)處理色彩的JavaScript庫(kù)Colorbrewer2——熱點(diǎn)圖與數(shù)據(jù)可視化顏色工具，自帶了多色調(diào)與單色調(diào)的方案

其他資源

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

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

希望本文對(duì)你有所幫助！