好的顏色方案容易獲得砸西，而在數(shù)據(jù)可視化設(shè)計(jì)中找尋合理的配色方案卻是充滿了挑戰(zhàn)性声搁。在Graphiq家卖，信息內(nèi)容通過成千上萬獨(dú)立的數(shù)據(jù)組和不同類型視覺樣式向用戶傳達(dá)出去掖看，而這讓設(shè)計(jì)決策變得尤其困難匣距。
“不是所有的顏色方案都適用于圖表以及數(shù)據(jù)可視化設(shè)計(jì)面哥。”
現(xiàn)在的問題
與其著急出方案毅待，我們決定先在現(xiàn)有網(wǎng)站中做一些針對(duì)配色的調(diào)研工作尚卫。結(jié)果讓我們驚訝的是，只有極少數(shù)的網(wǎng)站配色可實(shí)際用于復(fù)雜的圖表及視覺可視化設(shè)計(jì)恩静。以下是我們發(fā)現(xiàn)的一些問題：
問題1：低可訪問性（Low accessibility）（注1）
許多色板并不是為視覺化呈現(xiàn)而創(chuàng)造的焕毫，這不僅是因?yàn)檫@些方案在明度上缺乏足夠變化，還因?yàn)樗鼈儧]有考慮到可訪問性驶乾。Flat UI的配色被廣泛使用邑飒，原因很簡(jiǎn)單：它們看上去實(shí)在棒極了。但就像它的名字一樣级乐，F(xiàn)lat UI是專為界面而設(shè)計(jì)疙咸。那些色盲用戶會(huì)發(fā)現(xiàn)，使用Flat UI配色的數(shù)據(jù)圖很難被理解风科。
問題2：色彩不夠多
另外一個(gè)問題是：很多現(xiàn)有的方案缺乏足夠多的顏色贼穆。在建立Graphiq可視化系統(tǒng)時(shí)题山，我們需要8到12個(gè)，或者最低標(biāo)準(zhǔn)6個(gè)以上顏色數(shù)目的方案來覆蓋所有使用場(chǎng)景故痊。而大多數(shù)方案無法提供足夠多的選擇顶瞳。
下面是Color Hunt上的一些顏色方案
雖然都是不錯(cuò)的方案，但還不適用于當(dāng)前復(fù)雜的數(shù)據(jù)系列愕秫。
問題3：難以辨別
但是請(qǐng)等一下...我們可以使用一些漸變色的色板慨菱，理論上應(yīng)該可以創(chuàng)造出任意數(shù)目的顏色，難道不是嗎戴甩？
但不幸的是符喝，它們?cè)诿鞫壬先狈ψ銐蚨嗟淖兓瑢?dǎo)致很難被快速辨別甜孤，比如下面這些方案（依舊來自Color Hunt）：
讓我們?nèi)〉?個(gè)方案嘗試擴(kuò)展到10個(gè)數(shù)據(jù)系列协饲，結(jié)果如下：
我們很好奇是否一般用戶能從視覺上正確辨別這些顏色并對(duì)應(yīng)到相應(yīng)顏色名稱，特別是左手邊那4個(gè)綠色缴川。
我們的方法
在Graphic囱稽，我們對(duì)數(shù)據(jù)相當(dāng)熟悉，會(huì)花大量時(shí)間找尋不止一個(gè)可用于可視化的顏色方案二跋。在這個(gè)過程中我們有了許多的發(fā)現(xiàn)战惊，這里分享3條能靈活創(chuàng)造顏色方案的經(jīng)驗(yàn)規(guī)則：
規(guī)則1：色相和明度上要有足夠變化
為了能被很好的理解和識(shí)別，色板必須在明度上富于足夠變化。明度的變化非常常見吞获。任意取一個(gè)單顏色色板分別在紅色盲况凉、綠色盲以及灰度模式下做比對(duì)，你能很快發(fā)現(xiàn)這個(gè)色板是否可用各拷。
只有在明度上有足夠變化才能保證可訪問性
但是，僅在明度上變化還不夠烤黍。顏色的差異度越大知市，用戶就越容易通過視覺定位數(shù)據(jù)。如果在此基礎(chǔ)上再加上色相上的變化速蕊，即使是那些非色盲用戶也會(huì)感到更愉悅嫂丙。
所以在明度和色相上變化得越多，所能支持的數(shù)據(jù)系列也就越多规哲。
規(guī)則2：遵從自然規(guī)律
不是每個(gè)顏色都被平等創(chuàng)造出來跟啤，這是設(shè)計(jì)師們都知道的秘密，但對(duì)于一些左腦型的人來說并不是馬上能夠察覺到唉锌。
從純數(shù)學(xué)的角度看隅肥，從淺紫色過渡到深黃色應(yīng)該跟從淺黃色過渡到深紫色的感覺差不多。但正如下面所看到的袄简，前者看起來是自然協(xié)調(diào)的腥放，而后者則不然。
這是因?yàn)槲覀円呀?jīng)習(xí)慣于看到一直存在于自然中的漸變色彩绿语。我們可以在壯麗的日出中看到從亮黃色過渡到暗紫色的變化秃症，但從沒見過從淺紫色過渡到暗褐色的變化。
同樣的汞舱，從淺綠色變化到藍(lán)紫色伍纫，從淺黃色變化到暗綠色宗雇，從黃褐色變化到冷灰色昂芜，盡然如此。
因?yàn)槲覀円恢痹诳催@些自然界中的色彩變化赔蒲，所以當(dāng)它們相對(duì)應(yīng)的色板運(yùn)用于可視化設(shè)計(jì)中的時(shí)候會(huì)給人熟悉而愉悅的感覺泌神。
選擇漸變色板
一個(gè)包含不同色相的漸變色板可以在任何情況下提供最好支持。不管你是需要兩個(gè)顏色或是10個(gè)顏色舞虱，你都可以從這些漸變色板中有策略性地創(chuàng)造出既和諧自然又能在色相欢际、明度上有足夠變化的顏色方案。
切換到漸變色的思維并不簡(jiǎn)單矾兜，這里有個(gè)比較好的方式可以分享下：在Photoshop中损趋，為各個(gè)數(shù)目的數(shù)據(jù)序列在每個(gè)數(shù)字建立網(wǎng)格線，并持續(xù)地調(diào)整優(yōu)化漸變椅寺。如下是我們?cè)谕晟茲u變色板過程中的一張圖片：
正如你所看到的浑槽，我們將色板置頂靠著灰度圖蒋失，調(diào)整優(yōu)化漸變疊加（方便之后精確代碼還原），然后在各自網(wǎng)格線附近取色桐玻，并查看是否能實(shí)際使用篙挽。
我們的色板
最終用以上方法獲得的色板令我們感到很興奮。以下是一些正在使用的色板镊靴。他們都是從白色最終變到黑色铣卡，以保證在明度上達(dá)到最大變化量。
應(yīng)用案例
不知道如何嵌入
長話短說
雖然好的配色越來越多煮落，但不是每種配色都適用于圖表和數(shù)據(jù)可視化。我們所采用的方式是制作在色相和明度都有變化并符合自然規(guī)律的漸變色板苫耸。通過這種方式制作出來的色板能讓色盲用戶也覺得可以使用州邢，同時(shí)在任何時(shí)候都可以匹配從1到12個(gè)的數(shù)據(jù)序列。
相關(guān)閱讀褪子、工具及資源
在研究中量淌，我們也發(fā)現(xiàn)了一些好的資源以及跟我們有類似結(jié)論的文章，但它們會(huì)采用更為精準(zhǔn)的方法嫌褪，甚至?xí)婕耙恍┥钊氲纳世碚撗绞唷Ｏ旅娣窒沓鰜硪怨┭由扉喿x：
（以下直接搬運(yùn)，請(qǐng)需要的同學(xué)使勁扒）
Readings
How to avoid equidistant HSV colors by Gregor Aisch
Mastering multi-hued color scales with chroma.js by Gregor Aisch
Subtleties of color by Robert Simmon
The viridis color palettes by Bob Rudis, Noam Ross, and Simon Garnier
A new colormap for MATLAB by Steve Eddins
Tools
Color Picker for Data:?a handy color tool where you can hold chroma constant and pick your palette with ease
Chroma.js:?a JavaScript library for dealing with colors
Colorbrewer2:?a great tool for finding heat map and data visualization colors, with multi-hue and single-hue palettes built in
Other resources
And here are some other good color palette resources we found and loved. While they aren’t necessarily designed for data visualization, you might find them useful.
ColorHunt?—?high quality color palettes with quick preview feature, great resource if you only need four colors
COLOURlovers?—?great color community with various tools to create color palettes as well as pattern designs
ColorSchemer Studio?—?powerful desktop color pick app
Coolors?—?light weight random color palette generator where you can lock the colors you want and swap out the others
Flat UI Colors?—?great UI color set, one of the most popular ones
Material Design Colors?—?another great UI palette. Not only does it provide a wide range of colors, it also provides different “weights” or brightness of each color
Palettab?—?a Chrome extension that shows you a new color palette and font inspiration with every tab
Swiss Style Color Picker?—?another collection of good color palettes
（注1）譯者注：可訪問性則指的是訪問一個(gè)產(chǎn)品或服務(wù)的便捷性和效率笼痛，我們每個(gè)人的生理和認(rèn)知能力都不同裙秋，都有其生理和認(rèn)知極限，比如有的人視力比較弱缨伊，有的人則容易疲勞摘刑，無法專注于一件任務(wù)，一個(gè)具有好的可訪問性的產(chǎn)品可以讓不同文化背景刻坊，不同認(rèn)知能力枷恕，不同生理?xiàng)l件的人們都能夠毫無障礙的使用。
原文地址：http://blog.invisionapp.com/finding-the-right-color-palettes-for-data-visualizations/
