Color utilities (css, p3, hex, hsl, hsv, hwb, lab, lch, xyz, okhsl, okhsv, oklab, oklch, hpluv, hsluv, lchuv, bytes) for PEX.

npm install pex-color

import * as color from "pex-color";

// Hexadecimal
color.toHex([1, 0, 0]);
// => "#FF0000"

color.toHex([1, 0, 0, 0.5]);
// => "#FF000080"

color.toHex([1, 0, 0, 0.5], false);
// => "#FF0000"

color.fromHex(color.create(), "#FF0000");
// => [1, 0, 0, 1]

color.fromHex(new Array(3), "#FF0000");
// => [1, 0, 0]

// CSS
color.toCSSRGB([1, 0, 0, 1]);
// => "rgba(255, 0, 0, 1)"

color.toCSSP3([1, 0, 0, 1]);
// => "color(display-p3 0.91748 0.20028 0.13856)"

color.toCSSP3([1, 0, 0, 0.5]);
// => "color(display-p3 0.91748 0.20028 0.13856 / 0.5)"

// Various color spaces
color.toOklab([1, 0, 0, 1]);
// => [0.62796, 0.22486, 0.12585, 1]

// Utils
color.utils.linearToSrgb(0.5);
// => 0.7353569830524495
color.utils.D50;
// => [0.9642956764295677, 1, 0.8251046025104602]

The "color" primitive is an array of 3 (RGB) or 4 (A) values in the range 0 < x < 1.

API naming follows the following rules:

• fromType(color, ...values) = set a color primitive from Type values
• toType(color, out) = convert a color primitive to an array of Type and optionally set it to out

pex-color

utils

bytes : Array.<number>

An array of 3 (RGB) or 4 (A) values in bytes.

All components in the range 0 <= x <= 255

color : Array.<number>

An array of 3 (RGB) or 4 (A) values.

All components in the range 0 <= x <= 1

css : string

CSS string representation.

hex : string

hexadecimal string (RGB[A] or RRGGBB[AA]).

hpluv : Array.<number>

CIELUV hue, saturation, lightness.

All components in the range 0 <= x <= 1.

hsl : Array.<number>

hue, saturation, lightness.

All components in the range 0 <= x <= 1

hsluv : Array.<number>

CIELUV hue, saturation, lightness.

All components in the range 0 <= x <= 1

hsv : Array.<number>

hue, saturation, value.

All components in the range 0 <= x <= 1

hwb : Array.<number>

hue, whiteness, blackness.

All components in the range 0 <= x <= 1

lab : Array.<number>

CIELAB perceptual Lightness, a* red/green, b* blue/yellow.

Components range (D65): 0 <= l <= 1; -0.86183 <= a <= 0.98234; -1.0786 <= b <= 0.94478;

Components range (D50): 0 <= l <= 1; -0.79287 <= a <= 0.9355; -1.12029 <= b <= 0.93388;

lch : Array.<number>

CIELCh Luminance Chroma Hue. Cylindrical form of Lab.

All components in the range 0 <= x <= 1

lchuv : Array.<number>

CIELChuv Luminance Chroma Hue.

All components in the range 0 <= x <= 1

linear : Array.<number>

r g b linear values.

All components in the range 0 <= x <= 1

okhsl : Array.<number>

All components in the range 0 <= x <= 1

okhsv : Array.<number>

All components in the range 0 <= x <= 1

oklab : Array.<number>

Cartesian form using D65 standard illuminant.

Components range: 0 <= l <= 1; -0.233 <= a <= 0.276; -0.311 <= b <= 0.198;

oklch : Array.<number>

Cylindrical form using D65 standard illuminant.

All components in the range 0 <= x <= 1

p3 : Array.<number>

r, g, b values (DCI-P3 color gamut, D65 whitepoint, sRGB gamma curve).

All components in the range 0 <= x <= 1

xyz : Array.<number>

CIE XYZ.

Components range: 0 <= x <= 0.95; 0 <= y <= 1; 0 <= z <= 1.08;

