Oklab Color Space
2019 年的時候,寫過一篇文章介紹了 Lab Gradient,然後就沒特別關注相關發展,直到前幾天看到勞哥的推文提到 Oklab 這個色彩空間,而且瀏覽器已經原生支援了,我才發現原來網路標準的發展有跟上來,我也趁機多惡補了一些相關的知識。
因為一些搜尋讓我今天才了解 oklch 這個色彩格式(或是色彩空間)的使用方法。這個色彩格式在 2023 年納入了幾乎所有現代瀏覽器,好奇查詢之下發現了作者的 blog 有寫為什麼要製作 Oklab 的原因與研究過程,以及詳細的討論過去 HSV 或 HSL 系的色彩空間到底有什麼問題,收穫滿滿。...
# -- 勞哥 maylogger (@may_logger) July 13, 2024
在介紹 Oklab 前,先來介紹以前提到的 Lab 吧,其實它是國際照明委員會(International Commission on Illumination,簡稱 CIE)在 1976 年提出的色彩空間定義,全名是 CIELAB color space,或是簡寫為 L*a*b*,多加*
為了避免混淆,Lab 其實是不正確的縮寫,不過這三個字母其實就是該顏色空間的三個軸:L 代表亮度、a 代表紅色到綠色間的位置、b 代表藍色到黃色間的位置,也就是 opponent color theory(又稱對比色理論或色覺對向論)的顏色組成,這個色彩空間的重點在它的座標比較符合人類對色彩的感知。
那 Oklab 又是什麼呢?它是 Björn Ottosson 在 2020 年底發表的一個新的色彩空間定義,他在文章內有詳細的說明為什麼會想要定義一個新的色彩空間,文內也列舉了現存的色彩空間的主要問題,其中 CIELAB 的問題就是在 predict hue (預測色相)有些問題,尤其是藍色附近,其實我一開始對於這個 predict 感到很疑惑,想說到底是什麼意思,後來看到另外一篇文章 An interactive review of Oklab,文章一開始放的互動工具預設的漸層設定就是藍色到白色,然後一看就很明顯, CIELAB 的漸層色相跑一下就歪掉了變成偏紫色去了(random 按鈕可以按按看看其他色相都沒這樣嚴重),才了解到因為 CIELAB 是屬於人類感知的色彩空間,意思就是它的依歸其實是人類的感覺,所以需要從三維座標去推測人類實際上看到感覺到的顏色,數值上一樣的話就應該讓人感覺一致,而 Oklab 則是結構和 CIELAB 一樣,但是透過新的資料集來調整並解決前面提到的問題,而後在 2023,Oklab 進了 CSS Color Level 4 的草稿,主流瀏覽器現在也都已經支援。
進 CSS Color 代表什麼意思呢?第一個當然就是可以用 oklab()
函數來定義顏色了:
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);
oklab(59.69% 0.1007 0.1191 / 0.5);
除了直接定義顏色之外,現在 CSS 也支援相對顏色(relative color)了:
/* Relative values */
oklab(from green l a b / 0.5)
oklab(from #0000FF calc(l + 0.1) a b / calc(alpha * 0.9))
oklab(from hsl(180 100% 50%) calc(l - 0.1) a b)
這樣要只調整色相或是亮度都變得很簡單,或是也可以用 oklch()
,這樣色相(Hue)就更好挑選。
然後就是漸層了,現在的 CSS 漸層也支援使用不同的顏色內差方式,也就是用不同色彩空間來算中間的顏色變化:
linear-gradient(in oklab, blue, red)
linear-gradient(in lab to right, #44C, #795)
在最前面加上in <color-space>
就可以,支援的色彩空間其實不少,如果是線性漸層,那支援 srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、lab、oklab、xyz、xyz-d50、xyz-d65,如果是 polar 漸層,那支援 hsl、hwb、lch、oklch,其實相當夠用,而這段語法其實是叫 color-interpolate(顏色內插),除了漸層之外,會用到的地方還包括 filter、animation、transition 和color-mix()
函數等。
前面也已經提到,現在主流瀏覽器都已經支援了,不過還是來看一下 caniuse 上的細節,Chrome 是 2022 就支援了,但是 Firefox 是到去年的 2023 才支援,如果要抓兩年的時間的話就還要再等等,當然現在也還是可以直接用,多加一組 fallback 就可以。
除了瀏覽器原生支援外,其實也不少其它開發相關的工具支援,也有不少文章在介紹,像是 Smashing Magazine 的 Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS 和 Evil Martians 的 OKLCH in CSS: why we moved from RGB and HSL,兩篇文章就介紹了不少工具和一些延伸的文章,工具部分像是 Figma 的 plugin OkColor 和 npm 上的 convert-to-oklch,Evil Martians 還做了一個 oklch.com ,是針對 Oklch 的 color picker 還蠻厲害的。