色彩是無聲的品牌大使

用戶對網站的第一印象 90% 由色彩決定 (CCICOLOR研究)。色彩不僅是裝飾，更是信息層級指引、情感共鳴觸發、品牌資產沉澱、無障礙合規的綜合工程系統。

色彩心理速查：為設計決策提供科學依據

色系	核心心理聯想	典型應用場景	慎用場景
紅系	熱情、緊急、活力、警示、食慾	電商促銷、錯誤狀態、CTA主按鈕、食品餐飲	醫療/金融/工具類大面積背景
橙/黃系	樂觀、創意、警示、活力、親和	兒童教育、創意機構、警告提示、旅遊户外	大面積高純度背景(極易視疲勞)、專業嚴肅領域
綠系	自然、健康、安全、成長、財富、平靜	醫療健康、金融理財、環保農業、成功狀態、綠色通道	紅綠色盲用戶區分紅綠狀態時
藍系	專業、信任、科技、冷靜、理性、抑制食慾	SaaS/科技/金融/醫療/企業服務/社交平台	食品/餐飲/兒童類大面積背景
紫系	高貴、神秘、創意、靈性、女性	美妝時尚、高端奢侈、創意設計、遊戲娛樂	嚴肅政務/工業/醫療核心流程
中性系 (黑白灰)	極簡、專業、現代、權威、留白	所有類型輔助色、極簡風主調、內容密集型背景	兒童/娛樂/活力型品牌主調

配色系統構建四步法

步驟 1：確立品牌主色

• 從品牌關鍵詞提煉 (如：專業→藍、健康→綠、活力→橙)
• 提取主色 HSL 值，構建 10級色階 (50-950)：
  --brand-50 (最淡背景) → --brand-500 (標準主色) → --brand-950 (深色文字/邊框)
• 驗證：--brand-500 對白字/黑字對比度、色盲模擬、跨屏幕色域一致性

步驟 2：定義功能色語義化

:root {
  /* 功能色 - 語義命名，而非色值命名 */
  --color-success: #10b981;   /* 綠系 */
  --color-warning: #f59e0b;   /* 琥珀/橙系 */
  --color-error:   #ef4444;   /* 紅系 */
  --color-info:    #3b82f6;   /* 藍系 */
  
  /* 中性色階 - 灰度系統 */
  --gray-50:  #f9fafb;  --gray-100: #f3f4f6; ... --gray-900: #111827; --gray-950: #030712;
  
  /* 表面色 - 適配深色模式 */
  --surface-1: var(--gray-50);   --surface-2: var(--gray-100);
  --surface-3: var(--gray-200);
  --text-primary: var(--gray-900); --text-secondary: var(--gray-600);
  --border-color: var(--gray-200);
}

步驟 3：輔助色/裝飾色克制引入

• 插畫/插圖/營銷頁專用色，不進入核心UI組件系統
• 數量 ≤ 3組，各自建立獨立色階
• 命名區分：--illustration-*、--marketing-*

步驟 4：深色模式適配 (媒體查詢 + CSS變量)

@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: var(--gray-900);
    --surface-2: var(--gray-800);
    --surface-3: var(--gray-700);
    --text-primary: var(--gray-50);
    --text-secondary: var(--gray-400);
    --border-color: var(--gray-700);
    /* 主色在深色模式下通常需提亮 1-2 級 */
    --brand-500: var(--brand-400);
  }
}

實戰配色技巧庫

1. 60-30-10 法則： 60%主背景(中性) + 30%次要色(品牌色/大面積區塊) + 10%強調色(CTA/關鍵數據/圖標)
2. 單色變奏： 一個色相 + 明度/飽和度變化 = 統一且豐富
3. 鄰近色和諧： 色環 ±30° 範圍內選色，天然和諧
4. 互補色點睛： 主色 90% + 互補色 10% (如藍色界面 + 橙色CTA)
5. 黑色藝術： 純黑 #000 視覺刺耳，用 #1a1a1a / #0d0d0d 替代；邊框用 rgba(0,0,0,0.08) 替代硬線
6. 背景原則： 素淡、低飽和、高明度 (或深色模式低明度)；嚴禁紋理背景干擾閱讀

無障礙合規硬指標

• 正文文字對比度 ≥ 4.5:1 (AA) / 7:1 (AAA)
• 大號文字 (18pt+ / 14pt+bold) ≥ 3:1
• UI組件邊框/圖標對比度 ≥ 3:1
• 不以色彩為唯一信息傳遞手段 (必須 + 圖標/文字/形狀/紋理)
• 工具驗證：axe-core / Stark / Colour Contrast Analyser / Figma插件

建立色彩設計系統，而非挑幾個好看的色值。系統化的色彩語言，讓設計決策可追溯、可復用、可擴展、可驗證。