Protected_componentsColor components of the _model.
Protected_modelThe current color model.
Protected_tempColor components of the _tempModel.
Protected_tempThe color model that was last acquired by getComponents.
Protected_versionThe color value version that is auto-incremented every time the useComponents method is called. This version can be used to track that the color value was changed, for example to invalidate caches that rely on current color value.
Returns read-only color components of this Color in a particular color model. Components are in [0, 1] range.
Use this method to acquire color components without changing the current model of this Color instance. Usually this is required if plugin method returns a computed value.
Note: Don't keep reference to the returned array because it is reused between getComponents invocations.
The color model that provides color components.
Read-only color components.
Returns mutable color components of this Color in a particular color model. Components are in [0, 1] range.
Use this method in plugins if you want Color instance to switch the current color model or if you want to update color components.
Note: Don't keep reference to the returned array because it is reused between useComponents invocations.
The color model that provides color components.
Mutable color components.
StaticparseReturns opacity (alpha) component.
Alpha ∈ [0, 1], 0 = transparent, 1 = opaque.
Sets opacity (alpha) component.
clr().alpha(0.2).alpha(a => a * 2).alpha();
// ⮕ 0.4
Alpha ∈ [0, 1], 0 = transparent, 1 = opaque.
Returns black color component.
Black ∈ [0, 100].
Sets black color component.
clr().black(10).black(k => k * 2).black();
// ⮕ 20
Black ∈ [0, 100].
Returns blackness color component.
Blackness ∈ [0, 100].
Sets blackness color component.
clr().blackness(20).blackness(b => b * 2).blackness();
// ⮕ 40
Blackness ∈ [0, 100].
Returns blue color component.
Blue ∈ [0, 255].
Sets blue color component.
clr().blue(64).blue(b => b * 2).blue();
// ⮕ 128
Blue ∈ [0, 255].
Returns CMYKa components as an array where cyan, magenta, yellow, and black ∈ [0, 100], and alpha ∈ [0, 1] (0 = transparent, 1 = opaque).
clr().cmyk();
// ⮕ [0, 0, 0, 1, 1]
Sets HSLa components.
clr().cmyk(([, , y]) => [50, 64, y, 43, 0.5]);
The tuple of cyan, magenta, yellow, and black ∈ [0, 100], and alpha ∈ [0, 1] (0 = transparent, 1 = opaque). If a cyan, magenta, yellow, or black component is omitted it is set to 0. If alpha component is omitted it is set to 1.
Returns the color contrast ∈ [1, 21].
clr(0x00_00_00).contrast(0xff_ff_ff);
// ⮕ 21
Returns color as an RGBa CSS string, or as a hex string if alpha channel is set to 1.
clr('#abc').css();
// ⮕ #aabbcc
clr([26, 51, 89, 0.5]).css();
// ⮕ rgba(26,51,89,0.50)
Sets color from CSS string.
clr().css('hsl(290, 20%, 50% / 80%)').css();
// ⮕ rgba(145,102,153,0.80)
Returns cyan color component.
Cyan ∈ [0, 100].
Sets cyan color component.
clr().cyan(10).cyan(c => c * 2).cyan();
// ⮕ 20
Cyan ∈ [0, 100].
Computes the CIEDE2000 color-difference.
Returns number in range [0, 100] where 2.3 is considered to be just noticeable difference (JND).
Alpha channel is ignored.
Returns green color component.
Green ∈ [0, 255].
Sets green color component.
clr().green(64).green(g => g * 2).green();
// ⮕ 128
Green ∈ [0, 255].
Converts to grayscale using Highly Sensitive Perceived brightness (HSP) equation. The output color uses the same color model as the input.
Returns HSLa components as an array where hue ∈ [0, 360], saturation and lightness ∈ [0, 100] and alpha ∈ [0, 1] (0 = transparent, 1 = opaque).
clr().hsl();
// ⮕ [0, 0, 0, 1]
Sets HSLa components.
clr().hsl(([, , l]) => [240, 100, l, 0.5]);
The tuple of hue ∈ [0, 360], saturation and lightness ∈ [0, 100] and alpha ∈ [0, 1] (0 = transparent, 1 = opaque). If a hue, saturation or lightness component is omitted it is set to 0. If alpha component is omitted it is set to 1.
Returns 24-bit integer representing HSL components without alpha.
clr().hsl24();
// ⮕ 0x00_00_00
Sets HSL components from 24-bit integer representation.
clr().hsl24(0xff_ff_ff).hsl();
The 24-bit integer, representing color in HSL model.
Returns 32-bit integer representing HSLa components.
clr().hsl32();
// ⮕ 0x00_00_00_ff
Sets HSLa components from 32-bit integer representation.
clr().hsl32(0xaa_bb_cc_dd).hsl();
The 32-bit integer, representing color in HSLa model.
Returns HSVa components as an array where hue ∈ [0, 360], saturation and value ∈ [0, 100] and alpha ∈ [0, 1] (0 = transparent, 1 = opaque).
clr().hsv();
// ⮕ [0, 0, 0, 1]
Sets HSVa components.
clr().hsv(([, , v]) => [240, 100, v, 0.5]);
The tuple of hue ∈ [0, 360], saturation and value ∈ [0, 100] and alpha ∈ [0, 1] (0 = transparent, 1 = opaque). If a hue, saturation or value component is omitted it is set to 0. If alpha component is omitted it is set to 1.
Returns hue color component.
Hue ∈ [0, 360].
Sets hue color component.
clr().hue(90).hue(h => h * 2).hue();
// ⮕ 180
Hue ∈ [0, 360].
Returns HWBa components as an array where hue ∈ [0, 360], whiteness and blackness ∈ [0, 100] and alpha ∈ [0, 1] (0 = transparent, 1 = opaque).
clr().hwb();
// ⮕ [0, 0, 0, 1]
Sets HWBa components.
clr().hwb(([, , b]) => [240, 100, b, 0.5]);
The tuple of hue ∈ [0, 360], whiteness and blackness ∈ [0, 100] and alpha ∈ [0, 1] (0 = transparent, 1 = opaque). If a hue, whiteness or blackness component is omitted it is set to 0. If alpha component is omitted it is set to 1.
Returns CIE-L*a*b* components as an array where L* ∈ [0, 100], a* and b* ∈ [-100, 100], and alpha ∈ [0, 1] (0 = transparent, 1 = opaque).
clr().lab();
// ⮕ [0, 0, 0, 1]
Sets CIE-L*a*b* components.
The tuple of L* ∈ [0, 100], a* and b* ∈ [-100, 100], and alpha ∈ [0, 1] (0 = transparent, 1 = opaque). If L*, a*, or b* component is omitted it is set to 0. If alpha component is omitted it is set to 1.
Returns Hunter L, a, b components as an array where L ∈ [0, 100], a and b ∈ [-128, 128], and alpha ∈ [0, 1] (0 = transparent, 1 = opaque).
clr().labh();
// ⮕ [0, 0, 0, 1]
Sets Hunter L, a, b components.
The tuple of L ∈ [0, 100], a and b ∈ [-128, 128], and alpha ∈ [0, 1] (0 = transparent, 1 = opaque). If L, a, or b component is omitted it is set to 0. If alpha component is omitted it is set to 1.
Returns lightness color component.
Lightness ∈ [0, 100].
Sets lightness color component.
clr().lightness(20).lightness(l => l * 2).lightness();
// ⮕ 40
Lightness ∈ [0, 100].
Returns magenta color component.
Magenta ∈ [0, 100].
Sets magenta color component.
clr().magenta(10).magenta(m => m * 2).magenta();
// ⮕ 20
Magenta ∈ [0, 100].
Returns red color component.
Red ∈ [0, 255].
Sets red color component.
clr().red(64).red(r => r * 2).red();
// ⮕ 128
Red ∈ [0, 255].
Returns RGBa components as an array where red, green and blue ∈ [0, 255] and alpha ∈ [0, 1] (0 = transparent, 1 = opaque).
clr().rgb();
// ⮕ [0, 0, 0, 1]
Sets RGBa components.
clr().rgb(([, , B]) => [255, 255, B, 0.5]);
The tuple of red, green and blue ∈ [0, 255] and alpha ∈ [0, 1] (0 = transparent, 1 = opaque). If red, green or blue component is omitted it is set to 0. If alpha component is omitted it is set to 1.
Returns 24-bit integer representing RGB components without alpha.
clr().rgb24();
// ⮕ 0x00_00_00
Sets RGB components from 24-bit integer representation.
clr().rgb24(0xff_ff_ff).rgb();
// ⮕ [255, 255, 255, 1]
The 24-bit integer, representing color in RGB model.
Returns 32-bit integer representing RGBa components.
clr().rgb32();
// ⮕ 0x00_00_00_ff
Sets RGBa components from 32-bit integer representation.
clr().rgb32(0xaa_bb_cc_dd).rgb();
// ⮕ [170, 187, 204, 0.86]
The 32-bit integer, representing color in RGBa model.
Returns saturation color component.
Saturation ∈ [0, 100].
Sets saturation color component.
clr().saturation(20).saturation(s => s * 2).saturation();
// ⮕ 40
Saturation ∈ [0, 100].
Returns whiteness color component.
Whiteness ∈ [0, 100].
Sets whiteness color component.
clr().whiteness(20).whiteness(w => w * 2).whiteness();
// ⮕ 40
Whiteness ∈ [0, 100].
Returns yellow color component.
Yellow ∈ [0, 100].
Sets yellow color component.
clr().yellow(10).yellow(y => y * 2).yellow();
// ⮕ 20
Yellow ∈ [0, 100].
Provides color manipulation API that is extensible via plugins.