莫蘭迪色是什麼?為什麼特別耐看?兩個原理一次看懂

灰藍色的沙發、燕麥色的地毯,配上鼠尾草綠的抱枕,三種原本毫不相干的顏色,擺進同一個空間裡,卻異常和諧,怎麼看都不衝突。換成正紅、寶藍、亮黃這三種顏色試試看,多半第一眼就會覺得刺眼,彼此互相搶戲。這種讓不搭的顏色也能好好相處的配色邏輯,這幾年很常被稱作莫蘭迪色。

問題是,莫蘭迪色究竟是哪一種顏色,跟你原本認知的灰色調、粉彩色又有什麼不同?其實答案不在某一張色卡上,而在色彩背後兩個可以拆解、也可以驗證的原理。先從這個名字的由來與定義講起,再一關一關拆開這兩個原理,最後帶你看懂它實際會用在哪些場景,以及用過頭時該注意什麼。

莫蘭迪色是什麼?

莫蘭迪色不是單一一種顏色,而是一整套配色邏輯,把紅、藍、綠、粉等任何一個原色,加入一定比例的灰或白調和,讓顏色的彩度降下來,變成低彩度、柔和內斂的色彩組合。理論上,任何一個顏色都能被調成莫蘭迪,紅色可以是莫蘭迪紅,綠色可以是莫蘭迪綠,差別只在於原色被加了多少灰、加了多少白。Adobe 官方設計平台 Adobe Express 對這類色彩的解釋,就是把一個鮮豔的顏色跟灰色、棕色或粉彩色調混合,調出一種柔和、去飽和的色感。

把大紅、寶藍、正綠等原色各加入灰或白調和、壓低彩度,就分別變成莫蘭迪紅、莫蘭迪藍與莫蘭迪綠
莫蘭迪色不是特定色號:任何原色加進灰或白、把彩度壓低,就成了它的莫蘭迪版本。

這個名字,其實借用自 20 世紀義大利畫家喬治.莫蘭迪(Giorgio Morandi,1890 年至 1964 年)。他一輩子畫了大量靜物畫,瓶罐、盒子、器皿反覆入畫,用色偏灰階、低飽和度,畫風安靜內斂,作品獲英國泰特美術館(Tate)等國際重要美術館典藏、介紹。莫蘭迪色是後人借用他的畫風命名出來的色彩概念,不是莫蘭迪本人發明或定義的一套色彩系統,所以它從來不對應任何固定色號,只要符合低彩度、柔和內斂這個邏輯,都算得上莫蘭迪色。

莫蘭迪色跟灰色、粉彩色有什麼不同?

灰灰的、霧霧的顏色未必都算莫蘭迪色,判斷的關鍵在於色彩學裡三個不同的維度。色相(hue)是讓你判斷這是紅色、藍色還是綠色的那個屬性;明度(value)代表顏色的明暗程度;彩度(saturation)則是顏色的鮮豔程度,從飽和鮮明到去飽和灰濁,是一條連續的光譜。國際設計教育機構 Interaction Design Foundation 對這三個概念的定義,正好可以拿來釐清這裡的混淆。

純灰色是一種沒有色相的無彩色,跟原本的紅、藍、綠完全無關;莫蘭迪色不一樣,它仍然保留原本的色相,只是彩度被壓低,所以你還是分得出這是偏藍的莫蘭迪、那是偏綠的莫蘭迪,而不是一片死灰。

粉彩色、馬卡龍色也常被誤認成莫蘭迪色,但兩者的調色機制其實不同。色彩學上,加白、加灰、加黑都能讓彩度降下來,Mozilla 官方文件 MDN Web Docs 就用紅色加白會變成粉紅色這個例子,說明加白會讓一個顏色偏向柔和、去飽和的方向。但加白同時會把明度往上推,所以粉彩、馬卡龍色降了彩度、明度卻偏高,看起來粉嫩明亮;莫蘭迪色的調色邏輯偏向加灰,明度停在中等偏低的區間,看起來就顯得霧沉、內斂,而不是粉嫩。這也是為什麼所有灰色調都是莫蘭迪色是一種誤解,沒有色相的純灰色跟莫蘭迪色是兩回事,莫蘭迪色跟馬卡龍色的差別,也不在灰不灰,而在明度被推高還是壓低。

