圖表配色指南：你只要懂顏色，顏色就會幫助你！ - DD Story Hub

當選用圓餅圖或堆疊長條圖這種色塊與色塊間容易相連在一起的圖表時，最好選用明度不同的顏色進行搭配，如果明度太過接近，容易讓讀者比較難以辨識出 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinDDStoryHub圖表配色指南：你只要懂顏色，顏色就會幫助你！顏色是圖表中非常重要的視覺元素之一，好的配色可以讓讀者舒服地獲取圖表中的資訊，不好的配色可能會降低讀者閱讀圖表的意願，究竟那些讓人看起來「舒服」的圖表背後配色的秘訣是什麼？而讓人讀起來「難受」的圖表在選色上經常犯了哪些錯？我們今天就一起來討論這些問題！本文內容及範例圖片主要來源是LisaCharlotteRost在Datawrapper所撰寫的Howtopickmorebeautifulcolorsforyourdatavisualizations文章，故全文內容也將會以CC4.0授權釋出。

用另一種方式來看顏色「麻煩設計大大在這邊幫我加一點紅色！」，此時設計師腦中可能會冒出千百個問號，因為對他們來說紅色可是有成千上萬種啊！因此，我們需要以一種更準確的方式來看顏色，那就是用HSB色彩空間（有時也稱作HSV），而HSB分別是：H(Hue)：色相，範圍是0~360度，一圈就是我們熟知的紅橙黃綠藍紫。

S(Saturation)：飽和度，0%~100%，數值越高顏色看起來越豔麗、濃烈。

B(Brightness)：明度，0%~100%，數值越低會越暗，數值越高也就越明亮、越淡。

通常我們在網路上會比較常看到RGB或是HEX的顏色表示法（ex:rgb(255,136,34)FF8822），因為這些表示法對於電腦來說是比較好理解，但對人類不是！因此整篇文章對於顏色討論主要都將會以HSB為主。

善用色彩調和色彩調和（colorharmony），指兩種或兩種以上的色彩合理搭配，產生統一和諧的效果。

而這些調和的種類我們可以很清楚地在色輪中看見：圖片來源：risaann.com在資料視覺化的配色中，盡量避免Square和Rectangle的色彩調和，因為它們包含太多色相了，一般來說資料視覺化的配色不會需要用到那麼多色相，因為這很有可能讓你的圖表在呈現時變得很複雜，對於圖表來說Complementary（互補色）就很夠用了，但你此時可能會有個疑問，Complementary只會有兩種色相啊！請放心，此時明度和飽和度的調整就派上用場了。

而換個角度來看，如果你心中目前只有一種理想的顏色時，也許可以先試試看互補色的色彩調和搭配，色彩調和可以幫助你找出第二、第三種你理想的顏色！明度和飽和度的魔法很直覺地，上方圖片中右邊的圖表配色優於左邊，但你知道兩張圖片所選用的色相其實都相同嗎？差別就在明度和飽和度的調整，所以當你對自己一開始調和出來的顏色不滿意時，先別急著尋找其他顏色，可以先調整明度以及飽和度，通常選到看起來過於刺眼的顏色時，可以先試著把飽和度及明度降低一些，看看是否有好一點。

使用藍色與暖色系做搭配有一組互補色大為資料視覺化設計師所愛，那就是黃色、橘色、紅色以及藍色，基本上這幾種顏色的搭配再加上明度及飽和度的調整後的顏色看起來都不會太差，因為這些顏色的通用性很高，黃、紅、橘色組合起來相當讓人愉悅，而藍色看起來相當沈著、冷靜也帶有一定的專業感，經濟學人的GraphicDetail就是使用這些顏色一個非常好的例子。

盡量少使用純色所謂的純色是指色相在色輪中為60°,120°,180°,240°,300°及360°/0°的顏色，如果真的非用不可，你可以先降低純色的飽和度讓它們變得更暗一些。

而如果你想要的是更佳豔麗、更明亮的顏色，建議可以選大於純色色相至少5°~10°的顏色（混色），例如從下方的色輪中可以看到，40°的橘色會比0°的看起來更溫和一些，211°的藍色會比240°的藍色也有一樣的差別。

少使用亮度、飽和度高的顏色通常亮度、飽和度高的顏色就是我們所熟知的霓虹色，看起來能夠非常吸引讀者的注意，但事實上在圖表中它們看起來有時會讓人感到刺眼，IEEE2017年的一篇論文AffectiveColorinVisualization中也提到高亮度、飽和度的顏色也比較不適合表達認真、信任以及冷靜的感覺。

當然如果你的圖表或視覺化作品主題沒有想營造出嚴肅感的話，你一樣可以用高飽和度、明度的色彩去營造比較活潑的感覺，但絕對不是兩者都調成100%！Bloomberg的TheCovidBankruptcies:NewYorkSportsClubstoIt’Sugar是一個不錯的例子。

