色彩在可視化分析中擔(dān)任著一個(gè)十分重要的角色。在搭建儀表板或數(shù)據(jù)大屏?xí)r，恰當(dāng)?shù)纳蚀钆?，能夠使整個(gè)數(shù)據(jù)圖表的呈現(xiàn)更加清晰、整潔、準(zhǔn)確。但在實(shí)際操作過(guò)程中，對(duì)于一個(gè)新手小白來(lái)說(shuō)，能夠熟練地為自己的儀表板設(shè)計(jì)配色并不是一件簡(jiǎn)單的事情，有時(shí)甚至耗時(shí)耗力。

本期內(nèi)容將教新手小白們「如何為儀表板或數(shù)據(jù)大屏等設(shè)計(jì)美觀又合適的配色」，幫助大家快速掌握色彩搭配的訣竅，輕松搞定儀表板和數(shù)據(jù)大屏的配色問題。

配色原則

一、色彩基本原理

1、色彩三要素（HSB）

①色相H（Hues）

色相指顏色相貌，是顏色間彼此區(qū)分的明顯特征。物理學(xué)或心理學(xué)上能區(qū)別的基本顏色為“紅、橙、黃、綠、青、藍(lán)、紫”，黑白灰沒有色相屬性。

色相帶給人的感受大體分為三種：冷色系（藍(lán)色、藍(lán)綠色等）、暖色系（紅色、橙色、黃色等）、中間色系（紫色系和綠色系），中間色基本上不能單獨(dú)營(yíng)造冷暖印象。

在數(shù)據(jù)可視化應(yīng)用中，色相沒有明顯的順序性，一般不用于表達(dá)數(shù)據(jù)量的高低，而是用于表達(dá)數(shù)據(jù)列的類別。

② 飽和度S（Saturation）

飽和度指色彩的鮮艷程度，也稱作純度。

色彩的純度越高，顏色越鮮艷，更容易形成強(qiáng)勁有力、充滿朝氣的印象；純度越低，顏色越蒼白，更容易形成成熟、穩(wěn)重的印象。

③ 明度B（Brightness）

明度指色彩的明亮程度，也稱作亮度。

明度分為兩種：相同色相的不同明度和不同色相的不同明度（人類視網(wǎng)膜感知的明度）。

在數(shù)據(jù)可視化應(yīng)用中，飽和度和明度， 在視覺上很容易區(qū)分出優(yōu)先級(jí)的高低，主要用于表達(dá)順序或數(shù)據(jù)量。

2、色彩對(duì)比

色彩對(duì)比，是指采用兩種或兩種以上的色彩搭配使用時(shí)產(chǎn)生的對(duì)比。

• 同色相對(duì)比（0°）

一種色相的不同明度或飽和度的對(duì)比。如藍(lán)與淺藍(lán)（藍(lán)+白）色對(duì)比。對(duì)比效果統(tǒng)一、雅致、含蓄、穩(wěn)重，也易產(chǎn)生單調(diào)、呆板。

• 相近色對(duì)比（30°）

弱對(duì)比。對(duì)比效果柔和、和諧、雅致、文靜，也易產(chǎn)生單調(diào)、模糊、乏味、無(wú)力，需要通過(guò)調(diào)節(jié)明度來(lái)增強(qiáng)效果。

• 類似色（60°）

弱對(duì)比。對(duì)比效果較豐富、活潑，但不失統(tǒng)一、雅致、和諧。

• 對(duì)比色（120°）

強(qiáng)對(duì)比。對(duì)比效果強(qiáng)烈、醒目、活潑、有力，但也不易產(chǎn)生統(tǒng)一而雜亂、刺激、造成視覺疲勞。一般采用多種調(diào)和手段改善對(duì)比效果。

• 補(bǔ)色（180°）

強(qiáng)對(duì)比。對(duì)比效果強(qiáng)烈、醒目、活潑、有力，但容易產(chǎn)生視覺疲勞。一般采用多種調(diào)和手段改善對(duì)比效果。

二、色板類型

1、分類色板

分類色板，主要用于描述數(shù)據(jù)的類別，每個(gè)類別沒有固定順序，例如不同國(guó)家、不同企業(yè)、不同個(gè)體分類展示。

2、順序色板

順序色板，主要用于表達(dá)同一事物中的數(shù)值大小、梯度的變化。一般情況下，顏色越深數(shù)值越大，顏色越淺數(shù)值越小。

3、分散色板

分散色板，主要用于表達(dá)數(shù)據(jù)從負(fù)數(shù)到0再到正數(shù)的連續(xù)變化。常采用從一種顏色經(jīng)過(guò)一個(gè)淺色再均勻過(guò)渡到另一種對(duì)立顏色的表現(xiàn)方式，而中間淺色則作為中心值或者參考值。

如下圖：綠色表示正數(shù)，紅色表示負(fù)數(shù)，中間淺色則是0；或綠色表示正面，紅色表示負(fù)面，中間淺色表示中立。

4、語(yǔ)義色板

表達(dá)負(fù)面的、不可行、危險(xiǎn)、失敗、嚴(yán)重、股票漲（根據(jù)地區(qū)不同）

表達(dá)正面的、可行、安全、成功、股票跌（根據(jù)地區(qū)不同）

表達(dá)警示、暫停、注意、提醒

表達(dá)中立、普遍

配色方法

一、有主題色

1、 創(chuàng)建靈感色板

Step1. 進(jìn)入設(shè)計(jì)網(wǎng)站：https://dribbble.com/

Step2. 輸入主題色，得到主題色相關(guān)報(bào)表的列表

