0

編碼結果

Oklch 顏色

關於 Oklch 顏色

Oklch 顏色是使用明度、彩度和色相來表示顏色的知覺基礎色彩空間。它採用與 Oklab 相同的思路,並以彩度和角度表示色味,因此更容易分別調整顏色強度和色相。

成分意義範例值
L: 明度表示顏色的明亮程度。0% 為黑色,100% 為白色。60%
C: 彩度表示顏色的強度。0 為無彩色,值越大顏色越鮮艷。0.2
H: 色相以角度表示色相。90deg

例如,紅色等主要顏色可以表示如下。

顏色Oklch 表示RGB 表示
紅色oklch(62.8% 0.2577 29.23deg)rgb(255 0 0)
綠色oklch(51.98% 0.1769 142.5deg)rgb(0 128 0)
亮綠色oklch(86.64% 0.2948 142.5deg)rgb(0 255 0)
藍色oklch(45.2% 0.3132 264.05deg)rgb(0 0 255)
白色oklch(100% 0 0deg)rgb(255 255 255)
黑色oklch(0% 0 0deg)rgb(0 0 0)

若要包含透明度,請加入 Alpha 值。例如,半透明紅色可以表示為 oklch(62.8% 0.2577 29.23deg / 0.5)

明度、彩度、色相的處理

明度按 0% 到 100% 的範圍處理。低於 0% 的值按 0% 處理,高於 100% 的值會限制在 100%。

彩度按 0 以上的值處理。負的彩度按 0 處理。彩度為 0 時,顏色變為無彩色,色相按 0deg 處理。

色相按角度處理,超過 360deg 的值或負值會標準化到 0deg 到 360deg 的範圍。例如,oklch(62.8% 0.2577 389.23deg) 會作為與 oklch(62.8% 0.2577 29.23deg) 相同的顏色處理。

Oklch 和 Oklab 的差異

Oklab 使用 ab 的直角座標表示顏色。Oklch 將 Oklab 的色味轉換為彩度和色相。因此,在保持相同明度的同時調整彩度或色相時,Oklch 可能更直觀。

Oklch 和 LCH 的差異

LCH 相比,Oklch 在改變色相或彩度時的視覺變化更接近均勻。由於明度、彩度和色相成分被調整為更接近人類知覺,相同幅度的成分變化通常會產生更一致的視覺變化。例如,在相同明度下旋轉色相,或只調整彩度時,明亮度和色味不容易出現不自然的偏移。