雖然如今好(hǎo)的配色方案已經(jīng)唾手可得，但想爲數據可視化找到合适的配色方案，難度仍然不小。因信息圖的獨特屬性，在保證色彩具有清晰辨識度的同時，還(hái)必須滿足豐富而不淩亂的配色要求。不過(guò)即使你對(duì)色彩不敏感，用了今天這(zhè)篇幹貨提到的3個技巧，也能(néng)輕松制作出好(hǎo)看的信息圖。

在信息圖方面(miàn)，事(shì)情甚至更加棘手，因爲我們要通過(guò)上千種(zhǒng)各不相同的數據集合來傳遞信息，它們有著(zhe)各自迥異的視覺表現。

目前的問題

我們沒(méi)有立刻開(kāi)始建立自己的配色表，而是發(fā)起(qǐ)了一些調查，研究網絡上已存在的配色方案。令人驚訝的是，我們發(fā)現其中隻有少數是爲複雜的圖表和數據可視化而設計的。我們發(fā)現一些不能(néng)使用現有配色的原因。

問題1：辨識度低

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

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

問題2：色彩不夠多

另一個問題是，許多現有配色方案沒(méi)有足夠的顔色。創造數據可視化信息圖時，我們需要至少6種(zhǒng)顔色的配色方案，甚至有時需要8到12種(zhǒng)顔色，才能(néng)滿足所有的應用場景。我們看過(guò)的許多配色方案都(dōu)沒(méi)有足夠多的色彩供選擇。

雖然這(zhè)些都(dōu)是很棒的配色，但它們都(dōu)不夠靈活，無法提供豐富的色系。

問題3：難以區分

不過(guò)等一下，還(hái)有一些配色方案看起(qǐ)來像是漸變——理論上說可以創造出任意數量的顔色，對(duì)吧？

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

我們試著(zhe)選第一組，把它擴展爲10級色彩：

如果普通用戶能(néng)正确的區分出這(zhè)些顔色，并與相應的數據項對(duì)應起(qǐ)來，我就服了，尤其是能(néng)區分出左邊的4種(zhǒng)綠色。

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

第1條：色調與明度的跨度都(dōu)要大

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

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

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

但是，有一組明度跨度大的配色還(hái)不夠。配色越多樣(yàng)，用戶越容易將(jiāng)數據與圖像聯系起(qǐ)來。如果能(néng)善加利用色調的變化，就能(néng)使非色盲用戶更加輕松。

對(duì)于明度與色調，跨度越大，就能(néng)承載越多的數據。

第2條：仿照自然的配色

設計師都(dōu)知道(dào)一個小秘密，對(duì)于理性派們而言這(zhè)似乎不符合常識：并非所有顔色都(dōu)是均等的。

從純數學(xué)的角度來看，淡紫到深黃的過(guò)渡，與淡黃到深紫的過(guò)渡，感覺大概相似。但我們在下面(miàn)可以看到，前者感覺很自然，後(hòu)者則不是。

這(zhè)是由于我們已經(jīng)習慣于那些長(cháng)期存在于自然界中的漸變。在華麗的日落中，我們就能(néng)看到明黃色向(xiàng)深紫色的漸變，但卻沒(méi)有哪裡(lǐ)能(néng)看到淡紫色向(xiàng)深黃色的過(guò)渡。

類似的，還(hái)有淺綠色到藏藍色、鵝黃色到深綠色、棕紅色到藍灰色，等等。

由于我總能(néng)看到這(zhè)些自然的漸變，所以當我們在可視化圖表中看到對(duì)應的配色時，會感覺熟悉和愉快。

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

漸變配色結合不同色調，對(duì)兩(liǎng)者都(dōu)最好(hǎo)。無論你需要2種(zhǒng)顔色還(hái)是10種(zhǒng)，漸變中都(dōu)能(néng)提取出這(zhè)些顔色，讓可視化圖表感覺自然，同時保有足夠的色調與明度差異。

改用漸變的思維并不容易，不過(guò)有個好(hǎo)方法，可以在Photoshop中拉輔助線到斷點位置，與數據的數量對(duì)應上，然後(hòu)持續對(duì)漸變進(jìn)行測試與調整。以下是我們在修正漸變時産生的屏幕截圖。

可以看到，我們將(jiāng)配色表緊挨著(zhe)頂部的灰度漸變，調整漸變疊加（之後(hòu)就能(néng)得到精确的漸變色值），然後(hòu)從那些斷點處選取顔色，測試配色在實際運用中的效果。

我們的配色方案

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

冷色、暖色和霓虹色。

配色的實際運用

長(cháng)話短說

盡管優秀的配色方案越來越多，但并非所有都(dōu)适用于圖表和數據可視化。我們的配色方法就是創建色調與明度變化都(dōu)足夠大的自然漸變。這(zhè)麼(me)做能(néng)使我們的配色便于色盲辨識，對(duì)其他人則更明顯，并且可以滿足1到12種(zhǒng)數據。

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

閱讀

如何避免等差的HSV顔色，作者Gregor Aisch

通過(guò)chroma.js控制多色調的色彩比例，作者Gregor Aisch

微妙的顔色，作者Robert Simmon

翠綠配色方案，作者Bob Rudis、Noam Ross和Simon Garnier

MATLAB色彩地圖，作者Steve Eddins

工具

數據顔色采集工具——一件很趁手的工具，讓你保持濃度不變的同時輕松選擇配色

Chroma.js——一個處理色彩的JavaScript庫

Colorbrewer2——熱點圖與數據可視化顔色工具，自帶了多色調與單色調的方案

其他資源

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

ColorHunt——高質量配色方案，能(néng)夠快速預覽，如果你隻需要4種(zhǒng)顔色，這(zhè)是絕佳的資源

COLOURlovers——很棒的顔色社區，其中有許多工具可以創建配色方案，還(hái)有設計模式

ColorSchemer Studio——強大的桌面(miàn)取色應用

Coolors——輕量級随機配色生成(chéng)器，你可以鎖定你想要的顔色，然後(hòu)替換其他的

Flat UI Colors——很棒的UI配色，這(zhè)是最流行的配色之一

Material Design Colors——另一套優秀的UI配色。它不僅提供了跨度巨大的顔色，也爲每種(zhǒng)顔色提供了不同的“色深”，或者說明度

Palettab——一個Chrome插件，在每個标簽頁裡(lǐ)呈現一套新的配色方案和字體靈感

Swiss Style Color Picker——另一個優秀的配色方案集

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

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。