Step3. 選擇喜歡的圖片，模仿配色，可以使用Keynote或PPT中的拾色器取色

2、從品牌色探索配色方案

① 單一品牌色的發(fā)散

????????Step1. 尋找品牌主色

????Step2. 校準(zhǔn)主色

????????在儀表板或數(shù)據(jù)大屏中，需要遵守一些基本原則：

• 不能大面積使用飽和度過(guò)高的顏色（特別是在深色背景下）和明度過(guò)高的顏色（特別在白色背景下）

• 不占用功能性色彩（如純綠色、紅色、黃色）

????????所以在上述情況下，需要在品牌色相的基礎(chǔ)上進(jìn)行校準(zhǔn)調(diào)整（結(jié)合場(chǎng)景如大屏的暗色背景），使這些色彩應(yīng)用于圖表時(shí)，能夠傳達(dá)品牌感。

????????Step3. 發(fā)散輔助色

????????基于主色，我們需要尋找一系列的輔助色以滿足可視化的需要。一般來(lái)說(shuō)，需要約80%的近似色和20%的對(duì)比色（用于版面的點(diǎn)綴）。

• 追求一致的版面風(fēng)格，可同向選取近似色和對(duì)比色

• 追求均衡的版面風(fēng)格，可反向選取

在近似色的60°色環(huán)上，我們可以選取出更多的顏色，創(chuàng)建出分類色板；同時(shí)，通過(guò)調(diào)節(jié)明度和飽和度，我們可以創(chuàng)建出順序色板。

② 多品牌色的發(fā)散

????????從單一品牌色的發(fā)散可以總結(jié)出，在可視化圖表中，我們需要一個(gè)分類色板、其對(duì)應(yīng)的順序色板、1-2種的對(duì)比色。那么將多品牌色合適地置入色板中，并通過(guò)類似的方法進(jìn)行填補(bǔ)，則完成了多品牌色的發(fā)散。

????????Step1. 尋找品牌色

????????選取多品牌色中的主色作為圖表主色，點(diǎn)綴色作為對(duì)比色或?qū)Ρ壬恼{(diào)和參考。

????????Step2. 確定分類色板

?????????在近似色的60°色環(huán)上，我們可以選取出更多的顏色，創(chuàng)建出分類色板；同時(shí)，通過(guò)調(diào)節(jié)明度和飽和度，我們可以創(chuàng)建出順序色板。

應(yīng)用示例：

二、無(wú)主題色

1、創(chuàng)建靈感色板

??????Step1. 進(jìn)入設(shè)計(jì)網(wǎng)站：https://www.zcool.com.cn/

??????Step2. 輸入關(guān)鍵詞，例如數(shù)據(jù)可視化、數(shù)據(jù)大屏、Data Visualization、Dashboard等

????????Step3. 選擇適合的圖片，模仿配色，可以使用Keynote或PPT中的拾色器取色

2、從照片/圖片發(fā)散配色方案

????????Step1. 選擇一張合適的照片

????????可通過(guò)以下工具，導(dǎo)入照片，提取專屬色卡：Muzli Colors?or?Coolors Generator

????????Step2. 發(fā)散顏色

????????當(dāng)圖表中需要更多的顏色時(shí)，可以對(duì)照片再次提取主色，也可以根據(jù)主色繼續(xù)發(fā)散。具體操作如下：

• 從上圖照片提取天空的顏色

• 根據(jù)主色繼續(xù)發(fā)散

• 確定五個(gè)色卡在色環(huán)中大概的位置。在色卡上做微微減弱（飽和度減低，明度升高，色值往亮色靠）或微微增強(qiáng)(飽和度升高，明度降低，色值遠(yuǎn)離亮色），即可提取變化生成的新顏色

• 按照色卡順序拉出一個(gè)漸變條，即可從中提取可辨識(shí)的新顏色

在進(jìn)行上述操作后，可創(chuàng)建出一個(gè)分類看板。此時(shí)，可基于分類看板的“所有顏色在視覺上平衡等價(jià)且清晰可辯”的原則，再次進(jìn)行色彩微調(diào)，具體操作如下：

• 由于橙色塊和淺藍(lán)色塊較亮，易處于視覺中心，因此降低橙色和淺藍(lán)色的明度。

• 由于淺藍(lán)色降低明度后和旁邊的深藍(lán)色不易辨識(shí)，因此提高深藍(lán)色的飽和度，同時(shí)將藍(lán)色色值略向紫色移動(dòng)，拉開顏色差距。

配色常見問題

• 色彩辨識(shí)度低

• 使用飽和度過(guò)高或過(guò)低的色彩（白色背景上）

• 使用過(guò)多的色彩：應(yīng)采用7±2法則，色彩盡量控制在8個(gè)以內(nèi)

• 數(shù)據(jù)映射規(guī)則過(guò)于復(fù)雜：同樣的數(shù)據(jù)，映射規(guī)則盡量保持為一種

觀遠(yuǎn)官方配色字典

1、海濱

2、春日

3、湖光山色

4、正式場(chǎng)合

5、維他命

6、彩色樂章

7、未來(lái)藍(lán)

8、玻璃幕墻

9、冬日午后

10 、薄荷

11、 魔術(shù)球

12、 游樂場(chǎng)

13 、野餐聚會(huì)

14 、公路旅行

配色常用工具

• 類比色/單色漸變色/對(duì)比色取色 ：Adobe color

• 多色漸變?nèi)∩篜alettte

• 色彩編輯：ColorBox

• 提取色卡：Muzli colors、Coolors

• 設(shè)計(jì)/靈感網(wǎng)站：Dribbble、Canva、Zcool、花瓣網(wǎng)、Pinerest