Members

An implementation of the OKHSL color space, fixed to the sRGBGamut. This is useful for color pickers and other applications where you wish to work with components in a well-defined and enclosed cylindrical form. If you wish to use OKHSL with a different gamut, you'll need to use the OKHSLToOKLab and OKLabToOKHSL methods directly, passing your desired gamut.

View Source spaces/oklab.js, line 71

Type: ColorSpace

# constant OKHSV

An implementation of the OKHSV color space, fixed to the sRGBGamut. This is useful for color pickers and other applications where you wish to work with components in a well-defined and enclosed cylindrical form. If you wish to use OKHSL with a different gamut, you'll need to use the OKHSLToOKLab and OKLabToOKHSL methods directly, passing your desired gamut.

View Source spaces/oklab.js, line 87

Type: ColorSpace

# constant OKLCH

The OKLCH color space, with Lightness, Chroma, and Hue components. This is the cylindrical form of the OKLab color space.

View Source spaces/oklab.js, line 30

Type: ColorSpace

# constant OKLab

The OKLab color space.

View Source spaces/oklab.js, line 21

Type: ColorSpace

# constant ProPhotoRGB

The ProPhotoRGB color space, with a transfer function, aliased as "prophoto-rgb". Inherits from the ProPhotoRGBLinear color space.

View Source spaces/prophoto-rgb.js, line 60

Type: ColorSpace

# constant ProPhotoRGBLinear

The ProPhotoRGB color space in linear form, without a transfer function, aliased as "prophoto-rgb-linear".

View Source spaces/prophoto-rgb.js, line 43

Type: ColorSpace

# constant Rec2020

The Rec2020 color space, with a transfer function, aliased as "rec2020". Inherits from the Rec2020Linear color space.

View Source spaces/rec2020.js, line 37

Type: ColorGamut

# constant Rec2020Gamut

A color gamut for the Rec2020 color space.

View Source spaces/rec2020.js, line 59

Type: ColorSpace

# constant Rec2020Linear

The Rec2020 color space in linear form, without a transfer function, aliased as "rec2020-linear".

View Source spaces/rec2020.js, line 24

Type: ColorSpace

# constant XYZ

XYZ color space with D65 whitepoint, aliased as "xyz".

View Source spaces/xyz.js, line 58

Type: ColorSpace

# constant XYZD50

XYZ color space with D50 whitepoint, aliased as "xyz-d50".

View Source spaces/xyz.js, line 69

Type: ColorSpace

# constant sRGB

The sRGB color space, with a transfer function, aliased as "srgb". Inherits from the sRGBLinear color space.

View Source spaces/srgb.js, line 29

Type: ColorGamut

# constant sRGBGamut

A color gamut for the sRGB color space.

View Source spaces/srgb.js, line 41

Type: ColorSpace

# constant sRGBLinear

The sRGB color space in linear form, without a transfer function, aliased as "srgb-linear".

View Source spaces/srgb.js, line 16

Methods

# OKHSLToOKLab(hsl, gamutopt, outopt) → {Vector}

Converts OKHSL color to OKLab color.

Parameters:

Name	Type	Attributes	Default	Description
`hsl`	`Vector`			The OKHSL color as an array [h, s, l].
`gamut`	`ColorGamut`	<optional>	sRGBGamut	The color gamut.
`out`	`Vector`	<optional>	vec3()	The output array to store the OKLab color.

View Source okhsl.js, line 129

Returns:

The OKLab color as an array [L, a, b].

Type: Vector

# OKHSVToOKLab(hsv, gamutopt, outopt) → {Vector}

Converts OKHSV color to OKLab color.

Parameters:

Name	Type	Attributes	Default	Description
`hsv`	`Vector`			The OKHSV color as an array [h, s, v].
`gamut`	`ColorGamut`	<optional>	sRGBGamut	The color gamut.
`out`	`Vector`	<optional>	vec3()	The output array to store the OKLab color.

View Source okhsl.js, line 267

Returns:

The OKLab color as an array [L, a, b].

Type: Vector

