【色彩學】完全指南|色相環、6 種配色方案與品牌色彩 5 步驟建立法

讀完這篇色彩學指南,你能理解色相環原理、掌握 6 種經典配色方案,並用 5 步驟為自己的品牌建立一套完整的色彩系統。
色彩學 完整指南精選圖片

本文包含合作推廣連結,若您透過連結購買,我們可能獲得佣金,不會影響您的價格。

架站工具推薦
⭐ 編輯首選
全球 43% 網站的架站首選平台
  • 拖拉式編輯器——不需寫程式,直覺式建立專業網站
  • 數千款佈景主題——商業、作品集、部落格一鍵套用
  • 內建 SEO 工具——網站地圖、社群分享、搜尋優化
  • WooCommerce 電商——免費外掛即可開店收款
9.3 / 10 本站評分
全球 4.7 億網站使用 · 免費方案
免費建立網站 免費方案永久使用,隨時升級
月付 NT$80 起的 WordPress 主機
查看方案
視覺化設計 × 內建 CMS × 設計師首選
免費試用

色彩學(Color Theory)是研究色彩的性質、感知與搭配應用的系統性學問。這篇指南從色彩三要素、色相環結構、6 種經典配色方案,一路講到 RGB 與 CMYK 的差異,最後帶你用 5 步驟從零建立品牌色彩系統。 想了解配色工具與調色盤產生器的完整評比,可參考配色網站推薦完整指南

色彩學是什麼?設計師必懂的視覺語言

色彩學(Color Theory)是一套系統性的框架,研究色彩如何被人眼感知、色彩之間如何互動,以及如何在設計中有效運用色彩搭配。它涵蓋了物理學(光的波長)、生理學(人眼如何接收色彩)和心理學(色彩如何影響情緒)三個層面。

對網頁設計師和品牌主來說,色彩學不只是美學問題——它直接影響商業成果。研究顯示,消費者在 90 秒內對產品做出的第一印象中,有 62% 到 90% 是基於顏色。想想看:你能不看 Logo 圖案,光憑顏色就認出 McDonald’s 的黃色、Starbucks 的綠色、Facebook 的藍色嗎?這就是色彩在品牌識別中的力量。

色彩學三大研究層面:物理學(光的波長與色譜)、生理學(人眼錐狀細胞感知)、心理學(色彩情緒聯想與文化意涵)
▲ 色彩學三大研究層面:物理學(光的波長與色譜)、生理學(人眼錐狀細胞感知)、心理學(色彩情緒聯想與文化意涵)

很多人會把「色彩學」和「色彩心理學」搞混。簡單區分:色彩學是整個理論框架,包含色相環、配色理論、色彩模式等;色彩心理學只是色彩學底下的一個應用分支,專門研究顏色對人類情緒和行為的影響。掌握色彩學,你就能同時理解「為什麼這兩個顏色放在一起好看」和「為什麼這個顏色讓人想點擊購買按鈕」。

如果你已經在經營網站,也可以搭配好看的中文字體一起優化視覺呈現。

色彩三要素:色相、明度、彩度一次搞懂

所有色彩都可以用三個維度來描述:色相、明度、彩度。理解這三個要素,你就能精準地溝通任何一個顏色——不再只是說「那個藍藍的」,而是「高彩度、中明度的藍色」。

色彩三要素總覽:色相(Hue)—色彩的種類(紅橙黃綠藍紫)、明度(Value)—色彩的明暗程度(加白變淺、加黑變深)、彩度(Saturation)—色彩的鮮豔程度(高彩度鮮豔、低彩度灰濁)
▲ 色彩三要素總覽:色相(Hue)—色彩的種類(紅橙黃綠藍紫)、明度(Value)—色彩的明暗程度(加白變淺、加黑變深)、彩度(Saturation)—色彩的鮮豔程度(高彩度鮮豔、低彩度灰濁)

色相(Hue)

色相是色彩的「種類」,也就是我們日常說的紅、橙、黃、綠、藍、紫。在色相環上,每個色相佔據一個特定的角度位置——紅色在 0°,黃色在 60°,綠色在 120°,依此類推。

