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 在改变色相或彩度时的视觉变化更接近均匀。由于明度、彩度和色相成分被调整为更接近人类知觉,相同幅度的成分变化通常会产生更一致的视觉变化。例如,在相同明度下旋转色相,或只调整彩度时,明亮度和色味不容易出现不自然的偏移。