Color spaces

Color space

A color space is a collection of all colors within a particular specific set of primaries (gamut).

Color spaces are specific implementations of a color model.

RGB cube representation of the sRGB color space RGB cube representation of the sRGB color space

Cylindrical transformations

Some color spaces have cylindrical transformations, which qualify as unique color spaces despite being bound to the same total collection of possible colors.

Cylindrical transformations provide a more perceptual-based approach to defining color. They are easier to reason about, and in some cases can return more appealing colors when interpolating between values.

An example of cylindrical transformations of sRGB into the HSV and HSL color spaces. An example of cylindrical transformations of sRGB into the HSV and HSL color spaces.

How it affects UI design

Devices can support different color spaces. For web, the default rgb annotation defines colors in sRGB color space. For wider gamut colors in web applications, use display-P3 annotation to define colors.

Color relationships and properties can vary considerably between different color spaces. When creating color scales, try lightening and darkening colors (or interpolating between colors) in a variety of color spaces to find the best appearance.

Sources:

  1. Mark D. Fairchild (2013). Color Appearance Models. 3rd edition. John Wiley & Sons, Ltd. Pages 201-210
  2. Color space. Wikipedia. https://en.wikipedia.org/wiki/Color_space