About Oklab Color

Oklab color is a perception-based color space that represents colors with lightness and two color components. Like Lab color, it separates brightness and color, but as a newer model it is designed so color changes are closer to how they appear visually.

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 oklab(62.8% 0.2249 0.1258 / 0.5).

Handling of lightness, a, and b

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%.

a and b are specified as positive or negative numbers. Their values are not clipped to a fixed range, and are handled as the specified Oklab components.

Difference between Oklab and Oklch

Oklab represents colors with the rectangular coordinates a and b. Oklch uses the same perception-based idea as Oklab, but represents the color tone with chroma and hue.

Difference between Oklab and Lab

Oklab is designed so that visual changes are closer to uniform than Lab when changing hue or chroma. Because the lightness and color 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 interpolating colors to create a gradient or adjusting only chroma, brightness and hue are less likely to shift unnaturally.