Excel圖表配色原理

今天來了解下圖表配色的基本原理。

目錄:

1.顏色基本原理

2.色彩搭配

3.顏色的情感

4.學習資源

5.Excel中如何配色

1.顏色基本原理 01 原色

色彩三原色:紅黃藍,另外要說一下色光三原色是紅綠藍,很多人可能會搞混,所以提一下。

爲什麼紅黃藍是色彩三原色,因爲這三個顏色是不能通過其他顏色調出來的,但他們卻能調出其他的顏色來。

三原色中的兩種配成的顏色,如:

紅色 + 黃色 = 橙色

黃色 + 藍色 = 綠色

紅色 + 藍色 = 紫色

03 複色

兩個間色或三個原色配成的顏色,複色是包括了除三原色和間色外的所有顏色。

色彩的相貌,是區別各種不同色彩的最準確的標準,最初的基本色相爲:紅、橙、黃、綠、藍、紫。

在各色中間加插一兩個中間色,其頭尾色相,按光譜順序爲:紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍綠、藍、藍紫,紫。紅紫、紅和紫中再加個中間色,可製出十二基本色相。

指顏色的明暗程度,是由光線強弱決定的一種視覺經驗,一般來說,光線越強,看上去越亮;光線越弱,看上去越暗,明度它可以指顏色本身的明暗,也可以和其他色相來區別明暗。

也叫純度、飽和度,顏色的鮮豔程度,通常以某彩色的的同色名純色所佔的比例,來分辨彩度的高低,純色比例高爲彩度高,彩度越高色彩越純,感覺越豔麗,純色比例低爲彩度低,彩度越低,色彩越澀,感覺越渾濁。

只有一個色相,通過改變該色相的純度產生層次感的搭配方法。

又叫近似色、相似色搭配,就是找到相似的顏色來搭配,那什麼是相似呢,也就是前面說的十二色相環中的位置相近的2~4個色相,如紅色和橙紅色,黃色和橙黃色的搭配。

03 互補色搭配

就是在色相環上使用位置相對的顏色來搭配的方法,可以打造強烈的視覺效果,如紅色和綠色,橙色和藍色。

同時用補色和類比色的方法來搭配,如紅色和綠色是互補色,綠色和藍色是相似色,紅+綠+藍的搭配就是分裂補色。

下圖中黃色到紅色的順時針方向爲暖色,逆時針方向爲冷色,冷暖色的搭配也能形成一個不錯的效果。

即在色環中成等邊三角形或等腰三角形的三個色相搭配在一起時的配色,最典型的就是三原色紅黃藍,三角配色會具有很強烈的視覺衝擊感。

選定一個主色相和其補色後,再選主色相隔一個位置的顏色作爲第三個顏色,再選第三個顏色的補色,即形成一個矩形,爲四角配色,常見的有紅、黃、藍、綠及紅、橙、黃、綠、藍、紫等色,這幾種配色在中國傳統民間工藝中經常使用,如:風箏、刺繡、剪紙、皮影、年畫等。

瞭解顏色所傳遞的情感,也可以更好地幫助我們去配色。

學習了顏色的基本原理、如何配色以及顏色所傳遞的情感後,對於非美術專業的我們來說,其實還是不知道該怎麼去搭配顏色,基礎的概念要了解,實操的方法也要掌握,下面提供了3種學習如何配色的方法。

01 網站

有很多網站提供大量優秀的可視化作品,我們可以模仿並參考其配色和排版。

1. 基於JavaScript的圖表庫

這類圖表庫可通過網站已有的實例,運用JavaScript簡單編程在線製作圖表。

Echarts

網址:https://echarts.apache.org/zh/index.html

是一個由百度開源的,基於 JavaScript的數據可視化圖表庫,憑藉着良好的交互性,精巧的圖表設計,得到了衆多開發者的認可。圖表直觀生動,可交互,官方自帶超多demo庫,全部開源,可自制個性化的圖表。

Chart.js

網址:https://www.chartjs.org/

爲設計人員和開發人員提供簡單而靈活的 JavaScript 圖表,圖表樣式沒有Echarts多。

無需通過JavaScript編輯,零代碼可直接在線編輯數據和圖表樣式。

Flourish

網址:https://app.flourish.studio/register

在線的數據可視化網站,可從Excel上傳數據,尤其可以用來製作動態變化的數據圖表,還可嵌入網站進行交互,雖然收費,但免費版本的限制也很少,總體來說,在交互圖表這一塊Flourish還是可以的。