• pex-color
  • .fromBytes(color, bytes) ⇒ color
  • .toBytes(color, out) ⇒ bytes
  • .create([r], [g], [b], [a]) ⇒ color
  • .copy(color) ⇒ color
  • .set(color, color2) ⇒ color
  • .fromValues(color, r, g, b, [a]) ⇒ color
  • .toCSSRGB(color, [precision]) ⇒ css
  • .toCSSRGBLinear(color, [precision]) ⇒ css
  • .toCSSRGBLinear(color, [precision]) ⇒ css
  • .toCSSHSL(color, [precision]) ⇒ css
  • .toCSSHWB(color, [precision]) ⇒ css
  • .toCSSLab(color, [precision]) ⇒ css
  • .toCSSLab(color, [precision]) ⇒ css
  • .toCSSLCH(color, [precision]) ⇒ css
  • .toCSSOkLab(color, [precision]) ⇒ css
  • .toCSSOklch(color, [precision]) ⇒ css
  • .toCSSXYZD50(color, [precision]) ⇒ css
  • .toCSSXYZ(color, [precision]) ⇒ css
  • .fromHex(color, hex) ⇒ color
  • .toHex(color, alpha) ⇒ hex
  • .fromHPLuv(color, h, s, l, [a]) ⇒ color
  • .toHPLuv(color, out) ⇒ hpluv
  • .fromHSL(color, h, s, l, [a]) ⇒ color
  • .toHSL(color, out) ⇒ hsl
  • .fromHSLuv(color, h, s, l, [a]) ⇒ color
  • .toHSLuv(color, out) ⇒ hsluv
  • .fromHSV(color, h, s, v, [a]) ⇒ color
  • .toHSV(color, out) ⇒ hsv
  • .fromHWB(color, h, w, b, [a]) ⇒ color
  • .toHWB(color, out) ⇒ hwb
  • .fromLabD50(color, l, a, b, α) ⇒ color
  • .toLabD50(color, out) ⇒ lab
  • .fromLabD65(color, l, a, b, α) ⇒ color
  • .toLabD65(color, out) ⇒ lab
  • .fromLCH(color, l, c, h, [a]) ⇒ color
  • .toLCH(color, out) ⇒ lch
  • .fromLCHuv(color, l, c, h, [a]) ⇒ color
  • .toLCHuv(color, out) ⇒ lchuv
  • .fromLinear(color, r, g, b, [a]) ⇒ color
  • .toLinear(color, out) ⇒ linear
  • .fromOkhsl(color, h, s, l, [α]) ⇒ color
  • .toOkhsl(color, out) ⇒ okhsl
  • .fromOkhsv(color, h, s, v, [α]) ⇒ color
  • .toOkhsv(color, out) ⇒ okhsv
  • .fromOklab(color, L, a, b, [α]) ⇒ color
  • .toOklab(color, out) ⇒ oklab
  • .fromOklch(color, l, c, h, [a]) ⇒ color
  • .toOklch(color, out) ⇒ oklch
  • .fromP3(color, r, g, b, a) ⇒ color
  • .toP3(color, out) ⇒ p3
  • .fromXYZD50(color, x, y, z, a) ⇒ color
  • .toXYZD50(color, out) ⇒ xyz
  • .fromXYZD65(color, x, y, z, a) ⇒ color
  • .toXYZD65(color, out) ⇒ xyz

Updates a color based on byte values.

Kind: static method of pex-color

Get RGB[A] color components as bytes array.

Kind: static method of pex-color

Creates a new color from linear values.

Kind: static method of pex-color

Returns a copy of a color.

Kind: static method of pex-color

Sets a color to another color.

Kind: static method of pex-color

Updates a color based on r, g, b, [a] values.

Kind: static method of pex-color

Returns a rgb CSS string representation of a given color.

Kind: static method of pex-color See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color

Returns a linear rgb CSS string representation of a given color.

Kind: static method of pex-color See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color

Returns a P3 rgb CSS string representation of a given color.

Kind: static method of pex-color See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color

Returns a hsl CSS string representation of a given color.

Kind: static method of pex-color See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

Returns a hwb CSS string representation of a given color.

Kind: static method of pex-color See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb

Returns a lab CSS string representation of a given color.

Kind: static method of pex-color See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab

Returns a lab CSS string representation of a given color.

Kind: static method of pex-color

Returns a lch CSS string representation of a given color.

Kind: static method of pex-color See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch

Returns a lab CSS string representation of a given color.

Kind: static method of pex-color

Returns a lch CSS string representation of a given color.

Kind: static method of pex-color

Returns a xyz-d50 CSS string representation of a given color.

Kind: static method of pex-color

Returns a xyz (xyz-d65) CSS string representation of a given color.