純灰色沒有色相,莫蘭迪色與粉彩色都保留色相且低彩度,差別在莫蘭迪明度中低顯霧沉、粉彩明度偏高顯粉嫩
莫蘭迪色跟粉彩色的差別不在灰不灰,而在明度被壓低還是被推高。

決定莫蘭迪色調性的兩個原理

莫蘭迪色為什麼看起來灰灰霧霧、卻又耐看,不是因為優雅、高級這種形容詞,而是背後有兩個可以拆開來理解的技術原理在運作,一個是彩度怎麼被壓低,一個是對比怎麼被縮小。搞懂這兩個原理,之後不管遇到哪個顏色組合,你都能自己判斷這算不算莫蘭迪式配色,不必死背色卡。

莫蘭迪色靠兩個原理成立,先把原色彩度壓低,再讓畫面各色的明度與彩度貼近彼此、縮小對比,看起來就統一和諧
莫蘭迪色的耐看來自兩個技術動作:把彩度壓低,再把畫面各色之間的對比縮小。

彩度怎麼被壓低?

彩度就是顏色的純度與鮮豔程度,原色像大紅、寶藍這種高彩度顏色,視覺衝擊力強,很容易變成畫面裡第一眼被看到的焦點,甚至搶走旁邊其他元素的注意力。一旦把灰色或白色調進這個原色,彩度就會往中低值移動,顏色不再是畫面裡最搶眼的主角,反而退成背景般柔和的存在,讓出空間給其他元素被看見。

對比怎麼被縮小?

這裡講的對比,指的是設計與繪畫語境裡,一個畫面或一個空間中各種顏色之間,明度、彩度的差異程度,跟後面會提到的無障礙可讀性用的對比度是兩個不同的概念,這點留到後面應用場景那節再細講,這裡先不混著談。莫蘭迪式配色的做法,是刻意讓畫面裡每個顏色的明度、彩度都貼近彼此,落在相近的區間,色彩之間不互相對抗、不互搶焦點。整體看起來統一、不衝突,這正是耐看在技術面真正的根源。

莫蘭迪色為什麼特別耐看?

彩度壓低、對比縮小,只解釋了莫蘭迪色看起來是什麼樣子。真正的問題是,同樣是低彩度,為什麼特別容易被形容成耐看,而不是無聊、死氣沉沉。這可以從三個角度來理解。

第一,低彩度色彩對視覺神經的刺激較低,長時間盯著看也不容易產生審美疲勞。Adobe Express 就指出,柔和、去飽和的顏色用在背景與圖像上,能降低視覺壓力,甚至帶來讓人平靜的效果,也常被形容成能喚起更平靜的心理狀態,給人安全、熟悉、細膩的感受。

第二,色彩之間彼此靠近、不互搶焦點,帶來的是和諧、不衝突的視覺感受,這正好呼應前面對比原理談到的效果,當一個空間或畫面裡的顏色不互相打架,看的人自然不容易感到煩躁。

第三,莫蘭迪色不追逐當季流行的高飽和色,不像某一年很紅的螢光色、某一季的主打色,退了流行就顯得過時。它的耐看,某種程度上也是因為它從一開始就沒有站在流行週期上。

莫蘭迪色的四個應用場景

懂了彩度和對比這兩個原理,再回頭看莫蘭迪色被用在哪些場景,就不會只是條列哪裡看得到這個顏色,而能看懂它在那個場景裡實際解決了什麼問題。

居家與室內空間

牆面、家具、寢具這類大面積用色如果選擇莫蘭迪色調,能讓整個空間看起來放鬆、沉靜,不會因為顏色彼此衝突而讓人待久了覺得躁。這是莫蘭迪色最早、也最直覺被拿來討論的應用場景,一般住宅裝潢想調和整體氛圍時,通常不需要動用太複雜的配色計劃,只要抓住彩度壓低、明度貼近這兩個原則就成立。

時尚與穿搭