實務上,當你要為品牌選主色時,第一步就是確定色相方向。你想要暖色系(紅、橙、黃)帶來的活力感,還是冷色系(藍、綠、紫)傳遞的專業感?色相的選擇決定了品牌的基本調性。

明度(Value / Brightness)

明度指的是色彩的明暗程度。在任何一個色相上加入白色,就會得到淺色調(Tint);加入黑色,就會得到暗色調(Shade)。同一個藍色,可以是淡淡的天空藍,也可以是深沉的海軍藍——色相沒變,變的是明度。

明度在網頁設計中至關重要,因為它直接影響可讀性。根據 WCAG(網頁內容無障礙指南)的標準,正文文字與背景的對比度至少要達到 4.5:1。這就是為什麼淺灰色文字配白色背景讀起來很吃力——明度對比不夠。

深色模式(Dark Mode)的設計就是明度運用的經典案例。好的深色模式不是簡單地把背景換成純黑、文字換成純白,而是用不同明度的深灰色建立層次感,讓介面有前後景的區分。

明度對比與可讀性:左側「不合格」—淺灰文字配白色背景(對比度 2.1:1)、右側「合格」—深灰文字配白色背景(對比度 7.2:1,符合 WCAG AA 標準)
▲ 明度對比與可讀性:左側「不合格」—淺灰文字配白色背景(對比度 2.1:1)、右側「合格」—深灰文字配白色背景(對比度 7.2:1,符合 WCAG AA 標準)

彩度(Saturation / Chroma)

彩度描述色彩的鮮豔程度。高彩度的顏色看起來純淨、飽滿;低彩度的顏色則偏灰、偏濁。把彩度降到零,任何色相都會變成灰階。

彩度的選擇直接反映品牌個性。科技新創和兒童品牌常用高彩度色彩(想想 Google 的四色 Logo),傳遞活力和創新感;奢侈品牌和高端服務則偏好低彩度(Burberry 的米色、Chanel 的黑白),營造沉穩和精緻感。

實務提醒:網頁設計中避免大面積使用高彩度色彩。全版面的螢光綠或飽和紅會造成視覺疲勞,讓使用者想快速離開。建議將高彩度色彩保留給 CTA 按鈕或重點標示,大面積區域使用降低彩度的版本。

色相環完全解析:結構、原色與互動應用

色相環(Color Wheel)是色彩學最重要的工具。理解它的結構,你就能系統性地找出和諧的配色組合,而不是靠直覺碰運氣。

色相環的基本結構

標準的 12 色相環由三個層級的顏色組成:

原色(Primary Colors):紅、黃、藍——這三個顏色無法由其他顏色混合而成,是所有色彩的基礎。這裡指的是傳統美術的 RYB 色彩三原色體系。

二次色(Secondary Colors):橙(紅+黃)、綠(黃+藍)、紫(藍+紅)——由兩個原色等量混合產生。

三次色(Tertiary Colors):紅橙、黃橙、黃綠、藍綠、藍紫、紅紫——由一個原色和相鄰的二次色混合產生,共 6 個。

12 色相環結構:頂層「原色(3)」—紅、黃、藍;中層「二次色(3)」—橙、綠、紫;底層「三次色(6)」—紅橙、黃橙、黃綠、藍綠、藍紫、紅紫
▲ 12 色相環結構:頂層「原色(3)」—紅、黃、藍;中層「二次色(3)」—橙、綠、紫;底層「三次色(6)」—紅橙、黃橙、黃綠、藍綠、藍紫、紅紫

這裡要特別釐清一個常見混淆:傳統美術使用的色彩三原色是 RYB(紅、黃、藍),但數位螢幕使用的是 RGB(紅、綠、藍)。兩者的「原色」不同,因為一個是顏料的減法混色,一個是光的加法混色。我們在後面的 RGB vs CMYK 段落會詳細說明。

在色相環上,暖色系(紅、橙、黃及其鄰近色)佔據一半,冷色系(綠、藍、紫及其鄰近色)佔據另一半。暖色在視覺上有「前進感」,冷色有「後退感」——這個特性在網頁設計中很實用,例如用暖色做 CTA 按鈕讓它更突出。

