About Oklch Color

Oklch color is a perception-based color space that represents colors with lightness, chroma, and hue. It uses the same idea as Oklab color, but represents the color tone with chroma and an angle, making color strength and hue easier to adjust separately.

For example, major colors such as red can be represented as follows.

To include transparency, add an alpha value. For example, semi-transparent red can be represented as oklch(62.8% 0.2577 29.23deg / 0.5).

Handling of lightness, chroma, and hue

Lightness is handled in the range from 0% to 100%. Values below 0% are treated as 0%, and values above 100% are clamped to 100%.

Chroma is handled as a value of 0 or greater. Negative chroma is handled as 0. When chroma is 0, the color becomes achromatic and hue is handled as 0deg.

Hue is handled as an angle, and values greater than 360deg or negative values are normalized to the range from 0deg to 360deg. For example, oklch(62.8% 0.2577 389.23deg) is handled as the same color as oklch(62.8% 0.2577 29.23deg).

Difference between Oklch and Oklab

Oklab represents colors with the rectangular coordinates a and b. Oklch converts the color tone of Oklab to chroma and hue. Therefore, Oklch can be more intuitive when you want to adjust chroma or hue while keeping the same lightness.

Difference between Oklch and LCH

Oklch is designed so that visual changes are closer to uniform than LCH when changing hue or chroma. Because the lightness, chroma, and hue components are adjusted to relate more closely to human perception, changing component values by the same amount tends to produce more even visual changes. For example, when rotating hue at the same lightness or adjusting only chroma, brightness and color tone are less likely to shift unnaturally.