Kind: static method of pex-color

Updates a color based on a hexadecimal string.

Kind: static method of pex-color

Returns a hexadecimal string representation of a given color.

Kind: static method of pex-color

Updates a color based on HPLuv values and alpha.

Kind: static method of pex-color

Returns a HPLuv representation of a given color.

Kind: static method of pex-color

Updates a color based on HSL values and alpha.

Kind: static method of pex-color

Returns a HSL representation of a given color.

Kind: static method of pex-color

Updates a color based on HSLuv values and alpha.

Kind: static method of pex-color

Returns a HSLuv representation of a given color.

Kind: static method of pex-color

Updates a color based on HSV values and alpha.

Kind: static method of pex-color

Returns a HSV representation of a given color.

Kind: static method of pex-color

Updates a color based on HWB values and alpha.

Kind: static method of pex-color

Returns a HWB representation of a given color.

Kind: static method of pex-color

Updates a color based on Lab values and alpha using D50 standard illuminant.

Kind: static method of pex-color

Returns a Lab representation of a given color using D50 standard illuminant.

Kind: static method of pex-color

Updates a color based on Lab values and alpha using D65 standard illuminant.

Kind: static method of pex-color

Returns a Lab representation of a given color using D65 standard illuminant.

Kind: static method of pex-color

Updates a color based on LCH values and alpha.

Kind: static method of pex-color

Returns a LCH representation of a given color.

Kind: static method of pex-color

Updates a color based on LCHuv values and alpha.

Kind: static method of pex-color

Returns a LCHuv representation of a given color.

Kind: static method of pex-color

Updates a color based on linear values.

Kind: static method of pex-color

Returns a linear color representation of a given color.

Kind: static method of pex-color

Updates a color based on Okhsl values and alpha.

Kind: static method of pex-color

Returns an Okhsl representation of a given color.

Kind: static method of pex-color

Updates a color based on Okhsv values and alpha.

Kind: static method of pex-color

Returns an Okhsv representation of a given color.

Kind: static method of pex-color

Updates a color based on Oklab values and alpha.

Kind: static method of pex-color

Returns an Oklab representation of a given color.

Kind: static method of pex-color

Updates a color based on Oklch values and alpha.

Kind: static method of pex-color

Returns an Oklch representation of a given color.

Kind: static method of pex-color

Updates a color based on P3 values and alpha using D65 standard illuminant.

Kind: static method of pex-color

Returns a P3 representation of a given color using D65 standard illuminant.

Kind: static method of pex-color

Updates a color based on XYZ values and alpha using D50 standard illuminant.

Kind: static method of pex-color

Returns a XYZ representation of a given color using D50 standard illuminant.

Kind: static method of pex-color

Updates a color based on XYZ values and alpha using D65 standard illuminant.

Kind: static method of pex-color

Returns a XYZ representation of a given color using D65 standard illuminant.

Kind: static method of pex-color

• utils
  • .D65
  • .D50
  • .linearToSrgb(c) ⇒ number
  • .srgbToLinear(c) ⇒ number
  • .linearToRgb(lr, lg, lb, out) ⇒ color
  • .rgbToLinear(r, g, b, out) ⇒ linear
  • .xyzD65ToLinear(x, y, z, out) ⇒ linear
  • .linearToXyzD65(lr, lg, lb, out) ⇒ xyz
  • .xyzD50ToLinear(x, y, z, out) ⇒ linear
  • .linearToXyzD50(lr, lg, lb, out) ⇒ xyz
  • .linearP3ToXyzD65(lr, lg, lb, out) ⇒ xyz
  • .xyzD65ToLinearP3(x, y, z, out) ⇒ Array
  • .lchToLab(l, c, h, out) ⇒ lab
  • .labToLch(l, a, b, out) ⇒ lch
  • .labToXyz(l, a, b, out, illuminant) ⇒ xyz
  • .xyzToLab(x, y, z, out, illuminant) ⇒ lab
  • .oklabToLinear(L, a, b, out) ⇒ linear
  • .linearToOklab(lr, lg, lb, out) ⇒ oklab

Illuminant D65: x,y,z tristimulus values

Kind: static constant of utils See: https://en.wikipedia.org/wiki/Standard_illuminant#White_points_of_standard_illuminants

Illuminant D50: x,y,z tristimulus values

Kind: static constant of utils

Convert component from linear value

Kind: static method of utils

Convert component to linear value