服裝、配件選用莫蘭迪色調,通常比高飽和度的撞色穿搭更容易上手,也更容易顯得質感內斂,因為色彩之間本來就彼此貼近,不需要精算比例也不容易出錯。不過低彩度色系如果穿搭失衡,反而容易顯得沒精神、暗沉,這一點留到後面踩雷風險那節再細談。

品牌識別與包裝設計

品牌若想傳達溫潤、專業、不浮誇的調性,常會用莫蘭迪色系做識別色或包裝主色,低彩度色不容易在視覺上過度張揚,也比較容易跟走高飽和撞色路線的品牌做出安靜的區隔。Adobe Express 就舉了以強調溫和訴求聞名的保養品牌 AVEENO 為例,它在包裝、標籤上用了帶灰調的綠色與燕麥般的米色,呼應產品本身溫和舒緩的訴求;麥當勞後來也把部分門市外觀,從高飽和度的紅黃配色,換成帶灰調的綠色與中性色,讓品牌視覺看起來更貼近自然、有機。

數位介面與網頁設計

網站、App 介面把莫蘭迪色調用在背景色、輔助色上,Adobe Express 就指出,這類色彩用在介面設計上能降低使用者的視覺疲勞,也讓真正重要的內容,像是文字、行動呼籲按鈕,在畫面裡更容易被凸顯出來。一間走簡約風格的線上香氛品牌 Ffern,就只在網站與社群上使用低彩度的中性色調。不過這裡要先埋一個提醒,這跟無障礙對比度是兩回事,也就是用來判讀文字可不可讀的顏色對比標準;如果網頁把重要文字或按鈕也套上低對比的莫蘭迪色,反而可能傷害可讀性,這點留到下一節具體展開。

低對比配色也有踩雷風險

前面應用場景那節留了兩個伏筆,分別是穿搭失衡、以及網頁對比不足,這裡把背後的風險一次拆開講。

第一層是美學風險。如果一個畫面裡每個顏色的彩度、明度都貼得太近、太過缺乏層次,效果就不是和諧,而是顯得髒、顯得沉悶。這其實是對比原理被用過頭的後果,對比從來不是要完全消除,而是要縮小到還留有層次感的範圍;一旦所有顏色都黏在同一個區間,眼睛反而找不到可以停留的焦點。

第二層是可讀性風險,這跟前面提過的無障礙對比度直接相關。Mozilla 官方文件 MDN Web Docs 就提醒,就無障礙的角度來說,對比度通常是越高越好,而且字體越大、筆畫越粗,才能在較低的對比下維持可讀性。換句話說,美學上的低對比,跟無障礙可讀性要求的顏色對比度是兩件事,不能用同一套邏輯處理。網頁上真正需要被看清楚的重要按鈕、警示文字,如果也套上低對比的莫蘭迪色,使用者很可能找不到重點在哪裡。

解法方向並不複雜。Adobe Express 對這點的建議是,把莫蘭迪色系當成畫面的底色,再挑一到兩個彩度較高的顏色當重點色,用來引導使用者的視線該往哪裡看。整個畫面不必、也不該全部低彩度到底,留幾個彩度較高的重點,才不會讓所有顏色的彩度、明度都黏在一起,失去該有的層次。

介面若全套低彩度,重要按鈕會埋進背景難以辨識;保留莫蘭迪底色、只給按鈕一個高彩度重點色,視線才會落到重點
低彩度別用到底:留一到兩個高彩度重點色帶路,重要按鈕才不會被埋進背景。

回到一開始那個視覺矛盾,灰藍色的沙發、燕麥色的地毯、鼠尾草綠的抱枕之所以擺在一起還是和諧,不是巧合,而是這幾個顏色的彩度、明度本來就被調到彼此靠近的區間。莫蘭迪色的本質,從來不是一份固定的色卡,而是降低彩度、縮小對比這兩個判準。搞懂這兩個判準之後,不管下次遇到的是哪一個顏色組合,你都能自己檢視它適不適合走莫蘭迪路線,而不必死記某個特定色號。

資料來源
  1. Muted colours: Meaning, tips & examples — Adobe Express
  2. Giorgio Morandi 1890-1964 — 泰特美術館(Tate)
  3. What is Color Theory? — Interaction Design Foundation
  4. color-mix() CSS function — MDN Web Docs
  5. Color contrast — MDN Web Docs