主色不是一個顏色，是一整套系統的種子
多數品牌主色是在提案簡報上決定的：深色底、一個大色塊、幾行白字。問題三個月後才浮現——工程師要拿它做 CTA 底色、連結、hover、focus 外框與警示狀態，還得在白底與灰底站得住。這時才發現：主色只有一個色值、內文對比度不合格、跟次要按鈕分不出主次。這篇談的是怎麼挑一個「長得出色階」的主色。
五個可公開觀察的案例
- Stripe：藍紫（常見標示為 #635BFF）只用在 CTA、連結與 hero 漸層，全站白底大留白。此色對白約 4.7:1，剛過內文門檻 4.5:1、幾無餘裕，所以不拿它寫長段內文。
- Klarna：金融科技用粉（常見標示為 #FFA8CD）逆操作品類慣例。此粉對白僅約 1.79:1，對黑字卻有約 11.7:1——粉色區塊一律配深字，這不是風格，是唯一解。
- 蝦皮 Shopee：品牌橘（常見標示為 #EE4D2D）對白約 3.66:1，過得了元件與大字的 3:1，過不了內文的 4.5:1，所以只用在按鈕、標價與促銷標籤。
- Notion：介面近乎無彩度，彩度刻意留給使用者內容的 highlight 與資料庫標籤——工具型產品讓出彩度是清楚的取捨。
- 國泰金控：深綠識別的優勢是暗度夠——同色系的 #006B54 對白約 6.5:1，能直接寫內文、做連結與表格標頭，自由度遠高於亮色。
設計邏輯：三條互相打架的約束
選主色是在解三方衝突。可及性：WCAG 2.2 要求內文 4.5:1、大字 3:1，1.4.11 Non-text Contrast 另要求按鈕邊界、圖示與 focus 指示器至少 3:1。辨識度：von Restorff effect（隔離效應）指出，畫面中唯一與眾不同的元素最容易被記住；次要按鈕一旦共用主色，效果歸零。品類慣例：金融偏藍綠、餐飲偏暖色，降低認知成本，卻也讓你像競品。關鍵不是挑漂亮的色，而是挑「生得出完整色階」的色相——這正是 OKLCH 的用處：HSL 的 L 不對應感知亮度（同為 L=50%，黃遠比藍亮），OKLCH 的 L 才是；鎖住色相與彩度、只調 L，色階才均勻可預測。
技術成本與限制
一套完整色票（品牌 11 階、灰階 11 階，成功／警示／錯誤各 5 階），從生成、對比度驗收、寫進 Tailwind theme 到對齊 Figma Variables，實測 12–20 小時。檔案成本可忽略：約 60 個 CSS 自訂屬性未壓縮 2–4 KB、gzip 後不到 1 KB。吃效能的不是顏色，是為了做漸層與光暈補上的大圖——一張 1920px 寬的漸層 PNG 常超過 300 KB，落在首屏會拖累 LCP，改用 CSS gradient 是 0 位元組；大面積 backdrop-filter 在中低階 Android 明顯掉幀。顏色不是排名因子，但 Lighthouse 的 Accessibility 會直接對對比度扣分。SVG 圖示若硬編碼色值，換色得重出全部素材，改用 currentColor 即可省掉。
適合 vs 不適合的行業
| 適合高彩度大膽主色 | 建議克制、走低彩度 |
|---|---|
| D2C 消費品、美妝保養 | B2B SaaS 後台 |
| 餐飲與生鮮電商 | 醫療與檢驗報告 |
| 促銷電商、活動售票 | 金融交易介面 |
| 遊戲、兒童教育 | 資料視覺化產品 |
| 個人品牌、創意工作室 | 政府與公部門標案 |
判準：停留越久、決策後果越嚴重，主色越該退到背景；只有要三秒內被記住的場景才值得衝彩度。
怎麼套用到你的網站：七個步驟
- ☐ 先定用途再定顏色：列出主色的工作（CTA 底色、連結、focus ring、圖表、品牌色塊），少於三種不需完整色階。
- ☐ 用 OKLCH 定錨生階：候選色轉成
oklch()，鎖定色相與彩度、只調亮度，生出 50 到 950 共 11 階。 - ☐ 三組對比度驗收：主色底＋白字、白底＋主色文字、白底＋主色邊框（元件僅需 3:1）；不過就換階，別換色相。
- ☐ 準備文字專用深版：大色塊用 500，連結與內文用 700 或 800。
- ☐ 加一層語意 token：元件別直接吃
brand-500，中間放--color-action-bg、--color-link、--color-focus。 - ☐ 灰階混入主色相：中性灰帶 2–4% 主色彩度，別讓彩色元件貼在死灰底上。
- ☐ 三種環境實測：強光下的手機、投影機、Chrome DevTools 色覺缺陷模擬。
常見錯誤 × 怎麼避開
- 只交一個 hex：沒有 hover／active／disabled 階，工程師只能用
filter: brightness()硬調，每頁都不一樣。 - 用 HSL 拉色階：同一 L 值下黃階遠比藍階亮，節奏會歪。改用 OKLCH，或以定義在 OKLCH 空間的 Tailwind 預設色票 為基準。
- 只用顏色傳狀態：紅錯綠對，對紅綠色覺辨識障礙者等於沒資訊，也違反 WCAG 1.4.1；狀態要「顏色＋圖示＋文字」三重編碼。
- 主色鋪滿全站：面積越大，CTA 越不像 CTA；比例抓 60/30/10。
延伸資源
- oklch.com——選色器，即時提示是否超出 sRGB／P3 色域。
- WebAIM Contrast Checker——對比度驗收，直接標示 AA／AAA。
- Adobe Color——內建色覺安全檢查，可模擬色盲。
- Coolors——探索配色組合與匯出色票。
- MDN：oklch()——語法與瀏覽器支援。
常見問題 FAQ
主色一定要通過 4.5:1 嗎？
看用途。按鈕底色或 18.66px 粗體以上大標題，3:1 即符合 AA；14px 內文與連結才需 4.5:1。準備亮版與深版，別逼一個色值兼顧兩者。
logo 主色對比度不合格，要換 logo 嗎？
不用。WCAG 明確把 logotype 排除在文字對比度規範外，要補的是介面用的深色版本。
OKLCH 現在能用在正式網站嗎？
可以，它是 CSS Color Level 4 的一部分，主流瀏覽器近幾個大版本都支援；舊環境用建置工具輸出 hex fallback 即可。
一套色票要做幾階？
一般網站 11 階（50–950）是安全值：淺階給底色與 hover、中階給識別、深階給文字與邊框。
已上線網站換主色要花多久？
看有沒有語意 token 層。有的話約一天完成並回歸測試；沒有的話顏色散在 CSS、SVG 與 Email 模板，抓漏常要三到五天。
想把品牌顏色變成可交付的系統？
ScriptWalker 同時做設計與開發：把主色轉成通過 WCAG 2.2 的完整色階，交付 Design Token、Tailwind 設定與 Figma Variables，讓行銷頁、產品與 App 共用同一份定義。想先做配色健檢，歡迎聯絡：
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p