顏色比你想像的更有力量

一項由 Institute for Color Research 的研究指出：人們對一個品牌的評價，有高達 62–90% 是由顏色單獨驅動的。

這不是說其他設計元素不重要，而是說：在訪客來不及讀你的文案之前，顏色已經在傳遞信號了。

在官網設計中，配色做對了，會讓整個頁面感覺「對」；做錯了，即使排版再好、文案再強，訪客還是會感覺哪裡不對勁。

色彩心理學：各色系傳遞的信息

藍色系

  • 可信賴、專業、沉穩、科技感
  • 適用：金融、科技、法律、B2B 服務
  • 台灣例子：中華電信、台新銀行

橘/紅色系

  • 活力、熱情、行動感、親切
  • 適用：餐飲、快消、電商、零售促銷
  • 使用注意：大面積使用容易讓人疲勞，適合作為強調色

綠色系

  • 自然、健康、永續、成長
  • 適用：有機品牌、環保、健康食品、財務成長

黑/深色系

  • 高端、極簡、時尚、精緻感
  • 適用：奢品、設計師品牌、高端服務

暖米/米白色系

  • 溫暖、手作感、質感、放鬆
  • 適用：手工品牌、婚禮、美食、生活風格品牌

品牌色盤的三個層次

一個完整的品牌色盤不是只有一個「品牌色」，而是三個層次的配合：

第一層：主色（Primary Color）

你的品牌最代表性的顏色，通常出現在 Logo、標題、主要按鈕。

選擇原則：

  • 要能傳遞你的品牌個性
  • 在白色和深色背景上都要清晰可辨
  • 在不同裝置和印刷媒材上要保持一致

第二層：輔助色（Secondary Color）

用來支撐主色，為設計增加層次感。通常是主色的互補色或同色系的深淺變化。

常見策略：

  • 60-30-10 法則：60% 中性色（白/灰）、30% 主色、10% 強調色
  • 類似色組合：選色輪上相鄰的顏色，整體感和諧
  • 互補色對比：選色輪對面的顏色，視覺張力強

第三層：強調色（Accent Color）

用於 CTA 按鈕、重要標記、hover 狀態等需要「跳出來」的地方。

強調色的原則：

  • 在整個頁面中只用在最重要的地方
  • 要與主色有足夠的對比度
  • 如果主色是冷色，強調色可以考慮暖色（反之亦然）

對比度：不能忽視的可及性標準

WCAG 2.1 的對比度標準要求：

  • 正常文字：色彩對比度至少 4.5:1
  • 大字體（18px 以上）：至少 3:1
  • 按鈕等互動元素：至少 3:1

為什麼這件事重要？

  • 法律面：部分國家要求網站符合可及性標準
  • SEO 面：Google 評估頁面品質時會考量可及性
  • 用戶體驗面：弱視用戶、在戶外強光下瀏覽的用戶都會受益

工具推薦：Coolors Contrast Checker、WebAIM Contrast Checker

品牌色的實際執行

在 Tailwind CSS 中建立品牌色系統

// tailwind.config.js
theme: {
  extend: {
    colors: {
      brand: {
        50: '#fdf8f0',
        100: '#faefd9',
        500: '#e8a020',
        600: '#d08818',
        700: '#b87010',
        900: '#5a3008',
      }
    }
  }
}

建立 CSS 自訂屬性（Design Tokens）

:root {
  --color-primary: #1a3a5c;
  --color-primary-light: #2d5a8e;
  --color-accent: #e8820a;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-surface: #ffffff;
  --color-surface-alt: #f9f7f4;
}

常見品牌配色錯誤

錯誤 1：使用過多顏色

5 種以上的顏色讓頁面顯得混亂，沒有視覺焦點。

錯誤 2：主色與背景對比不足

淺藍文字放在白色背景——看起來「有設計感」，但根本看不清楚。

錯誤 3：所有元素都用強調色

強調色到處都是，就沒有東西真正被強調了。

錯誤 4：沒有深色模式的考量

如果你的網站支援深色模式，品牌色在 dark background 上的表現也要測試過。

最後提醒：配色是工具，不是目的

最好的品牌配色是「訪客感覺不到有刻意設計」的那種——他只是感覺這個品牌很順眼、很可信、很專業。這才是配色成功的樣子。