結合不同明度的顏色當選用圓餅圖或堆疊長條圖這種色塊與色塊間容易相連在一起的圖表時，最好選用明度不同的顏色進行搭配，如果明度太過接近，容易讓讀者比較難以辨識出顏色與顏色間的界限，而剛好你的配色明度較為相近時，此時你有兩種做法可以對顏色做調整：將相鄰的顏色再調暗or調亮一點把它們分開一點下圖就是融數基地的圖表主要五色經過明度&飽和度的調整後，所做出來的類別五色，是不是看起來看舒服也更能區分不同類別了呢？讓顏色更能突顯重點當你想在圖表中突顯某些重點部分時，有幾種方式能夠讓你的顏色更加突出：將明度調低一點讓明度調高一點讓飽和度調高一點調整成更接近純色一點根據上方四種手法進行搭配，讓你的顏色能夠更加被突顯，但需要注意的一點是，通常只需要一兩個顏色可以被突顯就好了，如果越多重點色，整體畫面看起來會很雜亂，這樣反而會分散讀者的注意力。

如果你用了許多不同明度的顏色，最好讓他們變得更平衡一點，試試看將較亮的顏色飽和度調低一點，對暗色系增加一些飽和度。

顏色與背景要有適當的對比顏色與背景色的對比太大或太小都不適合！如果兩者對比太小時：提高飽和度降低明度兩者都做如果兩者對比太大時：降低飽和度提高明度兩者都做選擇飽和度較低的圖表背景當我們對顏色更有掌握時，有時候可能會想用更多色彩的背景。

但是它們有兩個主要缺點：它們很容易分散資料的注意力。

它會限制你的用色，所以很難使用。

實際上，背景越飽和，越難調色，因此最好選擇不飽和的顏色。

以下是一些經驗法則：如果要使用淺色背景，請避免明度低於95％且飽和度高於7％的顏色。

如果要使用深色背景，請保持飽和度低於20％。

另外不要將背景弄成全黑，將亮度保持在10％到25％之間。

更加了解你所選擇的顏色通常在不知道要選用什麼顏色的時候，都會去偷偷參考其他視覺化經驗豐富媒體的顏色，例如經濟學人XD，參考其實沒什麼關係，模仿也是練習的一種方式，但如果我們能夠對他有更深一層的了解會更好！可以知道什麼情境下我們可以使用它，什麼情境下比較不適合去使用它。

學會了上面這些小撇步之後，我們也可以自己來嘗試分析顏色，以下分享三項好用的選色工具供大家參考：AdobeColor強大的調色百寶箱！裡面支援了4種色彩空間表示法、8種色彩調和種類，調色也只需透過拖拉點選就可以直接完成，除了自選色的功能外，也可透過上傳圖片的方式來分析圖片中的色彩。

傳送門：https://color.adobe.com/zh/create/color-wheelChroma.jsColorPaletteHelper非常好用的色階產生器！你可以選擇你要產生的色階是發散的還是有序的，我最喜歡最下方的複製功能，它可以讓你不用再一個個把色階中各個色相的色碼複製貼上，對前端工程師非常友善！如果你需要不同的色階來豐富你的配色，這將會對你非常有幫助！傳送門：https://gka.github.io/palettes/#VIZPALETTEElijahMeeks和SusieLu兩位資料視覺化開發大神所打造的圖表配色模擬工具，它可以將你輸入顏色立即模擬到右方的圖表中，並可以對你所挑選的配色做色盲模擬，看是否這些顏色對色盲者是友善的。

傳送門：https://projects.susielu.com/viz-palette這三種工具都可以在各個配色階段交互做使用，這次的圖表配色指南就先到這邊，如果有看不太懂或是有我寫不清楚的地方歡迎在下方提問，最後強烈建議大家可以去看看Lisa所寫的原文，原文中Lisa有用各種色點輔助幫助大家理解各個配色小撇步，真的很讚！以上，如果覺得這篇文章對你有幫助，歡迎幫我們拍拍手唷！SomerightsreservedMorefromDDStoryHub我們是因為喜歡研究數位敘事及資料新聞，而聚集在一起的夥伴，期待能夠透過不同的敘事方式，放大故事影響力。

「融數」結合數位（Digital）、數據（Data）的概念，我們希望這個計畫能夠作為同好的聚集地，除了紀錄研究與學習的過程，也將持續分享創新想法。

ReadmorefromDDStoryHubAboutHelpTermsPrivacyGettheMediumappGetstartedStevenYeo129FollowersDeveloper+Journalist+LoverofDataVizhttps://www.shihjyunyeo.com👋FollowHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable