為何整理設計色彩方法？色彩理解深淺直接影響頁面表現。優秀作品色彩必和諧得體。反思：什麼配色易達標？什麼干擾配色思維？常見干擾：① 僅關注色彩表象 ② 搭配方法不系統 ③ 色彩與構成掌握不到位。

點圖查看大圖。簡述：色相=色彩名稱（紅/藍）；色調=色相+明度+純度綜合呈現。

三大類配色方法框架

本文聚焦（一）色相差形成的配色方式——有主導色彩配色。

1.1 有主導色彩配色：一種色相統御畫面

主色支配統一畫面；輔色可為同色相、鄰近類似色、或色環較遠的撞色/無色彩對比。按主輔色相差分七類：

1.1-1 同色系主導：高度一致感

Twitter 案例：整體藍色統一印象，深淺分載不同信息——白底=用戶內容、淺藍底=回覆、深藍底=可回覆操作。顏色主導信息層次，守住品牌形象。

觀點：顏色差分割頁面層次/模塊，代表不同功能任務屬性。

1.1-2 鄰近色主導：柔和過渡，豐富不單調

ALIDP 案例：高純度色彩用於組件/標題，鄰近色使頁面不單調，降低飽和度用於背景/模塊劃分。

觀點：基於品牌色的鄰近色運用，靈活應用於各類控件。

1.1-3 類似色主導：平靜調和

BENMAPT 案例：紅黃雙色主導，紅用於導航/按鈕/圖標兼輔助主色，偏橙黃用於內容標籤/背景。

觀點：基於品牌色的類似色運用，有主次地用到各控件與主體內容。

1.1-4 中差色主導：對比明快，易呈現高飽和

Facebook 案例：深藍營造空間感/層次，統一傳播品牌形象；中間色綠色按鈕豐富色彩+突出最高任務層級；深藍吊頂導航貫穿全站並引導向下閱讀。

觀點：利用色彩對比突出按鈕任務優先級，增加頁面氛圍。

1.1-5 對比色主導：精準控制面積與氛圍

YouTube 案例：紅色熱鬧體現內容豐富，品牌紅賦予組件/可操作任務色彩貫穿全站；紅=導航指引/分類，藍=登錄按鈕/默認頭像/標題（用戶生成內容）。

觀點：紅藍分別對應系統操作與用戶操作，區分交互/信息可操作性。

1.1-6 中性色主導：內容為王的經典之選

Behance 案例：黑色突出導航/內容模塊區分，品牌藍用於可點擊操作控件（用戶名/標題）。大面積中性色主導，品牌色點睛於重點交互狀態，適合內容型平台站點。

觀點：大面積中性色主導，品牌色畫龍點睛用於重點突出場景。

1.1-7 多色搭配下的主導：延展性極強

Google 案例：四大品牌色按純度比例+黑白灰，衍生千變萬化配色方案，品牌統一感極強。大部分頁面藍色主導，其他三色作輔色分配不同任務屬性，黑白灰作輔助色。平台類站點多色主導延展性極佳。

觀點：Google 設四品牌色，主次比例合理應用於界面，按組件交互狀態分配功能任務。
註：更多精彩教程請關注三聯設計教程欄目。