網頁設計如何選色與轉換色彩空間
在 HEX、RGB、HSL、OKLCH 間互轉；組出通過無障礙對比的配色；匯出設計系統可依賴的色票。
與本篇教學搭配使用的更多工具：
為什麼重要
設計給工程師 Figma 色票 #5B2A6F。工程師放進 CSS 變數。兩週後 QA 說 CTA 在柔和背景上未通過 WCAG AA。修正常是 HSL 亮度微調——但瞇眼猜不會知道對比是否跨過 4.5:1。能並列數值模型與對比分數的色彩工具，能連接「好看」與「稽核過關」。
三個實際場景
貼前景與背景，讀對比比率，調亮度到 ≥4.5。
無障礙 UI
從品牌色出發，在 OKLCH 產更淺更深階，感知上較均勻。
色階一致
Pantone 參考轉 RGB，再在 HSL 微調直到螢幕色票接近印刷樣張。
活動品牌一致
操作說明
開啟 色彩編輯器。
選色或貼色
點色塊用取色器，或貼
#5B2A6F、rgb(91 42 111)、hsl(280 45% 30%)、oklch(35.5% 0.12 304)。讀各模型
並列 HEX、RGB、HSL、HSV、OKLCH。改任一欄，其餘聯動。
組對比照
第二色放「背景」槽。顯示對比比率與 WCAG AA／AAA 徽章。
產變體
用 OKLCH 取色器在固定色相與彩度下調亮度——衍生 design token 最乾淨。
匯出
複製為 CSS、Sass、JSON 或 design token 格式。
HEX
#5B2A6F其他模型
RGB: rgb(91, 42, 111)
HSL: hsl(280, 45%, 30%)
OKLCH: oklch(35.5% 0.12 304)
實用技巧
- Design token 用 OKLCH 調亮度。 HSL 調亮度在感知上不均；OKLCH 較接近人眼對明暗變化。
- 印刷對色別盲信螢幕。 要對 Pantone 或 CMYK 需校色螢幕與工作流程。
- 暗色模式可反轉 OKLCH 亮度 並略降彩度減輕視覺疲勞。
- 設計文件同時記 hex 與感知數值，維護者會感謝你。
常見陷阱
常見陷阱
同 hex 在手機與筆電看起來不同
色域（sRGB vs Display P3）與亮度不同會讓色票感受不同。需廣色域時請用 color(display-p3 …) 明標。
常見陷阱
對比檢測沒過但肉眼看還好
對比比率是數學量；光學對比受周圍影響。法令／稽核以數學為基準；內文能拉高就高於 4.5:1。
常見陷阱
CSS 變數跨元件漂移
canonical token 定義一次並全域引用。變體應衍生（如 oklch(from var(--brand) calc(l + 0.1) c h)）勿重打數字。
何時不適合用這套
- 印刷色彩管理——用 Adobe 等工作流與校色。
- 大量影像色彩分析——用
chroma.js、culori等寫腳本。 - 色盲模擬—— axe DevTools 等能模擬 deuteranopia／protanopia，比單純比率更進一步。
FAQ
HSL 與 OKLCH 差在哪？
HSL 在感知上不統一：同樣 10° 色相移動，視亮度不同感受差很多。OKLCH（OKLab 的極座標）調整較可預測。
支援 CSS Color 5 功能嗎？
支援——color-mix() 與 oklch(from …) 在現代瀏覽器可用。工具會依所選瀏覽器旗標輸出相容值。
色彩會被儲存嗎？
不會。全在本機；複製到剪貼簿為選用。
下一步
- 用 圖片格式轉換 對整體素材調色盤做最終檢查。
- favicon 或 logo 匯出可用 SVG 轉 PNG。
- 嵌入用途可用 圖片轉 Base64。