配色不是憑感覺挑喜歡的顏色,而是先建立一套可推導、可複用的系統,再讓每個顏色各司其職。昨天談字體階層時,我們用「一組尺寸級距」把版面秩序化;今天的色彩也是同一套邏輯——把「相」「彩」「明」三個維度拆開來調,你就能像調參數一樣做出協調的介面,而不是每次都在色票裡亂試。這篇聚焦在如何用 HSL 思考、如何分配比例、以及如何在無障礙與暗色模式上不踩雷。
📖 學
用 HSL/HSB 思考,而不是用 HEX 猜
#3B82F6 這種十六進位碼對人腦幾乎沒有意義,你無法從它推理「調亮一點會變成什麼」。改用 HSL(色相 Hue、飽和度 Saturation、明度 Lightness)後,顏色變成三個可獨立操作的旋鈕:色相 0–360 度決定「是什麼顏色」,飽和度 0–100% 決定「有多鮮豔」,明度 0–100% 決定「有多亮」。
這帶來一個關鍵能力:程式化地生成色階。想做同一個藍色的深淺 10 階,你只要固定色相與飽和度,讓明度從 95% 遞減到 15% 即可。要注意一個常見陷阱——單純降明度做出來的深色往往偏灰髒,實務上會在變深時「同步微調色相與提高飽和度」(例如藍色越深越偏靛),這樣色階看起來才有生命力。HSB(又稱 HSV)與 HSL 差在明度那一軸的定義,HSB 的 100% 是純飽和色、HSL 的 100% 一律是白,選一套用熟即可。
色輪與配色方案:先決定關係,再決定顏色
配色方案的本質是「色相之間的角度關係」,記住幾何就記住了公式。互補色是色輪上相對的 180 度(藍配橙),對比最強、最搶眼,適合當強調色但大面積並置會刺眼;類比色是相鄰的 30 度內(藍、藍綠、綠),和諧耐看,適合做背景漸層與同一功能區。
三分色(Triadic)是彼此相隔 120 度的三色,活潑而平衡;分裂互補(Split-complementary)取一個主色加上其互補色兩側的鄰色,保有對比張力卻比純互補柔和,是新手最安全的高對比方案;單色(Monochromatic)則是固定色相、只玩飽和度與明度,幾乎不可能出錯,很多 SaaS 後台就是一個品牌藍撐全場。實務建議:介面配色從「單色或類比」起手,強調色再借一個互補或分裂互補的色相,克制比繽紛更專業。
60-30-10 與語意色彩:給每個顏色一份工作
60-30-10 法則替你分配畫面的顏色比重:60% 是主導色(通常是背景與大面積中性色)、30% 是次要色(卡片、側欄、次級按鈕等支撐面)、10% 是強調色(CTA、連結、選中狀態這些真正要吸睛的地方)。這個比例的價值在於「留白給重點」——強調色只佔一成,它才強調得起來;新手常犯的錯是到處都用品牌色,結果哪裡都不突出。
語意色彩則是另一組獨立於品牌色的功能色:成功(綠)、警告(黃/橘)、錯誤(紅)、資訊(藍)。它們的意義來自約定俗成,別為了美感把「錯誤」改成紫色。中性灰階系統同樣關鍵——一套從近白到近黑、約 9 到 11 階的灰,負責文字、邊框、分隔線、停用狀態;有了完整灰階,介面 80% 的顏色其實都是灰,品牌色反而是點綴。做灰階時別用純中性灰,摻一點點品牌色相(例如藍調的冷灰)會讓整體更整合。
對比度與無障礙:好看之前要先看得見
顏色再美,看不清就是失敗。WCAG AA 要求一般文字與背景的對比度至少 4.5:1,大型文字(約 18pt 以上或 14pt 粗體)至少 3:1,非文字的 UI 元件與圖形界線則至少 3:1。這是硬指標,設計時就該用對比度檢查工具驗證,而不是上線後才被客訴。
一個常被忽略的重點:飽和的黃色、亮綠在白底上對比極低,拿來當文字幾乎不可讀;而純色強調按鈕上的白字也常不達標。解法是在色階裡「為文字準備夠深的版本」——例如強調色平常用 500 階當底色,文字或小圖示改用 700 階。把無障礙內建進色票階層,而不是每次臨時補救,是系統化配色最大的好處。
暗色模式:不是把顏色反過來就好
暗色模式有三條鐵律。第一,別用純黑 #000000 當背景,改用 #121212 這類近黑深灰;純黑與白字對比過猛會產生「光暈(halation)」,長時間閱讀更累。第二,別用純白當文字,用約 87% 不透明度的白或淺灰,降低刺眼感。第三,飽和色要降飽和度——鮮豔的品牌色放在深底上會「振動、發光」,通常需要把飽和度降個 20–40%,並適度提高明度,才不會刺眼。
還有一個層次觀念:亮色模式用陰影表現「浮起」,暗色模式沒有陰影可用,改用「越靠近使用者的表面越亮」來表達高度——背景最暗、卡片略亮、彈窗更亮。所以暗色模式該是「重新設計的一套色階」,而不是把亮色色票數值反轉。用 HSL 建色票時,替亮/暗兩套各定義語意變數(--surface、--text、--accent),切換主題只是換一組變數值,元件完全不用改。
🧠 記
- 用 HSL 思考顏色:色相、飽和度、明度三個旋鈕,才能程式化生成色階。
- 配色方案 = 色相角度關係:互補 180°、類比 30°、三分 120°、分裂互補、單色;介面從單色/類比起手最安全。
- 60-30-10:主導 60% / 次要 30% / 強調 10%,強調色少才強調得起來。
- 語意色與中性灰階要獨立於品牌色;灰階摻一點品牌色相更整合。
- WCAG AA:一般文字 4.5:1、大字與 UI 元件 3:1;文字用色階中夠深的版本。
- 暗色模式:勿純黑純白、降飽和、用表面亮度取代陰影表現層次。
✍️ 實踐
- 選一個品牌主色,用 HSL 固定色相與飽和度,產出 50/100/…/900 共 10 階的明度色票,深階再微調色相與飽和度。
- 把手上一個頁面重新用 60-30-10 檢視:數一數強調色是否超過 10%,超過就把多餘的品牌色換成中性灰。
- 定義四個語意色(成功/警告/錯誤/資訊)各兩階:一階當底、一階當文字。
- 用對比度檢查工具驗證所有文字組合是否達 4.5:1,不達標就換用更深/更淺的階。
- 為這套色票加一組暗色模式變數:背景改
#121212、白字降到 87%、強調色飽和度 −30%。
🔗 延伸學習
- Material Design 3 — Color system overview — Google 的色彩系統,示範語意化色角(role)與亮暗雙主題如何以 token 管理。
- The 60-30-10 Rule: A Developer’s Guide to UI Color Balance — 把 60-30-10 對應到 CSS 變數與元件,含暗色模式調整實例。
- web.dev — prefers-color-scheme: Hello darkness, my old friend — 用 CSS 變數與 media query 實作暗色模式的完整工程指南。
- Smashing Magazine — Dark Mode Design Considerations — 深入談暗色模式的降飽和、層次與可讀性取捨。
💬 問 AI
想把上面的原則變成能直接用的色票,把你的品牌色丟給 AI 讓它推導整套系統:
我的品牌主色是 HSL(217, 91%, 60%)。請幫我用 HSL 建立一套可程式化的色票系統:
1) 主色的 50–900 共 10 階(說明各階明度/飽和度如何調整,並確保深階不會偏灰)。
2) 一套 9 階、帶微量藍色相的中性灰階。
3) 成功/警告/錯誤/資訊四組語意色,各給「底色」與「文字色」兩階並標註對兩者互相的對比度。
4) 對應的暗色模式版本(背景勿純黑、文字勿純白、強調色降飽和)。
請以 CSS 自訂屬性(--color-...）格式輸出,並標註每組文字/背景是否達 WCAG AA。