# OKLabToOKHSL(lab, gamutopt, outopt) → {Vector}

Converts OKLab color to OKHSL color.

Parameters:

Name	Type	Attributes	Default	Description
`lab`	`Vector`			The OKLab color as an array [L, a, b].
`gamut`	`ColorGamut`	<optional>	sRGBGamut	The color gamut.
`out`	`Vector`	<optional>	vec3()	The output array to store the OKHSL color.

View Source okhsl.js, line 194

Returns:

The OKHSL color as an array [h, s, l].

Type: Vector

# OKLabToOKHSV(lab, gamutopt, outopt) → {Vector}

Converts OKLab color to OKHSV color.

Parameters:

Name	Type	Attributes	Default	Description
`lab`	`Vector`			The OKLab color as an array [L, a, b].
`gamut`	`ColorGamut`	<optional>	sRGBGamut	The color gamut.
`out`	`Vector`	<optional>	vec3()	The output array to store the OKHSV color.

View Source okhsl.js, line 331

Returns:

The OKHSV color as an array [h, s, v].

Type: Vector

# OKLab_from(input, input_to_LMS, outopt) → {Vector}

Converts a color from another color space to OKLab.

Parameters:

Name	Type	Attributes	Default	Description
`input`	`Vector`			The input color.
`input_to_LMS`	`Matrix3x3`			The transformation matrix from the input color space to LMS.
`out`	`Vector`	<optional>	vec3()	The output vector.

View Source core.js, line 95

Returns:

The transformed color.

Type: Vector

# OKLab_to(OKLab, LMS_to_output, outopt) → {Vector}

Converts OKLab color to another color space.

Parameters:

Name	Type	Attributes	Default	Description
`OKLab`	`Vector`			The OKLab color.
`LMS_to_output`	`Matrix3x3`			The transformation matrix from LMS to the output color space.
`out`	`Vector`	<optional>	vec3()	The output vector.

View Source core.js, line 80

Returns:

The transformed color.

Type: Vector

# RGBToHex(rgb) → {string}

Converts an RGB array to a hex color string.

Parameters:

Name	Type	Description
`rgb`	`Vector`	The RGB array.

View Source util.js, line 81

Returns:

The hex color string.

Type: string

# RGBtoHex()

Deprecated:

Use RGBToHex instead.

View Source util.js, line 89

# XYZD50ToD65(XYZ, outopt) → {Vector}

Converts a color from XYZ with D50 whitepoint to XYZ with D65 whitepoint.

Parameters:

Name	Type	Attributes	Default	Description
`XYZ`	`Vector`			The input color in XYZ with D50 whitepoint.
`out`	`Vector`	<optional>	vec3()	The output color in XYZ with D65 whitepoint.

View Source spaces/xyz.js, line 50

Returns:

The converted color in XYZ with D65 whitepoint.

Type: Vector

# XYZD65ToD50(XYZ, outopt) → {Vector}

Converts a color from XYZ with D65 whitepoint to XYZ with D50 whitepoint.

Parameters:

Name	Type	Attributes	Default	Description
`XYZ`	`Vector`			The input color in XYZ with D65 whitepoint.
`out`	`Vector`	<optional>	vec3()	The output color in XYZ with D50 whitepoint.

View Source spaces/xyz.js, line 39

Returns:

The converted color in XYZ with D50 whitepoint.

Type: Vector

# XYZ_to_xyY(arg, outopt) → {Vector}

Converts XYZ color space to xyY color space.

Parameters:

Name	Type	Attributes	Default	Description
`arg`	`Vector`			The XYZ array.
`out`	`Vector`	<optional>	vec3()	The output array.

View Source util.js, line 161

Returns:

The xyY array.

Type: Vector

# clamp(value, min, max) → {number}

Clamps a value between a minimum and maximum value.

Parameters:

Name	Type	Description
`value`	`number`	The value to clamp.
`min`	`number`	The minimum value.
`max`	`number`	The maximum value.

View Source util.js, line 10

Returns:

The clamped value.

Type: number

# clampedRGB(rgb, outopt) → {Vector}

