OKLCH色彩模型：更好地掌握色相、明度、彩度，為更好的可及性而生

相比於常見的HSL、HSV來說，OKLCH色彩模型對於色相、明度、彩度有更佳的掌握度。特別是明度方面，對UI/UX設計師建構兼具良好可及性、色彩擴展性的色盤至關重要。除此之外，OKLCH還可表示P3廣色域、Rec.2020等色彩空間的顏色，充分運用當今螢幕顯示技術的潛力，並已被主流瀏覽器所支援。

背景：應用HSL於介面設計時的挑戰

HSL（Hue色相, Saturation飽和度, Lightness明度）色彩表示法被廣泛地應用於多種場合，包括：色彩選擇器介面、CSS語法等。如果用三維空間來表示HSL的色彩概念，它是一個由色相、飽和度、明度三軸所構成的圓柱體，圓柱體的兩端分別為白色、黑色，且理論上，任一顏色都可在該立方體中找到屬於它的位置。

雖然HSL提供了對於明度的直觀控制，但令人意外地，此參數並無法平衡不同色相間的感知亮度。舉例來說，下圖中的黃、藍色明度值皆設定為50%。理想上，我們會預期這兩個顏色有一致的亮度，但事實卻是，我們能明顯感受到黃色比藍色更亮。這是由於人眼對不同波長光線的敏感度有差異，以及現代螢幕顯示的特性影響所導致。然而，HSL模型並未將這些因素納入考量。這個缺點對注重可及性的UI設計來說尤其不利，因為它可能導致色盤中感知明度應該要一致的特定色階，在特定色相下缺乏足夠的對比度。

另外一個缺點是，CSS語法中的hsl()函數會將色彩映射至sRGB色彩空間，而這也意味著它無法表現更寬廣的P3廣色域顏色。

關於OKLCH

OKLCH是由Björn Ottosson於2020年所提出的色彩模型，其最大的特點是以感知明度作為色彩分類的向度之一，解決了上述HSL模型感知明度不一致的問題。在OKLCH中，色彩被劃分為明度（Lightness）、彩度（Chroma）、色相（Hue）三軸，而「OK」則是字面意思，表示「好用的」之意。雖然OKLCH的色彩概念與HSL相似，但它的色立體卻不是圓柱體，不是任何一種規整的形狀，而像是一座座高矮錯落的山峰。在這個色立體中，山峰的高矮代表著不同色相的感知明度區間差異。

OKLCH各項目的數值單位與範圍如下所示：

由於OKLCH的色彩表示法相當直觀，因此它也具備了易讀、方便以公式計算色階等特性。回到上一段提及過的範例，這次，當我們使用OKLCH表示方才的藍色與黃色時，你會發現兩者在明度數值（標示為綠色）上有明顯的差異。因此，若要讓兩者的亮度感覺一樣，你需要做的便是調整黃色的亮度至和藍色一樣的水準。調整後的結果請看圖中下排的兩個色票。

藉由控制感知明度，即可確保指定色階於任何色相中呈現的對比度維持幾乎一致，也就是大大增加了於介面設計中使用不同主題色系的自由度，同時還不必擔心影響可及性。更為詳細關於OKLCH對比於HSL配色應用於介面設計的優勢，可參考Anton Lovchikov所製作的互動範例。

理論上，OKLCH可涵蓋任何色彩空間的全部顏色，包括sRGB、P3。當使用OKLCH表示sRGB顏色時，除了用CSS的oklch()語法外，該顏色也可完美地替換為常見的rgb()、rgba()、HEX值、hsl()來表示；反之，如果使用OKLCH表示P3廣色域的顏色，在不支援P3廣色域的設備上，瀏覽器會自動以最為相近的sRGB顏色替代。

OKLCH的支援性、CSS語法

儘管CSS的oklch()語法被主流的瀏覽器如Chrome、Safari、Edge、Firefox等所支援，但嚴格來說，支援開始至今（2024年）時常並不算特別長。因此，仍然建議先使用支援oklch的配色工具選定顏色（下方段落會介紹），然後將其轉換為常見的rgb()或HEX值使用。下表是各主流瀏覽器支援本語法的對應版本與推出時間：

在CSS語法中使用OKLCH非常地簡單，只需使用oklch()函數並填入對應的三個數值即可。除此之外，還可於語法的最後加註透明度數值。

 /* 基本語法 */
 oklch(59.69% 0.156 49.77)
 ​
 /* 加註透明度 */
 oklch(59.69% 0.156 49.77 / .5)

oklch.com：OKLCH色彩模型的選色工具

oklch.com直觀地以明度、彩度、色相三個圖表表示選定色彩於模型中的位置，支援oklch與HEX值互相轉換，並可計算當選定P3廣色域顏色時，對應的sRGB顏色備案。另外，網站中還有色立體模型可供觀察。

Huetone：採用OKLCH色彩模型的配色工具

Huetone是一款採用OKLCH色彩模型的線上配色工具。這款工具提供了統一顏色色相、統一不同色相間的明度等功能，並附有色票的WCAG或APCA分數，可協助UI/UX設計師輕鬆打造考慮了可及性（Accessibility）的色盤。為了方便快速開始配色，此工具亦有提供來自Ant Design、Stripe、Carbon、Tailwind等知名設計系統的色票範例。

利用本工具所調配好的色盤可無縫銜接現有設計與開發工作流程。在設計方面，Huetone提供了一鍵複製色盤的json code功能，可用於匯入Token Studio（Figma Plugin）中使用。

如果你的專案沒有使用Token Studio，也可考慮使用我所開發的Spaciiing，並切換至「變數生成器¹」頁籤，選定生成目的地後貼上複製的code，即可快速建立Figma Variables。

在開發方面，Huetone則提供了一鍵複製CSS Variables功能，可快速匯入相關檔案中使用。

其他資源

如果你對於應用OKLCH色彩系統於程式開發有興趣，可參考原作者的部落格，文中提及了包括Python、Javascript、Typescript、C++、Matlab、Java等程式語言應用OKLCH的範例可作參考。

附註

[1]  此功能為付費功能。

參考資料

1. Ottosson， B. (2020). A perceptual color space for image processing. https://bottosson.github.io/posts/oklab/
2. Andrey, S., & Travis, T. (2023). OKLCH in CSS: why we moved from RGB and HSL. https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

追蹤我的IG帳號@chengyi_hsieh

我的最新動態都在這裡！

追蹤

PROMOTION

全面釋放設計生產力

集結超過10種以上專業工具的Spaciing(Figma plguin)，可幫你省下可觀的寶貴時間。

立即購買