Color - Space (Model)


A color space (or model) is a coordinate space where

  • a set of coordinate define a color.
  • you can define and compare them

A color picker permits to discover visually a colorspace


A color space determines how coordinates (a tuple of data values) maps to a well-defined color (and vice-versa).

Many color spaces can be represented as three-dimensional values (three parameters) but some have more, or fewer dimensions, and some, such as Pantone, cannot be represented in this way at all.

Colors are generally represented as tuples of numbers. e.g.:

More … see: Color - (Parameters|Properties) Color Description


There is two kind of colorspaces:


The physical focused colorspaces:

  • target Machine
  • are Non-linear (Non-uniform)

They uses the physical property of the pigment or light such as additivity and substractivity and is based on primary colors that are added/or substracted to create other colors.


  • RGB - red green blue - the colors of the pixel used in monitor
  • RYB - red yellow blue - the colors used in a projector
  • CMYK - Cyan, Yellow, Magenta and black - the colors of the inks used in printing

This colorspace are non-linear, meaning that:

  • an increase in one coordinate can lead to a really different color
  • therefore the diff based on the coordinates has no real meaning.


The human focused colorspaces:

  • target Human perception
  • are linear (Uniform)

They uses the human perception property of the color such as:

The most known is:

  • CIELAB (a.k.a. Lab) - still color based but human colors.
  • CIELChab (a.k.a. “LCh” or “HCL”)
  • Dave Green’s Cubehelix

This colorspace are linear, meaning that the diff based on the coordinates has a meaning.



Name Usage Type Coordinates
(aka HLS, HSV)
User Linear Hue (color wheel), Saturation and Lightness
RGB Display Non-linear Red, green, and blue (the color of the pixel added together to make another color)
RYB Display Non-linear Red, yellow, and blue (subtractive - projector)
CYMK Printing Non-linear Cyan, Yellow, Magenta and black (the colors of the inks)
Greyscale User Linear only one brightness (going from black to white)
YIQ Bootstrap
CIEXYZ designed to encompass all colors the average human can see
CIELAB (aka lab) Designed to encompass all colors the average human can see
(a.k.a. LCh or HCL)
based on CIELAB


See Numerisation to Printing process (Color Space Transformation)

from rgb to hsl calculation

const color1 = d3.hsl("#075ebb") // hexadecimal RGB
console.log(`hue: ${color1.h} degree`);
console.log(`saturation: ${color1.s} `);
console.log(`lightness: ${color1.l} `);
  • Qix (Node module)
var color = Color('#7743CE').alpha(0.5).lighten(0.5);
console.log(color.hsl().string());  // 'hsla(262, 59%, 81%, 0.5)'
console.log(color.cmyk().round().array());  // [ 16, 25, 0, 8, 0.5 ]
console.log(color.ansi256().object());  // { ansi256: 183, alpha: 0.5 }

Documentation / Reference

Powered by ComboStrap