Kind: static method of utils

Return a RGB representation from Linear values.

Kind: static method of utils

Return a Linear representation from RGB values.

Kind: static method of utils

Return a Linear representation from XYZ values with D65 illuminant.

Kind: static method of utils

Return a XYZ representation with D65 illuminant from Linear values.

Kind: static method of utils

Return a Linear representation from XYZ values with D50 illuminant.

Kind: static method of utils

Return a XYZ representation with D50 illuminant from Linear values.

Kind: static method of utils

Return a XYZ representation with D65 illuminant from Linear P3 values.

Kind: static method of utils

Return a Linear P3 representation from XYZ values with D65 illuminant.

Kind: static method of utils Returns: Array - P3 Linear

Return a Lab representation from LCH values.

Kind: static method of utils

Return a Lch representation from Lab values.

Kind: static method of utils

Return a XYZ representation from Lab values with provided illuminant.

Kind: static method of utils

Return a lab representation from XYZ values with provided illuminant.

Kind: static method of utils

Return a Linear representation from Oklab values.

Kind: static method of utils

Return a Oklab representation from Linear values.

Kind: static method of utils

An array of 3 (RGB) or 4 (A) values in bytes.

All components in the range 0 <= x <= 255

Kind: global typedef

An array of 3 (RGB) or 4 (A) values.

All components in the range 0 <= x <= 1

Kind: global typedef

CSS string representation.

Kind: global typedef See: https://www.w3.org/TR/css-color-4/

hexadecimal string (RGB[A] or RRGGBB[AA]).

Kind: global typedef

CIELUV hue, saturation, lightness.

All components in the range 0 <= x <= 1.

Kind: global typedef

hue, saturation, lightness.

All components in the range 0 <= x <= 1

Kind: global typedef See: https://en.wikipedia.org/wiki/HSL_and_HSV

CIELUV hue, saturation, lightness.

All components in the range 0 <= x <= 1

Kind: global typedef See: https://www.hsluv.org/

hue, saturation, value.

All components in the range 0 <= x <= 1

Kind: global typedef See: https://en.wikipedia.org/wiki/HSL_and_HSV

hue, whiteness, blackness.

All components in the range 0 <= x <= 1

Kind: global typedef See: https://en.wikipedia.org/wiki/HWB_color_model

CIELAB perceptual Lightness, a* red/green, b* blue/yellow.

Components range (D65): 0 <= l <= 1; -0.86183 <= a <= 0.98234; -1.0786 <= b <= 0.94478;

Components range (D50): 0 <= l <= 1; -0.79287 <= a <= 0.9355; -1.12029 <= b <= 0.93388;

Kind: global typedef See: https://en.wikipedia.org/wiki/CIELAB_color_space

CIELCh Luminance Chroma Hue. Cylindrical form of Lab.

All components in the range 0 <= x <= 1

Kind: global typedef See: https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_model

CIELChuv Luminance Chroma Hue.

All components in the range 0 <= x <= 1

Kind: global typedef See: https://en.wikipedia.org/wiki/CIELUV

r g b linear values.

All components in the range 0 <= x <= 1

Kind: global typedef See: https://en.wikipedia.org/wiki/SRGB

All components in the range 0 <= x <= 1

Kind: global typedef See: https://bottosson.github.io/posts/colorpicker/#hsl-2

All components in the range 0 <= x <= 1

Kind: global typedef See: https://bottosson.github.io/posts/colorpicker/#hsv-2

Cartesian form using D65 standard illuminant.

Components range: 0 <= l <= 1; -0.233 <= a <= 0.276; -0.311 <= b <= 0.198;

Kind: global typedef See: https://bottosson.github.io/posts/oklab/#converting-from-linear-srgb-to-oklab

Cylindrical form using D65 standard illuminant.

All components in the range 0 <= x <= 1

Kind: global typedef See: https://drafts.csswg.org/css-color/#color-conversion-code

r, g, b values (DCI-P3 color gamut, D65 whitepoint, sRGB gamma curve).

All components in the range 0 <= x <= 1

Kind: global typedef See: https://drafts.csswg.org/css-color/#color-conversion-code

CIE XYZ.

Components range: 0 <= x <= 0.95; 0 <= y <= 1; 0 <= z <= 1.08;

Kind: global typedef See: https://en.wikipedia.org/wiki/CIE_1931_color_space

MIT. See license file.