Clamps an RGB array to the range [0, 1].

Parameters:

Name	Type	Attributes	Default	Description
`rgb`	`Vector`			The RGB array.
`out`	`Vector`	<optional>	vec3()	The output array.

View Source util.js, line 121

Returns:

The clamped RGB array.

Type: Vector

# computeMaxSaturationOKLC(a, b, lmsToRgb, okCoeff) → {number}

Computes the maximum saturation (S = C/L) possible for a given hue that fits within the RGB gamut, using the given coefficients.

Parameters:

Name	Type	Description
`a`	`number`	The normalized a component of the hue.
`b`	`number`	The normalized b component of the hue.
`lmsToRgb`	`Matrix3x3`	The LMS to RGB conversion matrix.
`okCoeff`	`ColorGamutCoefficients`	The OKLab coefficients.

View Source gamut.js, line 101

Returns:

The maximum saturation.

Type: number

# constrainAngle(angle) → {number}

Constrains an angle to the range [0, 360).

Parameters:

Name	Type	Description
`angle`	`number`	The angle in degrees.

View Source util.js, line 48

Returns:

The constrained angle.

Type: number

# convert(input, fromSpace, toSpace, outopt) → {Vector}

Converts a color from one color space to another.

Parameters:

Name	Type	Attributes	Default	Description
`input`	`Vector`			The input color.
`fromSpace`	`ColorSpace`			The source color space.
`toSpace`	`ColorSpace`			The target color space.
`out`	`Vector`	<optional>	vec3()	The output vector.

View Source core.js, line 313

Returns:

The converted color.

Type: Vector

# degToRad(n) → {number}

Converts degrees to radians.

Parameters:

Name	Type	Description
`n`	`number`	The angle in degrees.

View Source util.js, line 30

Returns:

The angle in radians.

Type: number

# deltaAngle(a0, a1) → {number}

Calculates the delta angle between two angles.

Parameters:

Name	Type	Description
`a0`	`number`	The first angle in degrees.
`a1`	`number`	The second angle in degrees.

View Source util.js, line 203

Returns:

The delta angle in degrees.

Type: number

# deltaEOK(oklab1, oklab2) → {number}

Calculates the DeltaEOK (color difference) between two OKLab colors.

Parameters:

Name	Type	Description
`oklab1`	`Vector`	The first OKLab color.
`oklab2`	`Vector`	The second OKLab color.

View Source core.js, line 443

Returns:

The delta E value.

Type: number

# deserialize(input) → {Object}

Deserializes a color string to an object with id (color space string) and coords (the vector, in 3 or 4 dimensions). Note this does not return a ColorSpace object; you may want to use the example code below to map the string ID to a ColorSpace, but this will increase the size of your final bundle as it references all spaces.

Parameters:

Name	Type	Description
`input`	`string`	The color string to deserialize.

View Source core.js, line 199

Returns:

The deserialized color object.

Type: Object

Example

import { listColorSpaces, deserialize } from "@texel/color";

const { id, coords } = deserialize(str);
// now find the actual color space object
const space = listColorSpaces().find((f) => id === f.id);
console.log(space, coords);

# findCuspOKLCH(a, b, gamut, outopt) → {Array.<number>}

Finds the cusp of the OKLCH color space for a given hue.

Parameters:

Name	Type	Attributes	Default	Description
`a`	`number`			The normalized a component of the hue.
`b`	`number`			The normalized b component of the hue.
`gamut`	`ColorGamut`			The gamut object.
`out`	`Array.<number>`	<optional>	[0, 0]	The output array to store the cusp values.

View Source gamut.js, line 203

Returns:

The cusp values [L, C].

Type: Array.<number>

# floatToByte(n) → {number}

Converts a float value to a byte value.

Parameters:

Name	Type	Description
`n`	`number`	The float value.

View Source util.js, line 185

Returns:

The byte value.

Type: number

# gamutMapOKLCH(oklch, gamutopt, targetSpaceopt, outopt, mappingopt, cuspopt) → {Vector}