鏑數圖表

網址:https://dycharts.com/appv2/#/pages/home/index

同樣也是可以在線編輯數據和圖表樣式,有收費和免費的限制,圖表樣式種類也挺多。

圖表學習網站沒有在線編輯的功能,但能告訴我們圖表適用場景,什麼樣的數據適用什麼圖表,以及優秀配色排版案例。

圖之典

網址:http://www.tuzhidian.com/

介紹每種圖表的構成和使用場景等屬性,還提供設計案例幫助我們參考配色和排版,非常適合新手學習圖表使用、製作。

Datavizproject

網址:https://datavizproject.com/

可以通過設定輸入什麼類型的數據、想要什麼樣的功能等得到適用的圖表,也是一個告訴我們圖表怎麼用的網站。

國內外的期刊雜誌中也有可以借鑑參考的圖表。

人民日報

人民日報的玫瑰圖一時間火遍全網。

第一財經週刊

國內的商業新聞雜誌,其中關於圖表的設計展現配色都可以參考學習。

新華社

新華社的內容是朝着設計的角度走的,關於配色方面可以參考。

經濟學人

1853年創辦,它的圖表風格統一,可以借鑑。

華爾街日報

1889年創刊,着重財經新聞報道,在圖表的配色排版方面值得參考。

還有很多官方的數據公衆號裡的配圖搭配都很不錯,如

本站數讀

極光

艾瑞諮詢

穀雨數據

澎湃美數課

《Excel圖表之道》

首推劉萬祥《Excel圖表之道》這本書,系統地講解如何製作專業圖表,尤其是商業圖表,以經濟學人、商業週刊爲案例講解,這本書出版的時間很早了,2010年出版,如今已過去10年了,所以書裡是以Excel2003作爲講解的,不過還是很經典的一本圖表書籍。

《用圖表說話》

《用圖表說話:麥肯錫商務溝通完全工具箱》這本書也是很經典暢銷的講解如何用數據搭配圖表的書,這本書沒有講任何的作圖技巧,它告訴我們作圖的理念。

在Excel的頁面佈局中可以看到Excel提供的主題顏色的類型,默認的是Office主題的配色,這裡其實已經搭配好了配色方案,不需要我們自己去配。

但是呢我們總是會感覺Excel默認的配色方案不好看,那也可以自定義顏色,比如可以模仿優秀的可視化作品的配色。首先要知道Excel中通過指定RGB值來對計算機中的顏色進行編程,RGB值設置計算機中紅色、綠色和藍色的強度,RGB值從0~255取值,依次輸入就可以改變顏色。

自己搭配顏色是很難的,即使我們前面已經學習了顏色的基本原理,但是非專業人士的我們還是把這種專業配色的事情交給專業人士去做吧。爲了更好地搭配顏色,我們可以模仿,這裡整理了部分Tableau、seaborn、ggplot2以及經濟學人的4種配色方案。

可以自定義主題顏色,分別輸入着色的RGB值改變着色,並重新命名。

這裡我自定義了ggplot2主題顏色,並繪製了圖表,在頁面佈局中將主題顏色改爲自定義的ggplot2,圖表就自行更改顏色了,一定要注意,這裡改變的是主題顏色,而非填充色,主題很重要。

主題是一個還挺重要的功能,可以迅速地改變外觀,使顏色、字體和圖形格式效果得到渾然一體的搭配,Excel自帶的主題很多,選擇不同的主題可以快速更改搭配效果。

前面講解了Excel主題中的顏色以及如何自定義顏色,主題也是可以設置字體的。

1. 主題的字體

說到字體,有些字體是不可以商用的,比如微軟雅黑,和微軟雅黑比較相似的可商用的就是思源黑體,需自行下載安裝。想要知道哪些字體能商用,可用360查字體這個網站來檢索。

在【頁面佈局】的字體中也可以自定義字體,比如將正文的字體自定義成我剛剛安裝的思源黑體。

2. 主題的效果

主題的效果主要是針對形狀的,包括陰影、線條、填充等效果的展示,效果就無法自定義了,只能選擇Excel已有的效果。

可以對剛剛進行的顏色、字體的更改保存當前主題,並命名,就自定義了主題。

6.圖表製作輔助工具 01 微信截圖

通過微信截圖進行顏色拾取,缺點是得自己記錄下RGB值,優點是非常方便,無需下載任何工具。

收集了世界知名品牌、企業、網址的顏色方案,可供參考學習。

網址:http://brandcolors.net/