About

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

Coordinates

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

Type

There is two kind of colorspaces:

Physical

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.

Example:

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

Human

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.

Management

List

Name Usage Type Coordinates
HSL
(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)
wiki/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
CIELChab
(a.k.a. LCh or HCL)
based on CIELAB
CIELUV / polar CIELUV

Conversion

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