前言：設計配色不靠猜，靠圖片科學提取

優秀的配色方案來源於觀察。本教學示範如何從一張色彩豐富、明暗對比明顯的圖片中，系統性提取並建立**主色調、輔助色、對比色、高光色、陰影色**五色完整配色體系，直接應用於網頁/平面設計。

步驟一：選圖標準

• 色調變化豐富
• 明暗對比明顯
• 避免黑白/低對比度圖片（提取出的方案不鮮明）

步驟二：吸取色彩——先找主色調

**主色調 = 畫面分布面積最大、最具代表性的顏色**。
本圖中藍色分布最廣（天空、湖泊、霧氣），且呈現深淺層次 → 吸取**中度灰藍**作為主色調（非最深非最淺，過渡最均衡）。

步驟三：建立配色方案文件

新建白底文件，用畫筆繪製圓形色塊記錄每個提取色。

主色調應用範圍

網頁大面積區域：背景、大型形狀元素、主視覺色塊。

步驟四：輔助色——冷暖平衡的關鍵

**輔助色 = 能烘托主色調、產生呼應的相反色溫顏色**。
主色調為冷藍 → 尋找暖色系 → 吸取**紅色屋頂的暖橙色**，冷暖均衡。

輔助色應用範圍

字體、小面積裝飾元素、按鈕、圖標等需吸引視線但非主導的區域。

輔助色若形成互補色（色環相對位置）

• 紅 vs 綠、紫 vs 橙、藍 vs 黃
• 產生強烈對比，具**強調/凸顯**功能，關鍵 CTA 元素可用。

步驟五：對比色（可選第三色）

若輔助色對比不夠強，可在色環上直接找主色調的**對比色（互補色）**。
主色調藍 → 對比色黃 → 作為第三種強調色。
*注意：色彩種類建議控制在 3 個以內（主、輔、強調），避免視覺混亂。*

步驟六：高光色與陰影色——主色調的明度延伸

不再依賴吸管，基於主色調計算：

• 高光色 = 主色調 + 白色（提高亮度、降低飽和度） → 第 4 色
• 陰影色 = 主色調 + 黑色（降低亮度、增加濃度） → 第 5 色

高光/陰影色應用

作為修飾色慎用。可選一者作「中性色」輔助版面層次。黑白變幻出的層次最豐富，最終方案中再視實際微調。

步驟七：確定最終配色方案（≤3 主色）

整理為：主色（藍）、輔助色（暖橙）、高光/陰影色（擇一）。**即使三色，色調不偏離整體藍色基調**，保證視覺統一性。

步驟八：配色實戰運用原則

• 黑白灰靈活運用但**不干擾主色調和諧感**
• 大面積底色避免純白，**極低透明度主色調疊加** → 優雅高級感

總結：從圖片到設計的配色科學流程

1. 選對圖（豐富色彩、明暗對比）
2. 提主色（最大面積分布色）
3. 找輔色（冷暖對比/互補）
4. 定強調（互補色/對比色）
5. 算高光/陰影（主色調明度延伸）
6. 控總數（≤3 主色系）
7. 實戰用（黑白灰克制、底色染主色）

**這不是靈感閃現，是可複製的科學配色方法論。**