Applies fast approximate gamut mapping in OKLab space on the given OKLCH input color, using the specified gamut and converting to the target color space.

Parameters:

Name	Type	Attributes	Default	Description
`oklch`	`Vector`			The input OKLCH color that you wish to gamut map.
`gamut`	`ColorGamut`	<optional>	sRGBGamut	The gamut object.
`targetSpace`	`ColorSpace`	<optional>	gamut.space	The target color space.
`out`	`Vector`	<optional>	vec3()	The output array to store the mapped color.
`mapping`	`GamutMapMethod`	<optional>	MapToCuspL	The gamut mapping function.
`cusp`	`Vector`	<optional>		Optional, you can provide the cusp values [L, C] to avoid re-computing them.

View Source gamut.js, line 331

Returns:

The mapped color in the target color space.

Type: Vector

# getGamutLMStoRGB(gamut) → {Matrix3x3}

Retrieves the LMS to RGB conversion matrix from the given gamut.

Parameters:

Name	Type	Description
`gamut`	`ColorGamut`	The gamut object.

View Source gamut.js, line 185

Returns:

The LMS to RGB conversion matrix.

Type: Matrix3x3

# hexToRGB(str, outopt) → {Vector}

Converts a hex color string to an RGB array.

Parameters:

Name	Type	Attributes	Default	Description
`str`	`string`			The hex color string.
`out`	`Vector`	<optional>	vec3()	The output array.

View Source util.js, line 58

Returns:

The RGB array.

Type: Vector

# isRGBInGamut(lrgb, epopt) → {boolean}

Checks if an RGB color is within the gamut.

Parameters:

Name	Type	Attributes	Default	Description
`lrgb`	`Vector`			The linear RGB array.
`ep`	`number`	<optional>	GAMUT_EPSILON	The epsilon value for comparison.

View Source util.js, line 99

Returns:

True if the color is within the gamut, false otherwise.

Type: boolean

# lerp(min, max, t) → {number}

Linearly interpolates between two values.

Parameters:

Name	Type	Description
`min`	`number`	The start value.
`max`	`number`	The end value.
`t`	`number`	The interpolation factor between 0 and 1.

View Source util.js, line 21

Returns:

The interpolated value.

Type: number

# lerpAngle(a0, a1, t) → {number}

Linearly interpolates between two angles.

Parameters:

Name	Type	Description
`a0`	`number`	The start angle in degrees.
`a1`	`number`	The end angle in degrees.
`t`	`number`	The interpolation factor between 0 and 1.

View Source util.js, line 217

Returns:

The interpolated angle in degrees.

Type: number

# listColorGamuts() → {Array.<ColorGamut>}

Returns a list of color gamuts.

View Source spaces.js, line 56

Returns:

An array of color gamut objects.

Type: Array.<ColorGamut>

# listColorSpaces() → {Array.<ColorSpace>}

Returns a list of color spaces.

View Source spaces.js, line 28

Returns:

An array of color space objects.

Type: Array.<ColorSpace>

# parse(input, targetSpace, outopt) → {Vector}

Parses a color string and converts it to the target color space.

Parameters:

Name	Type	Attributes	Default	Description
`input`	`string`			The color string to parse.
`targetSpace`	`ColorSpace`			The target color space.
`out`	`Vector`	<optional>	vec3()	The output vector.

View Source core.js, line 283

Returns:

The parsed and converted color.

Type: Vector

# radToDeg(n) → {number}

Converts radians to degrees.

Parameters:

Name	Type	Description
`n`	`number`	The angle in radians.

View Source util.js, line 39

Returns:

The angle in degrees.

Type: number

# sRGBGammaToLinear(val) → {number}

Converts a single sRGB gamma-corrected channel value to linear light (un-companded) form.

Parameters:

Name	Type	Description
`val`	`number`	The sRGB gamma-corrected channel value in the range [0, 1].

View Source spaces/util.js, line 10

Returns:

The linear light channel value.

Type: number

# sRGBLinearToGamma(val) → {number}

Converts a single linear-light channel value to sRGB gamma-corrected form.

Parameters:

