品牌調色盤的組成層次
一套完整的品牌調色盤通常包含四個層次：
1. 品牌主色（Primary Color / Brand Color）
主色是品牌最核心的識別顏色，出現在 Logo、主要 CTA 按鈕、重要的強調區塊。
每個品牌通常只有 1 個（最多 2 個）主色。主色太多讓視覺系統混亂，無法建立清晰的顏色識別。
主色的選擇要考量：品牌個性（暖色系 vs 冷色系，鮮豔 vs 沉穩）、在競爭環境中的差異化（和主要競爭對手使用不同的主色系）、使用情境的可用性（主色在深底和淺底上都能有足夠的對比度）。
2. 輔色（Secondary / Accent Color）
輔色幫助主色，用於次要強調、圖表的第二顏色、hover 狀態等。
輔色通常和主色形成對比（互補色、分裂互補、三角色對，根據色彩理論選擇）或類似色（主色的臨近色，創造統一感）。
3. 中性色（Neutral Colors）
中性色是整個調色盤的基底，用於背景、文字、邊框、分隔線。通常是一系列從深到淺的灰色，可能帶有輕微的暖調或冷調。
中性色佔品牌視覺使用面積的 60-80%，雖然不「顯眼」，卻決定了整體視覺的基調：
帶暖調的中性色（米白、奶油色背景）：讓品牌感覺柔和、有人情味。
帶冷調的中性色（藍灰、石板底色）：讓品牌感覺專業、科技感、冷靜。
4. 語意/功能色（Semantic Colors）
語意色是有固定溝通意義的顏色，在 UI 和系統訊息中使用：
Success（成功）：綠色系
Warning（警告）：黃色或橙色系
Error（錯誤）：紅色系
Info（資訊）：藍色系
語意色的重要性：用戶對這些顏色的含義已有根深蒂固的認知，不要打破他們的預期（例如用紅色代表成功，用綠色代表錯誤）。
選色的系統化方法
Step 1：確定品牌個性的形容詞
先 3–5 個形容詞描述品牌個性（高端 / 親切 / 創新 / 穩重 ...），再找對應的顏色特質：
高端、精緻：深色系（海軍藍、深金色、深灰）+ 低飽和度
親切、暖和：暖色系（橙、金、奶油白）+ 中高飽和度
創新、科技：冷色系（藍、紫）+ 高飽和度或霓虹感
自然、永續：綠色系、大地色
Step 2：研究競爭對手的顏色使用
把同業競爭對手的主色列出來，確認你選的方向能在視覺上區分。
如果同業都用同一個顏色（例如科技業普遍用藍色），你的品牌選不同的顏色反而能更容易被記住——前提是這個不同的顏色仍然符合品牌個性。
Step 3：建立顏色的色調階梯（Tonal Scale）
選定主色後，建立一個從最深（950）到最淺（50）的色調階梯（參考 Tailwind CSS 的顏色系統設計）。
每個色調都有它的用途：深色調用於文字在淺色背景、淺色調用於背景或微妙的強調，亮色調（400–600）用於 CTA 和重點裝飾。
建立工具：Tailwind 的 Color Generator、Radix UI 的顏色系統、或 Palettab 等線上工具可以從一個基礎色生成完整的階梯。
Step 4：驗證對比度
把你的顏色組合放入 WebAIM Contrast Checker 或 Figma 的 Contrast 外掛，驗證以下組合是否達到 WCAG AA 標準（4.5:1）：
深色主色背景 + 白色文字
淺色背景 + 深中性文字
中調強調色 + 文字（如果你的按鈕文字是深色的）
調色盤文件化
建立一份調色盤文件（Figma Variables 或設計系統文件），記錄：
每個顏色的名稱（語意名稱如 accent-600，不只是色碼）
色碼（HEX、RGB、HSL）
適用場景說明
禁止使用的情境（例如「此顏色不可用於正文文字」）
文件化的調色盤讓所有設計和開發工作有統一的顏色參考，避免不同頁面用了細微不同的顏色版本，破壞視覺一致性。