cover1

曾煩惱視覺化作品的顏色怎麼選嗎?也許你看過很多色盤網站,但你可能不知道,一般色盤網站的色盤並不適合直接運用在資料視覺化之上的喔!「什麼!那該怎麼辦?」別擔心,今天我們就來深入淺出地從視覺化的角度帶大家重新認識「顏色」吧!

視覺化脫離不了顏色 — 任何東西只要能被看到,就有個顏色。在視覺化的過程,我們常會需要應用各種顏色,這時缺乏靈感的我們難免不去參考各種提供色盤的網站,例如:

  • Color Hunt — 四種顏色一組的小編嚴選
  • Colour Lover — 色盤社群,擁有相當多數量的色盤
  • Adobe Color CC — 前身為 Adobe Kuler ,程序化的挑選顏色 ( 互補色、相近色等 )
  • Loading.io Colors — 由關鍵字選色,提供主題預覽與色盲測試

通常我們選擇色盤,看得順眼的就上了;但這些色盤應用在資料視覺化上真的適合嗎?挑選視覺化專用的色盤時,有沒有什麼該注意的呢?我們把幾個重要的原則整理於此,供大家在未來選擇色盤時的參考。

 

顏色的基本成份

顏色有相當多的表達方式,我們可以說這個顏色很「藍」或很「憂鬱」,也可以用更精確的方式例如「#0000ff」來表現。在資料視覺化中,目前最適合的表現方式為「HCL」的編碼:

  • H – Hue:色調,指示不同類型的顏色,例如紅、綠、黃
  • C – Chroma:彩度,鮮豔與灰暗的差異
  • L – Lightness:明度,代表人類實質感受到的顏色亮度

其中很值得注意的一點,HCL 的明度與其它編碼法的亮度是不同的概念;舉例來說,當我們看著下圖的黃色與藍色時,會覺得黃色比較亮,但在 HSL 空間中他們的亮度是一樣的:

yello-blue

若在灰階的情境下展示,左方的藍便會比右方的黃暗上許多,這代表我們缺乏了對明度的控制力。使用 HCL 空間時,我們能直接指定相同的明度;下圖左右兩邊的色盤均以其明度標示於其下,右方色盤即為將左方色盤的明度重新調整過後的樣子:

lightness

為什麼我們要這麼注意明度的調整呢?

 

顏色的主要用途:區別、強調與分組

視覺化大師 Edward Tufte 於其書「Envisioning information」中提到,顏色最主要的用途便是「to label」— 利用顏色將資料做妥善的區別。不同的顏色可以讓我們分辨不同的資料,但顏色間的差異程度則影響著我們辨識的能力,試想下面兩組色盤若應用在資料視覺化上,哪組比較能讓我們更清楚的分辨出不同的資料呢?

diff

在上圖中,左方的五種顏色在 HCL 空間中彼此距離都近,讓他們看起來差異並不大;而右方的五個顏色的距離都相當的遠,很容易一眼就看出來顏色間的差異。由此我們可以了解到一個秘訣:為了讓顏色更容易分辨,我們可以在 HCL 空間中選取彼此距離遠的顏色來做色盤。

然而,色調、彩度與明度因為其本質的不同,適合應用的情境也不一樣。色調所帶的色彩訊息,容易讓相近的顏色自成一群,例如紅色、橙色與黃色對比於綠色、藍色等等;明度的連續性特質,更適合表現數值大小與變化。要突顯特定資料時,利用強大的對比 ( 互補色、彩度的變化 ) 效果則更好。

由這幾個特點我們歸納一個選色的基本規則:

  • 利用色調來做分組 ( 離散式 )
  • 利用明度來比較數值 ( 連續性 )
  • 接著,再輔以彩度來強化對比

讀到這裡,我們也應該了解為什麼要使用 HCL 色域了:我們需要自由操作明度的能力,才能更妥善的呈現資料。當然光是操作的能力仍然是不夠的;接著我們要從資料出發來思考如何運用這些基本規則。

 

考慮資料的性質

同樣是資料視覺化,資料卻往往有很大的差異,而資料組織與呈現的方式也會很大的影響到顏色所扮演的角色。Colorbrewer 作者 Cynthia Brewer 指出幾種常見的視覺化類型:

二元化 / Binary:當我們只需要呈現兩種不同結果時 ( 例如,男 / 女 、 戰敗 / 戰勝 等 )。這時我們需要兩個顏色,要注意的是這兩個顏色必須在明度上有顯著差異。下圖為兩組二元化的色盤範例:

binary

兩極化 / Diverging:數據分成正負兩群,同時要表現其程度時 ( 例如,股市漲跌、氣溫升降等 )。通常以兩個不同的色調做基礎,各別讓明度依數值做線性變化。下圖為兩極化的範例,可以看到明度由兩端往中間遞增,用以表現數值的變化,而紅與藍的色調則用來表現方向性:

diverging

質化 / Qualitative:數據並非連續或數值,而是離散的時候 ( 例如「支持的球隊」、「人種」、「選舉制度」等 )。通常以多個色調做基礎,明度相近但不相同。下圖為質化的範例,左方是我們的色盤,右方是各個顏色所分別對應的明度。

qualitative

連續式 / Sequantial:當我們要表現程度、分數等連續性資料的時候 ( 例如「生育率」、「溫度」、「字數」等 )。這時大多固定色調,然後利用明度差異來製做色階:

sequential

這幾類的性質也可以互相搭配,產生更多的可能性;但這都是基於我們所想製作的視覺化要如何呈現;我們想要表現的是總統大選各縣市的投票率,亦或是獲勝政黨?想要表現政黨支持度差異,又或者是陣營的差別?從我們想要表現的內容出發,到決定資料類型,再到色盤的選擇與挑選,可以說都是息息相關,脫離不了關係的。

關於資料類型與其對應的顏色挑選,可以直接參考 Cynthia Brewer 所寫的「Color Use Guidelines for Mapping and Visualization」一文,裡面有更詳盡的介紹。

小結

讀到這裡,相信你已經了解:光是挑選個顏色,裡面就已經很有學問!其實顏色的選擇還有很多可以玩味的內容,礙於篇幅限制,接下來的內容我們分篇在後續的文章再繼續與讀者們分享,若對資料視覺化有興趣,別忘了繼續追蹤我們的網站,以取得最新的視覺化資訊喔!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *