A color space (or model) is a coordinate space where
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:
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:
This colorspace are non-linear, meaning that:
The human focused colorspaces:
They uses the human perception property of the color such as:
The most known is:
This colorspace are linear, meaning that the diff based on the coordinates has a meaning.
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 |
See Numerisation to Printing process (Color Space Transformation)
const color1 = d3.hsl("#075ebb") // hexadecimal RGB
console.log(`hue: ${color1.h} degree`);
console.log(`saturation: ${color1.s} `);
console.log(`lightness: ${color1.l} `);
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 }