如何讀懂色相環(互動工具說明)

理論看再多,不如自己動手轉一轉色相環。我們推薦使用 Adobe Color(color.adobe.com)這個免費的線上工具:

  1. 打開 Adobe Color,選擇「色輪」模式
  2. 在左側選擇配色規則(如「互補」「三角」等)
  3. 拖動色相環上的控制點,即時看到配色組合的變化
  4. 滿意後可直接複製 HEX 色碼,貼到你的設計工具中

另外,如果你想要更多配色靈感,可以參考我們整理的配色網站推薦,裡面有更多免費工具的詳細評測。

6 種經典配色方案:從色相環直接套用

掌握了色相環的結構,接下來就是最實用的部分——6 種經典配色方案。每一種都是從色相環上的幾何關係推導出來的,各有適合的應用場景。

6 種經典配色方案總覽:單色配色(Monochromatic)、類似色配色(Analogous)、互補色配色(Complementary)、分割互補配色(Split Complementary)、三角配色(Triadic)、四角配色(Tetradic
▲ 6 種經典配色方案總覽:單色配色(Monochromatic)、類似色配色(Analogous)、互補色配色(Complementary)、分割互補配色(Split Complementary)、三角配色(Triadic)、四角配色(Tetradic)

單色配色(Monochromatic)

定義:只使用一個色相,透過調整明度和彩度來創造變化。

這是最安全、最容易上手的配色方式。因為所有顏色都來自同一個色相,天生就是和諧的。Dropbox 的品牌網站就是單色配色的好案例——整站以藍色為核心,用深藍做導航列和標題、中藍做主要區塊、淺藍做背景和卡片底色,統一又有層次。

適合場景:企業官網、專業服務、極簡風格設計。

類似色配色(Analogous)

定義:使用色相環上相鄰的 2 到 3 個色相。

類似色配色給人自然、舒適的感覺,因為這些顏色在自然界中經常一起出現(想想秋天的紅、橙、黃)。美國有機超市 Whole Foods 就是典型案例——品牌視覺以綠色為核心,搭配黃綠和深綠的類似色組合,強化「自然、健康」的品牌印象。環保品牌和健康產業特別適合這類綠色系的類似色搭配。

注意:類似色配色容易缺乏對比,建議選一個色相為主色,其餘為輔助,並確保文字與背景之間有足夠的明度差異。

互補色配色(Complementary)

定義:使用色相環上正對面的兩個顏色(相距 180°)。

互補色配色的視覺張力最強——紫色配黃色、紅色配綠色、藍色配橙色。電商促銷頁面經常使用這種高對比配色來吸引注意力。

注意:大面積使用互補色會造成視覺衝突。建議採用 70/30 比例——主色佔 70%,互補色只用在重點元素(按鈕、標題、圖示)上。我們團隊在設計促銷 Landing Page 時,就是用深紫色為主背景、亮黃色做 CTA 按鈕,點擊率比全紫色版本高了不少。

分割互補配色(Split Complementary)

定義:選一個主色,然後取其互補色兩側的鄰近色。

這是互補色配色的「溫和版」。它保留了對比感,但因為避開了正對面的直接衝突,視覺上更柔和。Firefox 的品牌配色就運用了類似的邏輯——以橙色為主色,搭配紫藍和黃色作為輔助,既有活力又不會過於刺眼。這種方案非常適合配色新手——既不會太單調,也不容易出錯。

適合場景:餐飲品牌、生活風格網站、需要活潑但不刺眼的設計。

三角配色(Triadic)

定義:色相環上等距的三個顏色(各相距 120°)。

三角配色色彩豐富、活潑,常見於兒童品牌、創意產業和遊戲介面。經典的紅、黃、藍三角配色就是超人的配色方案,而 Burger King 的品牌色彩(紅、藍、黃)也是三角配色的商業應用。

注意:三個顏色都很搶眼時容易雜亂,建議讓一個顏色當主角(佔最大面積),其餘兩色做點綴。

四角配色(Tetradic / Square)

定義:色相環上等距的四個顏色(各相距 90°)。

四角配色是最豐富也最難駕馭的方案。四個顏色提供了極大的變化空間,但也最容易失控。Google 的品牌配色(藍、紅、黃、綠)就是四角配色的經典案例——四個高彩度顏色同時出現,但透過 Logo 中嚴格的面積控制和留白,避免了視覺混亂。

實務建議:選一個顏色為絕對主色(佔 60% 以上面積),一個為輔色,剩下兩個只用在小面積的強調元素上。如果你是配色新手,建議先從單色或類似色開始練習,等熟悉色彩比例後再挑戰四角配色。

以下是 6 種配色方案的快速比較:

配色方案 色相數量 難易度 適用場景 推薦產業
單色配色 1 ⭐ 最簡單 企業官網、極簡設計 科技、金融、法律
類似色配色 2-3 ⭐⭐ 簡單 自然風格、品牌形象 環保、健康、食品
互補色配色 2 ⭐⭐⭐ 中等 促銷頁面、CTA 強調 電商、娛樂、運動
分割互補配色 3 ⭐⭐ 簡單 多元但和諧的設計 餐飲、生活風格
三角配色 3 ⭐⭐⭐ 中等 活潑、創意設計 兒童、遊戲、教育
四角配色 4 ⭐⭐⭐⭐ 困難 複雜視覺、多元素設計 媒體、藝術、節慶

色彩心理學:每個顏色傳遞的品牌訊息

了解配色方案後,下一個問題是:該選哪個色相當主色?這就需要色彩心理學的知識了。每個顏色都會觸發特定的情緒聯想,而這些聯想會影響消費者對品牌的感知。

8 大色彩心理聯想:紅色(熱情、緊迫感)、橙色(活力、友善)、黃色(樂觀、注意力)、綠色(自然、成長)、藍色(信任、專業)、紫色(創意、高貴)、黑色(奢華、權威)、白色(純淨、簡約)
▲ 8 大色彩心理聯想:紅色(熱情、緊迫感)、橙色(活力、友善)、黃色(樂觀、注意力)、綠色(自然、成長)、藍色(信任、專業)、紫色(創意、高貴)、黑色(奢華、權威)、白色(純淨、簡約)
顏色 情緒聯想 代表品牌 適用產業
紅色 熱情、緊迫、興奮 Coca-Cola、YouTube 餐飲、娛樂、促銷
橙色 活力、友善、創意 Hermès、Shopee 電商、社群、新創
黃色 樂觀、溫暖、注意力 McDonald’s、IKEA 食品、零售、兒童
綠色 自然、健康、成長 Starbucks、Spotify 環保、健康、金融
藍色 信任、專業、穩定 Facebook、Samsung 科技、金融、醫療
紫色 創意、高貴、神秘 Yahoo、Twitch 美妝、創意、奢侈品
黑色 奢華、權威、經典 Chanel、Nike 時尚、汽車、高端服務
白色 純淨、簡約、空間感 Apple、Tesla 科技、醫療、極簡品牌

台灣在地文化補充:色彩心理學不是放諸四海皆準的。在台灣,紅色除了代表熱情,更有「喜氣」和「好運」的強烈文化意涵——過年紅包、婚禮佈置都離不開紅色。白色則有雙重性:在西方文化中代表純潔(婚紗),但在台灣傳統中也與喪禮相關。如果你的品牌主要面向台灣市場,這些文化脈絡不能忽略。

跨國品牌的色彩文化差異:如果你的品牌有跨國市場需求,色彩的文化意涵差異更需要謹慎處理。以下是幾個常見的跨國場景:

  • 紅色:在台灣和中國代表喜氣、好運,在東南亞多數國家(如越南、泰國)同樣有吉祥意涵,但在南非部分文化中紅色與哀悼相關。
  • 綠色:在伊斯蘭文化中是神聖的顏色,與先知穆罕默德相關,中東市場使用綠色能傳遞正面聯想;但在某些南美洲國家,綠色可能與死亡有關。
  • 白色:在歐美代表純潔和婚禮,在台灣、日本、韓國等東亞文化中則與喪禮連結。如果你的品牌以白色為主色並面向東亞市場,需要透過其他設計元素(如排版風格、圖片選擇)來引導正面聯想。
  • 黃色:在多數亞洲文化中代表皇室和尊貴(如泰國),但在法國和拉丁美洲部分地區可能帶有嫉妒的負面意涵。

實務建議:進入新市場前,先做一輪當地消費者的色彩感知測試(即使只是小規模的問卷調查),不要假設你在台灣市場成功的品牌色彩能直接移植到其他文化。

暖色系(紅、橙、黃)整體上更容易引起注意、激發行動,適合用在需要使用者快速反應的場景(如購買按鈕、限時優惠)。冷色系(藍、綠、紫)則讓人感到放鬆和信任,適合需要使用者深度閱讀或做重大決定的場景(如金融服務、醫療資訊)。

如果你正在學習更完整的使用者體驗設計,Coursera 上有 Google 的 UX 設計課程,其中就包含色彩在介面設計中的應用模組。

RGB vs CMYK:數位與印刷的色彩模式差異

如果你曾經在螢幕上調好一個漂亮的品牌色,印出來卻發現顏色完全不對——恭喜你,你遇到了 RGB 和 CMYK 的色域差異問題。

RGB:螢幕的色彩語言

RGB 代表紅(Red)、綠(Green)、藍(Blue),是一種「加法混色」模式。螢幕上的每個像素都由這三種光混合而成——三色全開是白色,全關是黑色。RGB 的色域(能顯示的顏色範圍)比較廣,可以呈現非常鮮豔的螢光色。

所有網頁設計、社群媒體圖片、App 介面都使用 RGB 模式。

CMYK:印刷的色彩語言

CMYK 代表青(Cyan)、洋紅(Magenta)、黃(Yellow)、黑(Key/Black),是一種「減法混色」模式。印刷時,油墨吸收(減去)特定波長的光,反射剩餘的光到你的眼睛。CMYK 的色域比 RGB 窄,這就是為什麼螢幕上那個超鮮豔的螢光藍,印出來會變得暗沉。

名片、海報、包裝、型錄等所有實體印刷品都使用 CMYK 模式。

RGB 與 CMYK 色域比較:RGB 圈(較大,涵蓋螢光色、高飽和色)、CMYK 圈(較小,印刷可呈現範圍)、重疊區域(兩者都能準確呈現的顏色)
▲ RGB 與 CMYK 色域比較:RGB 圈(較大,涵蓋螢光色、高飽和色)、CMYK 圈(較小,印刷可呈現範圍)、重疊區域(兩者都能準確呈現的顏色)

HEX 色碼是什麼?

HEX 色碼是 RGB 的另一種表示法,用 6 位十六進位數字表示。例如 #FF5733 中,FF 是紅色值(255)、57 是綠色值(87)、33 是藍色值(51)。HEX 是網頁設計師最常用的色碼格式,因為它可以直接寫在 CSS 裡。

比較項目 RGB CMYK
混色原理 加法混色(光) 減法混色(油墨)
用途 螢幕顯示(網頁、App、社群) 實體印刷(名片、海報、包裝)
色域範圍 較廣,可呈現螢光色 較窄,鮮豔色會偏暗
色碼格式 RGB(255, 87, 51) 或 HEX #FF5733 C:0 M:66 Y:80 K:0
設計軟體設定 Photoshop/Figma 預設 Illustrator 印刷模式

設計師實務建議:品牌色彩規範文件中,務必同時記錄 RGB(含 HEX)、CMYK,以及 Pantone 色號。Pantone 是印刷業的標準色彩系統,能確保不同印刷廠印出來的顏色一致。如果你的品牌需要架設網站,了解域名SSL 憑證的基礎知識也同樣重要。

5 步驟挑選品牌主色:從零建立色彩系統

理論講完了,現在進入實戰。以下是我們團隊實際幫客戶建立品牌色彩系統時使用的 5 步驟流程。

品牌色彩建立 5 步驟:Step 1 確認品牌個性與受眾→Step 2 從色彩心理學選主色方向→Step 3 用色相環建立配色組合→Step 4 測試可讀性與無障礙→Step 5 建立品牌色彩規範文件
▲ 品牌色彩建立 5 步驟:Step 1 確認品牌個性與受眾→Step 2 從色彩心理學選主色方向→Step 3 用色相環建立配色組合→Step 4 測試可讀性與無障礙→Step 5 建立品牌色彩規範文件

Step 1 — 確認品牌個性與目標受眾

在打開任何配色工具之前,先回答這些問題:

  • 用 3 個形容詞描述你的品牌(例如:專業、溫暖、創新)
  • 你的目標受眾是誰?(年齡層、職業、偏好風格)
  • 你的競品都用什麼顏色?

最後一點特別重要。如果你的產業中所有競品都用藍色(金融業很常見),你可以選擇跟隨(藍色確實傳遞信任感),也可以刻意差異化(用綠色或橙色突圍)。兩種策略都有成功案例,關鍵是有意識地做選擇。

Step 2 — 從色彩心理學選定主色方向

根據 Step 1 的品牌個性,對照前面的色彩心理學表格,選出 1 到 2 個候選色相。

例如:品牌個性是「專業、創新、值得信賴」→ 藍色系是首選,紫色系可以作為備案。

Step 3 — 用色相環建立配色組合

確定主色後,用色相環選擇適合的配色方案。這裡要介紹一個非常實用的法則:60-30-10 色彩比例法則

  • 60% 主色:品牌的核心色彩,用在最大面積的區域(背景、主要區塊)
  • 30% 輔色:支撐主色的第二色彩(導航列、次要區塊、圖示)
  • 10% 強調色:用在最需要吸引注意力的地方(CTA 按鈕、重要連結、警示訊息)
60-30-10 色彩比例法則:主色 60%(背景、大面積區塊)、輔色 30%(導航、次要元素)、強調色 10%(CTA 按鈕、重點標示)
▲ 60-30-10 色彩比例法則:主色 60%(背景、大面積區塊)、輔色 30%(導航、次要元素)、強調色 10%(CTA 按鈕、重點標示)

我們團隊在設計網站時,幾乎每次都從 60-30-10 開始,再根據實際數據微調。微調的判斷依據通常有兩種:一是 A/B 測試——例如把強調色的佔比從 10% 提高到 15%,觀察 CTA 點擊率是否提升;二是熱點圖分析(用 Hotjar 等工具),觀察使用者的視線是否被正確引導到重點區域。如果熱點圖顯示使用者忽略了 CTA 按鈕,可能需要提高強調色的對比度或面積;如果使用者反映頁面「看起來很累」,則可能需要降低高彩度色彩的佔比。

Step 4 — 測試可讀性與無障礙標準

選好配色後,務必測試文字在背景色上的可讀性。使用 WebAIM Contrast Checker(webaim.org/resources/contrastchecker/)這個免費工具,輸入文字色和背景色的 HEX 色碼,它會告訴你對比度是否符合 WCAG 標準:

  • WCAG AA 標準:正文對比度至少 4.5:1,大標題至少 3:1
  • WCAG AAA 標準(更嚴格):正文至少 7:1,大標題至少 4.5:1

如果你使用 Figma 做設計,可以安裝 Stark 外掛,直接在設計稿中檢查對比度,不需要切換到其他工具。如果你想深入學習 Figma 的操作,Coursera 上也有相關的入門課程。

Step 5 — 建立品牌色彩規範文件

最後一步,把所有色彩決策記錄成一份正式的品牌色彩規範文件。這份文件應該包含:

每個顏色的完整色碼

  • 主色:HEX #2563EB / RGB(37, 99, 235) / CMYK(84, 58, 0, 8) / Pantone 2728 C
  • 輔色:(同上格式)
  • 強調色:(同上格式)

使用規則

  • 主色用在哪些元素上(Logo、標題、主要按鈕)
  • 輔色用在哪些元素上(次要按鈕、邊框、圖示)
  • 強調色用在哪些元素上(CTA、警示、連結 hover 狀態)
  • 禁止的色彩組合(例如:強調色不可做大面積背景)

案例:我們曾協助一個小型電商品牌建立色彩系統。原本他們的網站用了 7 種以上的顏色,頁面看起來雜亂無章。經過 5 步驟流程,我們把色彩精簡為主色(深藍)、輔色(淺灰藍)、強調色(珊瑚橙),並建立明確的使用規則。改版後,頁面的視覺一致性大幅提升,使用者在產品頁的停留時間也增加了。

如果你想要一個能快速套用品牌色彩的網站平台,Squarespace 的模板就內建了品牌色彩面板功能,讓你輸入 HEX 色碼後一鍵套用到全站。

色彩學工具推薦:從配色到網站建置一站完成

以下是我們團隊實際使用過的工具,依照用途分類推薦。

配色工具

Adobe Color(color.adobe.com):功能最完整的免費配色工具。支援所有 6 種配色方案的色相環互動操作,可以從照片中擷取配色,還能直接匯出色票到 Adobe 系列軟體。如果你只選一個配色工具,選這個。

Coolors(coolors.co):按空白鍵就能隨機生成 5 色配色方案,適合需要快速找靈感的時候。支援鎖定喜歡的顏色,只隨機替換其他色。

Paletton(paletton.com):視覺化程度最高的色相環工具,特別適合初學者理解不同配色方案的幾何關係。

想看更多配色工具的詳細評測和操作教學,可以參考我們的配色網站推薦專文。

Squarespace — 內建色彩系統的網站建置平台

如果你不只是要配色,而是要把品牌色彩實際應用到網站上,Squarespace 是我們特別推薦的選擇。原因很簡單:它是少數把色彩系統直接內建到平台中的網站建置工具。

我們團隊測試過 Squarespace 的 Brand Colors 功能,它的運作方式是這樣的:

  1. 在網站設定中輸入你的品牌主色 HEX 色碼
  2. Squarespace 會自動生成一組互補色和輔助色建議
  3. 選定後,這組色彩會自動套用到全站的按鈕、標題、背景、連結等元素
  4. 如果你換了品牌色,全站配色會同步更新——不需要逐頁修改

Squarespace 提供四種方案:Personal 方案每月 NT$480 起、Business 方案每月 NT$830 起、Commerce Basic 每月 NT$880 起、Commerce Advanced 每月 NT$1,520 起(以上為年繳價格,實際費用請至 Squarespace 官網查看最新定價,匯率波動可能影響台幣換算金額)。所有方案都包含品牌色彩面板功能。

對於非設計背景的創業者來說,這個功能省下了大量時間。你不需要懂 CSS,也不需要手動調整每個元素的顏色——Squarespace 的模板已經預先優化了色彩搭配的層次和對比度。(推薦試試 Squarespace 的 14 天免費試用,不需要信用卡,直接體驗品牌色彩面板的操作。)

🎁 年繳方案省 20% (限時) ⭐ 4.7 / 5

Squarespace 網站架設平台

首次付款省 20% 折扣——年繳方案相當於免費用 2.4 個月
  • 🎨 拖拉式編輯器——數百種設計師級模板,零程式碼
  • 🛒 內建電商功能——產品上架、金流、庫存一站搞定
  • 📈 SEO 工具——自動 Sitemap、SSL、搜尋引擎優化
  • 📱 自適應設計——手機、平板、桌機自動完美呈現

14 天免費試用 · 不需信用卡 · 首次付款 20% OFF

對比度與無障礙工具

WebAIM Contrast Checker:免費線上工具,輸入兩個 HEX 色碼就能檢查對比度是否符合 WCAG 標準。每次選完配色後都應該跑一次。

Stark(Figma 外掛):如果你用 Figma 做設計,Stark 可以直接在設計稿內檢查色彩對比度和色盲模擬,不需要離開設計環境。

以下是工具的快速比較:

工具名稱 類型 免費/付費 主要功能 適合對象
Adobe Color 配色工具 免費 色相環互動、照片取色、匯出色票 所有設計師
Coolors 配色工具 免費(進階付費) 隨機配色生成、鎖定色彩 需要快速靈感者
Paletton 配色工具 免費 視覺化色相環、配色預覽 色彩學初學者
Squarespace 網站建置 付費(NT$480/月起,14 天免費試用) 品牌色彩面板、一鍵全站套用 重視品牌視覺的創業者
WebAIM 無障礙檢查 免費 WCAG 對比度檢查 網頁設計師
Stark Figma 外掛 免費(進階付費) 設計稿內對比度檢查、色盲模擬 Figma 使用者

如果你的品牌網站需要更進階的架設方案,也可以參考我們的 CMS 內容管理系統指南,了解不同平台的優缺點。

結論

回顧本文的重點:

  • 色彩三要素(色相、明度、彩度)是描述任何顏色的基礎框架,三者缺一不可
  • 色相環是配色的核心工具,12 色由原色、二次色、三次色三個層級組成
  • 6 種經典配色方案各有適合的場景——新手建議從單色或類似色開始,進階再挑戰三角或四角配色
  • RGB 用於螢幕、CMYK 用於印刷,品牌色彩規範必須同時記錄兩種色碼
  • 60-30-10 法則是分配色彩比例最實用的起點

你的下一步行動:打開 Adobe Color,用色相環試試本文介紹的 6 種配色方案。找到喜歡的組合後,用 WebAIM Contrast Checker 確認對比度符合 WCAG 標準。如果你準備好把品牌色彩套用到實際網站上,Squarespace 的品牌色彩面板讓你輸入 HEX 色碼就能一鍵套用全站——14 天免費試用,不需要信用卡,現在就能開始。

🎁 年繳方案省 20% (限時) ⭐ 4.7 / 5

Squarespace 網站架設平台

首次付款省 20% 折扣——年繳方案相當於免費用 2.4 個月
  • 🎨 拖拉式編輯器——數百種設計師級模板,零程式碼
  • 🛒 內建電商功能——產品上架、金流、庫存一站搞定
  • 📈 SEO 工具——自動 Sitemap、SSL、搜尋引擎優化
  • 📱 自適應設計——手機、平板、桌機自動完美呈現

14 天免費試用 · 不需信用卡 · 首次付款 20% OFF

色彩學常見問題 FAQ

色彩學和色彩心理學一樣嗎?

不一樣。色彩學(Color Theory)是研究色彩性質、混色原理和配色方法的完整理論框架,涵蓋色相環、配色方案、色彩模式(RGB/CMYK)等。色彩心理學是色彩學底下的一個應用分支,專門研究顏色如何影響人類的情緒、感知和行為。簡單說,色彩學告訴你「怎麼配色」,色彩心理學告訴你「為什麼這個顏色讓人想買」。

配色要選幾個顏色最剛好?

建議採用 3 色原則:1 個主色 + 1 個輔色 + 1 個強調色,搭配 60-30-10 的比例分配。最多不要超過 5 個顏色(含黑、白、灰等中性色)。顏色越少,品牌識別度越高——想想 Coca-Cola 只靠紅白兩色就建立了全球最強的品牌色彩印象。

網頁設計和印刷品的顏色為什麼會有色差?

因為螢幕使用 RGB(光的加法混色),印刷使用 CMYK(油墨的減法混色),兩者的色域範圍不同。RGB 能顯示的鮮豔色彩(尤其是螢光色和高飽和藍綠色),超出了 CMYK 的印刷能力。解決方法是在設計階段就用 CMYK 模式預覽印刷效果,並在品牌規範中同時記錄 RGB 和 CMYK 色碼。

暖色系和冷色系怎麼搭配?

最安全的方式是以一個色溫為主、另一個為點綴。例如:冷色系(藍色)為主色佔 80% 以上面積,暖色系(橙色)只用在 CTA 按鈕和重點標示上。避免暖冷各佔一半,那樣容易造成視覺拉扯感。分割互補配色方案就是一個很好的暖冷搭配框架。

色彩學對染髮和調色也適用嗎?

色相環的基本原理是通用的。在染髮領域,互補色原理被用來「中和」不想要的色調——例如用紫色洗髮精中和金髮的黃色調(紫色和黃色是互補色)。不過,染髮的色彩學涉及更多化學因素(髮質、底色、氧化劑濃度),建議諮詢專業美髮師。本文的配色理論主要針對設計和品牌應用。

更多精彩內容

WordPress.com
用 WordPress.com 免費建立你的網站
拖拉式編輯 · 數千款主題 · SEO 工具 · 免費方案