Color spaces
OKLAB
A uniform color space created in 2020 by Björn Ottosson. OKLAB is an opponent color space based on CAM16-UCS and IPT color spaces. It is intended to be more perceptually uniform color space, blend well, and behave well numerically.
Examples
OKLAB
CSS annotation:
-
oklab(40% 81 20) -
oklab(40% 81 20 / 1)with transparency
oklab(67% 0.14 0.13)OKLCH
OKLCH is a cylindrical transformation of OKLAB color space. Properties are Lightness, Chroma, and Hue.
CSS annotation:
-
oklch(40% 81 350) -
oklch(40% 81 350 / 1)with transparency
oklch(67% 0.19 41.34)How it affects UI design
Uniform color spaces are linear models of human vision. However, human perception is non-linear. Do not rely on these color spaces alone to create aesthetically balanced colors.
Browser support is still growing for LAB, OKLAB, LCH and OKLCH color spaces. Check CSS Module level 4 for more detail.
Color scales can be created by interpolation in various color spaces.
- Helpful tools:
- Chroma.js: https://gka.github.io/chroma.js/
- Color.js: https://colorjs.io
- D3 color: https://github.com/d3/d3-color
- Leonardo color: https://leonardocolor.io
Sources:
- Björn Ottosson. A perceptual color space for image processing. https://bottosson.github.io/posts/oklab/
- Raph Levien. An interactive review of Oklab. https://raphlinus.github.io/color/2021/01/18/oklab-critique.html