Name	Type	Description
`val`	`number`	The linear-light channel value in the range [0, 1].

View Source spaces/util.js, line 32

Returns:

The sRGB gamma-corrected channel value.

Type: number

# serialize(input, inputSpace, outputSpaceopt) → {string}

Serializes a color to a CSS color string.

Parameters:

Name	Type	Attributes	Default	Description
`input`	`Vector`			The input color.
`inputSpace`	`ColorSpace`			The input color space.
`outputSpace`	`ColorSpace`	<optional>	inputSpace	The output color space.

View Source core.js, line 135

Returns:

The serialized color string.

Type: string

# transform(input, matrix, outopt) → {Vector}

Transforms a color vector by the specified 3x3 transformation matrix.

Parameters:

Name	Type	Attributes	Default	Description
`input`	`Vector`			The input color.
`matrix`	`Matrix3x3`			The transformation matrix.
`out`	`Vector`	<optional>	vec3()	The output vector.

View Source core.js, line 110

Returns:

The transformed color.

Type: Vector

# vec3() → {Vector}

Creates a new vec3 array.

View Source util.js, line 193

Returns:

The vec3 array.

Type: Vector

# xyY_to_XYZ(arg, outopt) → {Vector}

Converts xyY color space to XYZ color space.

Parameters:

Name	Type	Attributes	Default	Description
`arg`	`Vector`			The xyY array.
`out`	`Vector`	<optional>	vec3()	The output array.

View Source util.js, line 136

Returns:

The XYZ array.

Type: Vector

Type Definitions

Type: Object

# ChromaticAdaptation

Properties:

Name	Type	Description
`from`	`Matrix3x3`	the matrix to convert from the source whitepoint to the destination whitepoint
`to`	`Matrix3x3`	the matrix to convert from the destination whitepoint to the source whitepoint

View Source core.js, line 27

Type: Object

# ColorGamut

Properties:

Name	Type	Attributes	Description
`space`	`ColorSpace`		the color space associated with this color gamut
`coefficients`	`ColorGamutCoefficients`	<optional>	the coefficients used during gamut mapping from OKLab

View Source core.js, line 46

Type: Array.<Array.<Array.<number>>>

# ColorGamutCoefficients

View Source core.js, line 23

Type: Object

# ColorSpace

Properties:

Name	Type	Attributes	Description
`id`	`String`		the unique identifier for this color space in lowercase
`toXYZ_M`	`Matrix3x3`	<optional>	optional matrix to convert this color directly to XYZ D65
`fromXYZ_M`	`Matrix3x3`	<optional>	optional matrix to convert XYZ D65 to this color space
`toLMS_M`	`Matrix3x3`	<optional>	optional matrix to convert this color space to OKLab's LMS intermediary form
`fromLMS_M`	`Matrix3x3`	<optional>	optional matrix to convert OKLab's LMS intermediary form to this color space
`adapt`	`ChromaticAdaptation`	<optional>	optional chromatic adaptation matrices
`base`	`ColorSpace`	<optional>	an optional base color space that this space is derived from
`toBase`	`function`	<optional>	if a base color space exists, this maps the color to the base space form (e.g. gamma to the linear base space)
`fromBase`	`function`	<optional>	if a base color space exists, this maps the color from the base space form (e.g. the linear base space to the gamma space)

View Source core.js, line 33

# GamutMapMethod(oklch, cusp)

A function that maps an OKLCH color to a lightness value.

Parameters:

Name	Type	Description
`oklch`	`Vector`	The input OKLCH color
`cusp`	`Array.<number>`	A 2D cusp point in the form [L, C]

View Source gamut.js, line 15

Type: Array.<Array.<number>>

# Matrix3x3

A 3x3 matrix represented as an array of arrays.

View Source core.js, line 5

Example

const matrix = [
  [a, b, c],
  [d, e, f],
  [g, h, i]
];

Type: Array.<number>

# Vector

A n-dimensional vector represented as an array of numbers, typically in 3D (X, Y, Z).

View Source core.js, line 16

Example

const vec = [ x, y, z ];