在數字界面中，顏色不僅是美學的載體，更是信息傳遞的重要工具。CSS Color Level 4 標準引入了 OKLCH 顏色空間, 提供??感知均勻性??（顏色差異與實際視覺感受一致），解決傳統HSL/HSV在調整顏色時的不自然問題。文本幫助你快速掌握OKLCH的核心概念和應用邏輯。重點是理解其??感知均勻性??和??與HSL的對比優勢??，這能幫助你在設計或代碼中更科學地使用顏色。

一、傳統顏色模型的局限性

在CSS發展歷程中，我們經歷了RGB、HEX、HSL等多種顏色模型，但這些傳統方案存在明顯痛點：

1. RGB/HEX：
   • 反直覺的數值組合（如#6ea3db）
   • 無法表達廣色域P3顏色
   • 缺乏可預測的亮度關系

2. HSL：
   • 偽均勻色彩空間（實際亮度感知不一致）
   • 色調調整導致對比度失控（如darken()函數在Sass中的異常表現）
   • 不支持現代顯示器的廣色域

OKLCH的工作原理與HSL相似，但它比HSL更好地編碼亮度。

HSL的主要問題是它使用一個圓柱形的色彩空間。每個色調都有相同的飽和度（0-100%）。但在現實中，我們的顯示器和眼睛對不同的色調有不同的最大飽和度。HSL 通過變形顏色空間和擴展顏色，以具有相同的最大值來隱藏這種復雜性。

二、OKLCH的優勢

更接近人眼感知的數學模型

oklch 是一種定義CSS顏色的新方法。在oklch(L C H)或oklch(L C H / a)中，每項對應如下：

• L（Lightness）：0-1區間對應黑到白的真實亮度感知
• C（Chroma）：數值越大飽和度越高，其有用的最小值為 0，最大值無理論上限（但實際不超過 0.5）
• H（Hue）：0-360°色相角
• A（alpha）：是透明度（0-1或0-100%），1 對應 100%（完全不透明）

a:hover {background:   oklch(0.45 0.26 264); /* blue */color:        oklch(1 0 0);     /* white */color:        oklch(0 0 0 / 50%); /* black with 50% opacity */
}

OKLCH顏色選擇器和轉換器

優勢

• OKLCH 將設計師從手動選擇每種顏色的需要中解放出來。設計人員可以定義一個公式，選擇一些顏色，然后自動生成整個設計系統調色板。
• OKLCH 支持寬色域P3色：比sRGB多30%色彩空間，可以使用OKLCH來指定這些新顏色。
• 與 HSL 不同，OKLCH 更適合顏色修改和調色板生成。它使用感知亮度，所以沒有更多意想不到的結果。
• 可讀性：與 rgb 或十六進制 #ca0000 不同，OKLCH是人類可讀的。通過查看數字，您可以快速了解值代表的顏色。
• 無障礙設計：精準的亮度控制確保 OKLCH 提供更好的無障礙（a11y）支持

三、如何使用 OKLCH

1. 通過 OKLCH轉換器 或 自動腳本 轉換原顏色值，并替換原來的 rgb()/hsl()

.header {
- background: #f3f7fa;
+ background: oklch(0.97 0.006 240);
}

2. 添加一個調色板

將顏色移動到調色板上來增加CSS代碼的可維護性。

• 所有顏色都定義為 CSS 變量
• 組件只通過變量使用這些顏色, 如 var(--error)
• 設計師應該嘗試重復使用顏色，以減少顏色變體的數量
• 對于深色或高對比度的主題，不添加 @media，只需在調色板中更改 CSS 自定義變量即可。

示例：

:root {--surface-0: oklch(0.96 0.005 300);--surface-1: oklch(1 0 0);--surface-2: oklch(0.99 0 0 / 85%);--surface-2-shadow: oklch(0 0 0 / 6%);--surface-3d: oklch(0.96 0.005 300);--surface-ui-regular: oklch(0.7 0.05 310 / 18%);--surface-ui-accent: oklch(0.69 0.17 286 / 20%);--surface-ui-warning: oklch(0.7 0.18 80 / 20%);--surface-ui-danger: oklch(0.79 0.18 3 / 20%);--surface-badge: oklch(0.32 0 0 / 85%);--text-primary: oklch(0 0 0);--text-secondary: oklch(0.54 0 0);--text-note: oklch(0.85 0 0);--text-badge: oklch(1 0 0);--chess: oklch(0.94 0 0);--ui-bg: oklch(0.7 0.05 310 / 18%);--ui-border: oklch(0.7 0 0 / 20%);--accent: oklch(0.57 0.18 286);--danger: oklch(0.59 0.23 7);--border-p3: oklch(1 0 0 / 50%);--border-rec2020: oklch(1 0 0 / 75%);
}@media (prefers-color-scheme: dark) {:root {--surface-0: oklch(0 0 0);--surface-1: oklch(0.29 0.01 300);--surface-2: oklch(0.29 0 0 / 85%);--surface-2-shadow: oklch(0 0 0 / 40%);--surface-3d: oklch(0.29 0.01 300);--text-primary: oklch(1 0 0);--text-note: oklch(0.45 0 0);--chess: oklch(0.38 0.01 297);--ui-border: oklch(0.7 0 0 / 50%);--border-p3: oklch(0 0 0 / 30%);--border-rec2020: oklch(0 0 0 / 50%);}
}

四、未來展望

隨著 CSS Color Module Level 5 的臨近，OKLCH將解鎖更多可能：

1. 原生顏色操作：oklch(from var(--color) calc(l+0.1) c h)
2. 動態主題引擎：基于亮度感知的自動對比度調整
3. 跨媒體一致性：印刷/屏幕的色彩空間統一

五、總結

OKLCH不僅是一個新的顏色格式，更是開啟現代色彩工程的鑰匙。它解決了傳統模型的三大痛點：人機交互的直覺性、廣色域的未來兼容性、設計系統的可維護性。在Apple設備覆蓋率超60%的今天，擁抱OKLCH就是為下一個十年的Web體驗打下基石。

立即體驗：OKLCH顏色選擇器和轉換器 ｜ 調色板生成器

參考資料

• 《CSS中的OKLCH：為什么我們從RGB和HSL轉向OKLCH》 : https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value/oklch

END

如果這篇文章對您有所幫助，歡迎點贊、分享和留言，讓更多的人受益。感謝您的細心閱讀，如果發現了任何錯誤或需要補充的地方，請隨時告訴我，我會盡快處理 ^_^