Color spaces

CIELAB

(LAB)

A uniform color space created in 1976 by the International Commission on Illumination (CIE). CIELAB is an opponent color space.

CIELAB and CIELUV were both recommended as interim solutions for solving color difference specification of reflecting light.

Examples

CSS annotation:

  • lab(40% 81 20)
  • lab(40% 81 20 / 1) with transparency
lab(59.82% 52.13 60.44)
LCH

LCH is a cylindrical transformation of LAB color space. Properties are Lightness, Chroma, and Hue.

CSS annotation:

  • lch(40% 81 350)
  • lch(40% 81 350 / 1) with transparency
lch(59.82% 79.82 49.22)

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 CIELAB color space. Check CSS Module level 4 for more detail.

Color scales can be created by interpolation in various color spaces.

Sources:

  1. Mark D. Fairchild (2013). Color Appearance Models. 3rd edition. John Wiley & Sons, Ltd. Pages 201-210
  2. Janos Schanda (2007). Colorimetry: understanding the CIE system. John Wiley & Sons, Inc. Pages 61-63
  3. R.W.G. Hunt, M.R. Pointer (2011). Measuring Colour. John Wiley & Sons, Inc. Pages 55-57
  4. CIELAB color space. Wikipedia. https://en.wikipedia.org/wiki/CIELAB_color_space