Options
All
  • Public
  • Public/Protected
  • All
Menu

@thi.ng/color

Index

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Type aliases

CSSColorName

CSSColorName: "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "grey" | "green" | "greenyellow" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "rebeccapurple" | "transparent"

Color

Color: Vec

ColorDistance

ColorDistance<T>: FnU2<T, number>

Type parameters

ColorMatrix

ColorMatrix: Tuple<number, 20>

A 4x5 matrix in column-major order

ColorMixFn

ColorMixFn<T>: (out: Color | null, a: T, b: T, t: number) => Color

Type parameters

Type declaration

    • Parameters

      • out: Color | null
      • a: T
      • b: T
      • t: number

      Returns Color

ColorMode

ColorMode: "argb32" | "abgr32" | "hcy" | "hsi" | "hsl" | "hsv" | "lab50" | "lab65" | "lch" | "oklab" | "rgb" | "srgb" | "xyy" | "xyz50" | "xyz65" | "ycc"

ColorOp

ColorOp: (out: Color | null, src: ReadonlyColor) => Color

Type declaration

ColorRangePreset

ColorRangePreset: "light" | "dark" | "bright" | "weak" | "neutral" | "fresh" | "soft" | "hard" | "warm" | "cool" | "intense"

ColorThemePartTuple

ColorThemePartTuple: [ColorRangePreset, CSSColorName, number?] | [ColorRangePreset | CSSColorName, number?] | ColorRangePreset | CSSColorName

Conversions

Conversions: Partial<Record<ColorMode, ColorOp>> & { rgb: ColorOp }

CosGradientSpec

CosGradientSpec: Tuple<CosineCoeffs, 4>

CosineCoeffs

CosineCoeffs: Tuple<number, 4>

CosineGradientPreset

CosineGradientPreset: "blue-cyan" | "blue-magenta-orange" | "blue-white-red" | "cyan-magenta" | "green-blue-orange" | "green-cyan" | "green-magenta" | "green-red" | "heat1" | "magenta-green" | "orange-blue" | "orange-magenta-blue" | "purple-orange-cyan" | "rainbow1" | "rainbow2" | "rainbow3" | "rainbow4" | "red-blue" | "yellow-green-blue" | "yellow-magenta-cyan" | "yellow-purple-magenta" | "yellow-red"

GradientColorStop

GradientColorStop<T>: [number, T]

A tuple of normalized position and color for a gradient stop.

Type parameters

  • T

MaybeColor

MaybeColor: TypedColor<any> | IParsedColor | ReadonlyColor | string | number

ReadonlyColor

ReadonlyColor: ReadonlyVec

Variables

BLACK

BLACK: readonly number[] = ...

RGB black

BLUE

BLUE: readonly number[] = ...

RGB blue

BRADFORD_D50_D65

BRADFORD_D50_D65: number[] = ...

D50 -> D65 chromatic adaptation matrix. Inverse of BRADFORD_D65_D50.

remarks

Reference: http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html

BRADFORD_D65_D50

BRADFORD_D65_D50: number[] = ...

D65 -> D50 chromatic adaptation matrix. Inverse of BRADFORD_D50_D65.

remarks

Reference: http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html

COLOR_RANGES

COLOR_RANGES: Record<ColorRangePreset, ColorRange> = ...

Preset ColorRanges for use with colorsFromRange, colorsFromTheme etc.

CONVERSIONS

CONVERSIONS: Partial<Record<ColorMode, Conversions>> = {}

COSINE_GRADIENTS

COSINE_GRADIENTS: Record<CosineGradientPreset, CosGradientSpec> = ...

Preset cosine gradient definitions. See previews at: https://github.com/thi-ng/umbrella/tree/develop/packages/color#cosine-gradients

remarks

See http://dev.thi.ng/gradients/ for a gradient designer. Note: unlike the linked original Clojure version, these presets here are for RGBA (though the alpha channel is configured to always be 1.0)

CSS_NAMES

CSS_NAMES: Record<CSSColorName, string> = ...

CSS_SYSTEM_COLORS

CSS_SYSTEM_COLORS: SystemColors = ...

Default CSS system colors used by parseCss. Use setSystemColors to provide custom defaults.

CYAN

CYAN: readonly number[] = ...

RGB cyan

D50

D50: number[] = ...

CIE Standard Illuminant D50

D65

D65: number[] = ...

CIE Standard Illuminant D65

EPS

EPS: number = ...

GREEN

GREEN: readonly number[] = ...

RGB green

IDENTITY

IDENTITY: ColorMatrix = ...

INV8BIT

INV8BIT: number = ...

MAGENTA

MAGENTA: readonly number[] = ...

RGB magenta

OKLAB_M1

OKLAB_M1: number[] = ...

OKLAB_M2

OKLAB_M2: number[] = ...

RED

RED: readonly number[] = ...

RGB red

RGB_LUMINANCE_REC2020

RGB_LUMINANCE_REC2020: number[] = ...

ITU-R BT.2020 RGB luminance coeffs

remarks

Reference: https://en.wikipedia.org/wiki/YCbCr#ITU-R_BT.2020_conversion

RGB_LUMINANCE_REC601

RGB_LUMINANCE_REC601: number[] = ...

ITU-R BT.601 RGB luminance coeffs

remarks

Reference: https://en.wikipedia.org/wiki/YCbCr#ITU-R_BT.601_conversion

RGB_LUMINANCE_REC709

RGB_LUMINANCE_REC709: number[] = ...

ITU-R BT.709 RGB luminance coeffs

remarks

Reference: https://en.wikipedia.org/wiki/YCbCr#ITU-R_BT.709_conversion

RGB_XYZ_D50

RGB_XYZ_D50: number[] = ...

sRGB to XYZ D65 conversion matrix

remarks

Reference: http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html

RGB_XYZ_D65

RGB_XYZ_D65: number[] = ...

sRGB to XYZ D65 conversion matrix

remarks

Reference: http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html

WHITE

WHITE: readonly number[] = ...

RGB white

XYZ_RGB_D50

XYZ_RGB_D50: number[] = ...

XYZ D50 to sRGB conversion matrix

remarks

Reference: http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html

XYZ_RGB_D65

XYZ_RGB_D65: number[] = ...

XYZ D65 to sRGB conversion matrix

remarks

Reference: http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html

YELLOW

YELLOW: readonly number[] = ...

RGB yellow

abgr32

abgr32: ColorFactory<ABGR> = ...

analog

analog: MultiFn4<null | Vec, TypedColor<any>, number, undefined | IRandom, Vec> = ...

Returns a random analog color based on given src color and variance delta. Each channel will be randomized by +/- delta, optionally using provided IRandom PRNG.

argb32

argb32: ColorFactory<ARGB> = ...

hcy

hcy: ColorFactory<HCY> = ...

hsi

hsi: ColorFactory<HSI> = ...

hsl

hsl: ColorFactory<HSL> = ...

hsv

hsv: ColorFactory<HSV> = ...

isGray

isGray: MultiFn2<TypedColor<any>, undefined | number, boolean> = ...

labD50

labD50: ColorFactory<LabD50> = ...

labD65

labD65: ColorFactory<LabD65> = ...

lch

lch: ColorFactory<LCH> = ...

Luminance Chroma Hue (conversions assume D50 white point, as per CSS spec).

luminance

luminance: MultiFn1<MaybeColor, number> = ...

Multi-method to compute relative luminance from any supported input color format.

remarks

For many color spaces, the luminance information is readily available and will simply result in looking up the relevant channel value. For others, unless a direct implementation is available, colors will first be converted to linear RGB.

mix

mix: MultiFn4<null | Vec, TypedColor<any>, TypedColor<any>, number, Vec> = ...

Channelwise and ColorMode-aware interpolation between colors a and b using t [0..1] as blend factor. a and b need to be of same color type.

remarks

Any hue channel will always be interpolated using the smallest angle difference (using mixH).

The @thi.ng/math package provides various easing functions to create non-linear interpolations. For example:

example
import { circular } from "@thi.ng/math";

mix([], rgb("#f00"), rgb("#0f0"), 0.5);
// [ 0.5, 0.5, 0, 1 ]

mix([], RED, GREEN, circular(0.5));
// [ 0.1339745962155614, 0.8660254037844386, 0, 1 ]
param out
param a
param b
param t

oklab

oklab: ColorFactory<Oklab> = ...

Oklab color type. Conversions assume D65 white point).

remarks

Reference: https://bottosson.github.io/posts/oklab/

rgb

rgb: ColorFactory<RGB> = ...

srgb

srgb: ColorFactory<SRGB> = ...

xyy

xyy: ColorFactory<XYY> = ...

xyzD50

xyzD50: ColorFactory<XYZD50> = ...

xyzD65

xyzD65: ColorFactory<XYZD65> = ...

ycc

ycc: ColorFactory<YCC> = ...

Functions

Const alpha

  • alpha(src: ReadonlyVec): number

Const analogHsv

  • analogHsv(out: null | Vec, src: ReadonlyVec, deltaH: number, deltaS?: number, deltaV?: number, deltaA?: number, rnd?: IRandom): Vec
  • Similar to {@link analogRGB}. Returns an analog color based on given HSVA color, with each channel randomly varied by given channel-specific delta amounts (and optionally given IRandom PRNG).

    remarks

    This function provides more user control than analog, but the latter is recommended for most use cases.

    By default (unless deltaS, deltaV, deltaA are provided) only the hue of the color will be modulated.

    Parameters

    • out: null | Vec
    • src: ReadonlyVec
    • deltaH: number
    • deltaS: number = 0
    • deltaV: number = 0
    • deltaA: number = 0
    • rnd: IRandom = ...

    Returns Vec

Const analogRgb

  • analogRgb(out: null | Vec, src: ReadonlyVec, deltaR: number, deltaG?: number, deltaB?: number, deltaA?: number, rnd?: IRandom): Vec
  • Similar to {@link analogHSV}. Returns an analog color based on given RGBA color, with each channel randomly varied by given delta amounts (and optionally given IRandom PRNG).

    remarks

    By default the green and blue channel variance will be the same as deltaR.

    Parameters

    • out: null | Vec
    • src: ReadonlyVec
    • deltaR: number
    • deltaG: number = ...
    • deltaB: number = ...
    • deltaA: number = 0
    • rnd: IRandom = ...

    Returns Vec

Const brightness

  • Returns a transformation matrix which adds the given constant offset x to RGB channels. Does NOT modify alpha channel.

    If x < 0 results in darker color. If x > 0 results in brighter color.

    Parameters

    • x: number

      brightness offset

    Returns ColorMatrix

Const clamp

  • clamp(out: null | Vec, src: ReadonlyVec, alpha?: number): Vec
  • Clamps all color channels to [0,1] interval and calls ensureAlpha to ensure alpha channel is defined (if missing sets it to alpha, default: 1).

    Parameters

    • out: null | Vec

      result

    • src: ReadonlyVec

      source color

    • alpha: number = 1

      alpha value

    Returns Vec

Const clampH

  • clampH(out: null | Vec, src: ReadonlyVec, alpha?: number): Vec
  • Similar to clamp, but calls ensureHue to fold (instead of clamping) the hue into [0,1] interval.

    Parameters

    • out: null | Vec

      result

    • src: ReadonlyVec

      source color

    • alpha: number = 1

      alpha value

    Returns Vec

Const closestHue

  • closestHue(h: number): Hue

Const closestPrimaryHue

  • closestPrimaryHue(h: number): Hue

color

Const colorFromRange

  • Takes a ColorRange and options to produce a single new result color. This color is randomized within the channel limits of the given range descriptor. If a base color is provided (via ColorRangeOpts), its hue is used as bias and the variance option defines the max. -/+ normalized hue shift of the result color.

    remarks

    If the base color is a shade of gray (incl. black & white), the result will be another gray and is based on the range's black and white point sub-ranges.

    The alpha channel of the result color will only be randomized (based on range.a settings) iff no base color was provided. If base is given, the result will used the same alpha.

    A custom PRNG can be defined via the rnd option (default: Math.random).

    Parameters

    Returns LCH

colorsFromRange

colorsFromTheme

  • Probabilistic color theme generator. Yield randomized colors based on given weighted set of theme part specs.

    remarks

    Each theme part is a tuple of either:

    • [range, color, weight?]
    • [range, weight?]
    • [color, weight?]

    range can be either a ColorRange or the name of a COLOR_RANGES preset. Likewise, color can be a color instance or CSS color name. The weight of each part defines the relative importance/probability of this theme part, compared to others. Default weight is 1.0.

    example
    [...colorsFromTheme(
    [["cool", "aliceblue"], ["bright", "orange", 0.25], ["hotpink", 0.1]],
    { num: 10 }
    )]

    Parameters

    Returns Generator<LCH, void, unknown>

Const concat

  • Concatenates given color matrices by pairwise multiplying them in left-right order. Returns combined result matrix to be used with transform.

    remarks

    Using concat is the recommended way when applying multiple color transformations in sequence. Since the transforms are combined into a single matrix, it is faster than multiple, individual transform calls and will also produce more correct results, since result color clamping is only applied once at the end (by default, unless disabled).

    Parameters

    Returns ColorMatrix

Const contrast

Const convert

Const cosineCoeffs

Const cosineColor

Const cosineGradient

  • cosineGradient(n: number, spec: CosGradientSpec, tx?: FnU<Vec, Vec>): Vec[]
  • Computes a full cosine gradient and returns an array of n sampled linear RGBA colors. If the optional tx is given, each computed color will be re-interpreted and/or transformed into another Color type.

    remarks

    For CSS/SVG use cases you could use {@link srgba} as transformation function to not convert, but reinterpret & wrap raw color values as SRGBA.

    Parameters

    Returns Vec[]

Const cosineGradientBuffer

  • cosineGradientBuffer(n: number, spec: CosGradientSpec, buffer?: NumericArray, offset?: number, cstride?: number, estride?: number): NumericArray
  • Similar to cosineGradient, but writes results into buffer from given offset and component/element strides. Returns buffer.

    remarks

    Intended use case for this function: 1D texturemap/tonemap generation, e.g. for dataviz etc. Also @see multiColorGradientBuffer.

    Parameters

    • n: number

      number of colors

    • spec: CosGradientSpec

      gradient spec

    • buffer: NumericArray = []

      target buffer/array

    • offset: number = 0

      start index (default: 0)

    • cstride: number = 1

      channel stride (default: 1)

    • estride: number = 4

      element stride (default: 4)

    Returns NumericArray

Const css

  • css(src: string | number | ReadonlyVec): string
  • Takes a color in one of the following formats and tries to convert it to a CSS string:

    • any TypedColor instance
    • raw sRGB(A) vector
    • number (packed 0xaarrggbb int, MUST provide alpha channel)
    • string (passthrough)

    Parameters

    • src: string | number | ReadonlyVec

    Returns string

Const defAnalog

  • defAnalog(a: Fn3<number, number, IRandom, number>, b: Fn3<number, number, IRandom, number>, c: Fn3<number, number, IRandom, number>): Fn4<null | Vec, TypedColor<any>, number, undefined | IRandom, Vec>
  • Parameters

    • a: Fn3<number, number, IRandom, number>
    • b: Fn3<number, number, IRandom, number>
    • c: Fn3<number, number, IRandom, number>

    Returns Fn4<null | Vec, TypedColor<any>, number, undefined | IRandom, Vec>

Const defColor

Const defMix

  • defMix(a: FnN3, b: FnN3, c: FnN3, d: FnN3): ColorMixFn<ReadonlyVec>

Const distCIEDE2000

Const distCMC

Const distChannel

Const distEucledian3

  • distEucledian3(a: ReadonlyVec, b: ReadonlyVec): number
  • Computes eucledian distance between two colors. Only the first 3 color channels will be considered.

    Parameters

    • a: ReadonlyVec
    • b: ReadonlyVec

    Returns number

Const distEucledian4

  • distEucledian4(a: ReadonlyVec, b: ReadonlyVec): number

Const distHsv

  • distHsv(a: ReadonlyVec, b: ReadonlyVec): number
  • Computes distance between two HSV colors, i.e. the eucledian distance between points in a cyclinder.

    Parameters

    • a: ReadonlyVec
    • b: ReadonlyVec

    Returns number

Const distHsvLuma

  • distHsvLuma(a: ReadonlyVec, b: ReadonlyVec): number

Const distHsvSat

  • distHsvSat(a: ReadonlyVec, b: ReadonlyVec): number

Const distRgbBlue

  • distRgbBlue(a: ReadonlyVec, b: ReadonlyVec): number

Const distRgbGreen

  • distRgbGreen(a: ReadonlyVec, b: ReadonlyVec): number

Const distRgbLuma

  • distRgbLuma(a: ReadonlyVec, b: ReadonlyVec): number

Const distRgbRed

  • distRgbRed(a: ReadonlyVec, b: ReadonlyVec): number

Const distSrgbLuma

  • distSrgbLuma(a: ReadonlyVec, b: ReadonlyVec): number

Const dotsH

  • dotsH(cols: (string | ReadonlyVec)[], r?: number, gap?: number, attribs?: IObjectOf<any>): (string | IObjectOf<any>)[]
  • Parameters

    • cols: (string | ReadonlyVec)[]
    • r: number = 25
    • gap: number = 0
    • Optional attribs: IObjectOf<any>

    Returns (string | IObjectOf<any>)[]

Const dotsV

  • dotsV(cols: (string | ReadonlyVec)[], r?: number, gap?: number, attribs?: IObjectOf<any>): (string | IObjectOf<any>)[]
  • Parameters

    • cols: (string | ReadonlyVec)[]
    • r: number = 25
    • gap: number = 0
    • Optional attribs: IObjectOf<any>

    Returns (string | IObjectOf<any>)[]

Const exposure

Const grayscale

  • grayscale(coeffs?: number[], offset?: number): ColorMatrix
  • Returns transformation matrix which computes luminance of user color (optionally with custom coefficients). Does NOT modify alpha channel.

    remarks

    See RGB_LUMINANCE_REC709 for default coefficients

    Parameters

    • coeffs: number[] = ...

      luminance coefficients

    • offset: number = 0

      brightness offset

    Returns ColorMatrix

Const hcyRgb

  • hcyRgb(out: null | Vec, src: ReadonlyVec): Vec

Const hsiRgb

  • hsiRgb(out: null | Vec, src: ReadonlyVec): Vec

Const hslCss

  • hslCss(src: ReadonlyVec): string

Const hslHsv

  • hslHsv(out: null | Vec, src: ReadonlyVec): Vec

Const hslRgb

  • hslRgb(out: null | Vec, src: ReadonlyVec): Vec

Const hsvCss

  • hsvCss(src: ReadonlyVec): string

Const hsvHsl

  • hsvHsl(out: null | Vec, src: ReadonlyVec): Vec

Const hsvRgb

  • hsvRgb(out: null | Vec, src: ReadonlyVec): Vec

Const hueRgb

  • hueRgb(out: null | Vec, hue: number, alpha?: number): Vec
  • Converts a normalized hue to RGBA with given optional alpha value (default: 1).

    Parameters

    • out: null | Vec

      result

    • hue: number

      normalized hue

    • alpha: number = 1

    Returns Vec

Const hueRotate

Const intAbgr32Argb32

  • intAbgr32Argb32(a: number): number

Const intAbgr32Rgb

  • intAbgr32Rgb(out: null | Vec, src: number): Vec

Const intAbgr32Srgb

  • intAbgr32Srgb(out: null | Vec, src: number): Vec

Const intArgb32Abgr32

  • intArgb32Abgr32(a: number): number

Const intArgb32Css

  • intArgb32Css(src: number): string

Const intArgb32Rgb

  • intArgb32Rgb(out: null | Vec, src: number): Vec

Const intArgb32Srgb

  • intArgb32Srgb(out: null | Vec, src: number): Vec

Const intBgr24Rgb

  • intBgr24Rgb(out: null | Vec, src: number): Vec

Const intBgr24Srgb

  • intBgr24Srgb(out: null | Vec, src: number): Vec

Const intRgb24Css

  • intRgb24Css(src: number): string

Const intRgb24Rgb

  • intRgb24Rgb(out: null | Vec, src: number): Vec

Const intRgb24Srgb

  • intRgb24Srgb(out: null | Vec, src: number): Vec

Const invertInt

  • invertInt(src: number): number
  • Inverts the lowest 24 bits of an ARGB int. Does not modify alpha.

    Parameters

    • src: number

      packed RGB int

    Returns number

Const invertRgb

  • invertRgb(out: null | Vec, src: ReadonlyVec): Vec

Const kelvinRgb

  • kelvinRgb(out: null | SRGB, kelvin: number, alpha?: number): SRGB

Const labCss

  • labCss(src: ReadonlyVec): string

Const labLabD50_65

  • labLabD50_65(out: null | Vec, src: ReadonlyVec): Vec

Const labLabD65_50

  • labLabD65_50(out: null | Vec, src: ReadonlyVec): Vec

Const labLch

  • labLch(out: null | Vec, src: ReadonlyVec): Vec

Const labRgb

  • labRgb(out: null | Vec, src: ReadonlyVec): Vec

Const labRgbD65

  • labRgbD65(out: null | Vec, src: ReadonlyVec): Vec

Const labXyz

  • labXyz(out: null | Vec, src: ReadonlyVec, white?: number[]): Vec

Const labXyzD65

  • labXyzD65(out: null | Vec, src: ReadonlyVec): Vec

Const lchCss

  • lchCss(src: ReadonlyVec): string

Const lchLab

  • lchLab(out: null | Vec, src: ReadonlyVec): Vec

Const linearSrgb

  • linearSrgb(x: number): number

Const luminanceAbgr32

  • luminanceAbgr32(argb: ReadonlyVec): number

Const luminanceAlpha

  • Returns transformation matrix which computes luminance of user color (optionally with custom coefficients), uses result as alpha channel and clears RGB channels (all set to zero).

    remarks

    See RGB_LUMINANCE_REC709 for default coefficients

    Parameters

    • coeffs: number[] = ...

      luminance coefficients

    Returns ColorMatrix

Const luminanceArgb32

  • luminanceArgb32(argb: ReadonlyVec): number

Const luminanceIntAbgr32

  • luminanceIntAbgr32(rgb: number): number

Const luminanceIntArgb32

  • luminanceIntArgb32(rgb: number): number

Const luminanceRgb

  • luminanceRgb(rgb: ReadonlyVec, weights?: number[]): number

Const luminanceSrgb

  • luminanceSrgb(rgb: ReadonlyVec): number

Const mixH

  • mixH(a: number, b: number, c: number): number
  • Single channel interpolation for (normalized) hues. Always interpolates via smallest angle difference, i.e. such that the effective abs(a-b) <= 0.5.

    Parameters

    • a: number

      start hue in [0,1) interval

    • b: number

      end hue in [0,1) interval

    • c: number

    Returns number

Const mixHNNN

  • mixHNNN(out: null | Vec, a: ReadonlyVec, b: ReadonlyVec, t: number): Vec

Const mixN

  • mixN(a: number, b: number, c: number): number

Const mixNNHN

  • mixNNHN(out: null | Vec, a: ReadonlyVec, b: ReadonlyVec, t: number): Vec

Const mixNNNN

  • mixNNNN(out: null | Vec, a: ReadonlyVec, b: ReadonlyVec, t: number): Vec
  • Channelwise linear interpolation between colors a and b using t [0..1] as blend factor.

    Parameters

    • out: null | Vec
    • a: ReadonlyVec
    • b: ReadonlyVec
    • t: number

    Returns Vec

Const multiColorGradient

  • Similar to multiCosineGradient, but using any number of gradient color stops and isn't limited to RGB, but for arbitrary color types.

    remarks
    see

    tween

    example
    gradient = multiColorGradient({
    num: 100,
    // LAB color stops
    stops: [
    // pink red
    [0, lch(0.8, 0.8, 0)],
    // green
    [1 / 3, lch(0.8, 0.8, 1 / 3)],
    // blue
    [2 / 3, lch(0.8, 0.8, 2 / 3)],
    // gray
    [1, lch(0.8, 0, 1)],
    ]
    });

    // write gradient as SVG swatches
    writeFileSync(
    `export/lch-multigradient.svg`,
    serialize(
    svg(
    { width: 500, height: 50, convert: true },
    swatchesH(gradient, 5, 50)
    )
    )
    );

    Type parameters

    Parameters

    Returns T[]

Const multiColorGradientBuffer

  • multiColorGradientBuffer<T>(opts: GradientOpts<T>, buffer?: NumericArray, offset?: number, cstride?: number, estride?: number): NumericArray
  • Similar to multiColorGradient, but writes results into buffer from given offset and component/element strides. Returns buffer.

    remarks

    Intended use case for this function: 1D texturemap/tonemap generation, e.g. for dataviz etc. Also @see cosineGradientBuffer.

    Type parameters

    Parameters

    • opts: GradientOpts<T>
    • buffer: NumericArray = []

      target buffer/array

    • offset: number = 0

      start index (default: 0)

    • cstride: number = 1

      channel stride (default: 1)

    • estride: number = 4

      element stride (default: 4)

    Returns NumericArray

Const multiCosineGradient

  • Multi-color cosine gradient generator using linear RGBA color stops. Returns an array of n+1 linear RGBA color samples.

    remarks
    see

    tween

    example
    multiCosineGradient({
    num: 10,
    // gradient stops (normalized positions)
    stops: [[0.1, [1, 0, 0, 1]], [0.5, [0, 1, 0, 1]], [0.9, [0, 0, 1, 1]]],
    // optional color transform/coercion
    tx: srgba
    })

    Parameters

    Returns Vec[]

Const namedHueRgb

  • namedHueRgb(out: null | Vec, hue: Hue, alpha?: number): Vec

Const oklabRgb

  • oklabRgb(out: null | Vec, src: ReadonlyVec): Vec

Const oklabXyzD65

  • oklabXyzD65(out: null | Vec, src: ReadonlyVec): Vec

Const parseCss

  • Attempts to parse given CSS color into an interim ParsedColor type with srgb, hsl, labD50 or lch color modes. Throws an error if any of the validations during parsing failed.

    remarks

    The following syntax versions are supported:

    • CSS named colors
    • CSS system colors @see CSS_SYSTEM_COLORS
    • hex3/4/6/8
    • rgb(r% g% b% / a%?)
    • rgb(r g b / a?)
    • rgb(r,g,b)
    • rgba(r,g,b,a)
    • hsl(h s% l% / a%?)
    • hsl(h,s%,l%)
    • hsla(h,s%,l%,a)
    • lab(l a b / alpha?)
    • lch(l c h / alpha?)

    Hue values can be given according to CSS Color L4 spec (raw, deg, rad, grad, turn): https://www.w3.org/TR/css-color-4/#typedef-hue

    If no alpha channel is given, it will default to 1.0 (fully opaque).

    Note that any named or system CSS colors, hex colors and any RGB colors will be returned as sRGB instance. In former versions of this library (pre 3.0.0), there was only a single RGB type with undefined behaviour re: linear or gamma-encoded versions. Since v3.0.0, {@link rgb} is only used for linear and srgb for non-linear (gamma encoded) RGB colors (CSS uses sRGB by default).

    Parameters

    • src: string | IDeref<string>

    Returns IParsedColor

Const parseHex

  • parseHex(src: string): number

Const proximity

  • proximity(target: ReadonlyVec, dist?: ColorDistance<ReadonlyVec>): (col: ReadonlyVec) => number
  • Takes a target color and optional distance function (default: distEucledian3). Returns a new function which can be used as key function for sort to compute the distance metric of a color to the given target.

    Parameters

    Returns (col: ReadonlyVec) => number

      • (col: ReadonlyVec): number
      • Parameters

        • col: ReadonlyVec

        Returns number

Const proximityABGR32

  • proximityABGR32(target: ReadonlyVec, dist?: ColorDistance<ReadonlyVec>): (col: ReadonlyVec) => number
  • Similar to proximity, but intended as syntax sugar for ABGR input colors. The proximity will still be computed using given distance function (default: distEucledian3) and will be in sRGB space. Hence given target color should be provided in the same space too.

    Parameters

    Returns (col: ReadonlyVec) => number

      • (col: ReadonlyVec): number
      • Parameters

        • col: ReadonlyVec

        Returns number

Const rgbCss

  • rgbCss(src: ReadonlyVec): string

Const rgbHcv

  • rgbHcv(out: null | Vec, src: ReadonlyVec): Vec

Const rgbHcy

  • rgbHcy(out: null | Vec, src: ReadonlyVec): Vec

Const rgbHsi

  • rgbHsi(out: null | Vec, src: ReadonlyVec): Vec

Const rgbHsl

  • rgbHsl(out: null | Vec, src: ReadonlyVec): Vec

Const rgbHsv

  • rgbHsv(out: null | Vec, src: ReadonlyVec): Vec

Const rgbLab

  • rgbLab(out: null | Vec, src: ReadonlyVec): Vec
  • Converts linear RGB to Lab (via XYZ) using D50 white point.

    remarks

    Important: We're using a normalized Lab space w/ all three coordinates divided by 100 (normalized to 100% luminance).

    Parameters

    • out: null | Vec
    • src: ReadonlyVec

    Returns Vec

Const rgbLabD65

  • rgbLabD65(out: null | Vec, src: ReadonlyVec): Vec

Const rgbOklab

  • rgbOklab(out: null | Vec, src: ReadonlyVec): Vec

Const rgbSrgb

  • rgbSrgb(out: null | Vec, src: ReadonlyVec): Vec

Const rgbSrgbApprox

  • rgbSrgbApprox(out: null | Vec, src: ReadonlyVec): Vec

Const rgbXyz

  • rgbXyz(out: null | Vec, src: ReadonlyVec, mat?: number[]): Vec

Const rgbXyzD65

  • rgbXyzD65(out: null | Vec, src: ReadonlyVec): Vec

Const rgbYcc

  • rgbYcc(out: null | Vec, src: ReadonlyVec, luma?: number[]): Vec

Const saturation

Const selectChannel

  • selectChannel(id: number): (col: ReadonlyVec) => number
  • Parameters

    • id: number

    Returns (col: ReadonlyVec) => number

      • (col: ReadonlyVec): number
      • Parameters

        • col: ReadonlyVec

        Returns number

Const sepia

Const setAlpha

  • setAlpha(out: null | Vec, src: ReadonlyVec, alpha: number): Vec

Const setPrecision

  • setPrecision(x: number): void

Const setSystemColors

Const sort

  • sort(colors: ReadonlyVec[], key: Fn<ReadonlyVec, number>, isReverse?: boolean): ReadonlyVec[]
  • Parameters

    • colors: ReadonlyVec[]
    • key: Fn<ReadonlyVec, number>
    • isReverse: boolean = false

    Returns ReadonlyVec[]

Const sortMapped

  • sortMapped<T>(colors: T[], key: Fn<ReadonlyVec, number>, isReverse?: boolean): T[]
  • Similar to sort, but only for memory mapped colors (e.g. mapping a pixel buffer). Does NOT change the order of elements in given colors array, BUT sorts the apparent order by swapping the contents of the backing memory.

    // memory buffer of 4 sRGB colors
    const buf = new Float32Array([0,1,0,1, 0,0.5,0,1, 0,0.25,0,1, 0,0.75,0,1]);

    // map buffer (creates 4 SRGB instances linked to the buffer)
    const pix = srgb.mapBuffer(buf);

    // display original order
    pix.map(css);
    // [ '#00ff00', '#008000', '#004000', '#00bf00' ]

    // sort colors (buffer!) by luminance
    sortMapped(pix, luminanceSrgb);

    // new order
    pix.map(css);
    // [ '#004000', '#008000', '#00bf00', '#00ff00' ]

    // buffer contents have been re-ordered
    buf
    // Float32Array(16) [
    // 0, 0.25, 0, 1, 0,
    // 0.5, 0, 1, 0, 0.75,
    // 0, 1, 0, 1, 0,
    // 1
    // ]

    Type parameters

    Parameters

    • colors: T[]
    • key: Fn<ReadonlyVec, number>
    • isReverse: boolean = false

    Returns T[]

Const srgbCss

  • srgbCss(src: ReadonlyVec): string

Const srgbIntAbgr32

  • srgbIntAbgr32(src: ReadonlyVec): number

Const srgbIntArgb32

  • srgbIntArgb32(src: ReadonlyVec): number

Const srgbLinear

  • srgbLinear(x: number): number

Const srgbRgb

  • srgbRgb(out: null | Vec, src: ReadonlyVec): Vec

Const srgbRgbApprox

  • srgbRgbApprox(out: null | Vec, src: ReadonlyVec): Vec

Const subtract

  • Returns a transformation matrix which subtracts user color from given src color. With the default color white, this results in the inverted color. Does NOT modify alpha channel.

    Parameters

    • src: ReadonlyVec = ...

      source color

    Returns ColorMatrix

Const swatches

  • swatches(cols: (string | ReadonlyVec)[], shapeFn: Fn2<string | ReadonlyVec, number, any[]>, attribs?: IObjectOf<any>): (string | IObjectOf<any>)[]
  • Parameters

    • cols: (string | ReadonlyVec)[]
    • shapeFn: Fn2<string | ReadonlyVec, number, any[]>
    • attribs: IObjectOf<any> = {}

    Returns (string | IObjectOf<any>)[]

Const swatchesH

  • swatchesH(cols: (string | ReadonlyVec)[], w?: number, h?: number, gap?: number, attribs?: IObjectOf<any>): (string | IObjectOf<any>)[]
  • Parameters

    • cols: (string | ReadonlyVec)[]
    • w: number = 5
    • h: number = 50
    • gap: number = 0
    • Optional attribs: IObjectOf<any>

    Returns (string | IObjectOf<any>)[]

Const swatchesV

  • swatchesV(cols: (string | ReadonlyVec)[], w?: number, h?: number, gap?: number, attribs?: IObjectOf<any>): (string | IObjectOf<any>)[]
  • Parameters

    • cols: (string | ReadonlyVec)[]
    • w: number = 50
    • h: number = 5
    • gap: number = 0
    • attribs: IObjectOf<any> = {}

    Returns (string | IObjectOf<any>)[]

Const temperature

Const tint

Const transform

  • transform(out: null | Vec, mat: ColorMatrix, src: ReadonlyVec, clampOut?: boolean): Vec
  • Transforms src RGBA color with given matrix and stores result in out (writes back to src if out is null or undefined). Unless clampOut is false, the result color will be clamped to [0,1] interval.

    Parameters

    • out: null | Vec

      result

    • mat: ColorMatrix

      transform matrix

    • src: ReadonlyVec

      source color

    • clampOut: boolean = true

      true, if result should be clamped to [0..1]

    Returns Vec

Const wavelengthXyz

  • wavelengthXyz(out: null | XYZD65, lambda: number, alpha?: number): XYZD65

Const xyyXyz

  • xyyXyz(out: null | Vec, src: ReadonlyVec): Vec

Const xyzLab

  • xyzLab(out: null | Vec, src: ReadonlyVec, white?: number[]): Vec
  • Converts XYZ to Lab, using provided reference white point (default: D50). Also see xyzLabD65.

    remarks

    Important: We're using a normalized Lab space w/ all three coordinates divided by 100 (normalized to 100% luminance).

    Parameters

    • out: null | Vec
    • src: ReadonlyVec
    • white: number[] = ...

    Returns Vec

Const xyzLabD65

  • xyzLabD65(out: null | Vec, src: ReadonlyVec): Vec

Const xyzOklab

  • xyzOklab(out: null | Vec, src: ReadonlyVec): Vec

Const xyzRgb

  • xyzRgb(out: null | Vec, src: ReadonlyVec, mat?: number[]): Vec

Const xyzRgbD65

  • xyzRgbD65(out: null | Vec, src: ReadonlyVec): Vec

Const xyzXyy

  • xyzXyy(out: null | Vec, src: ReadonlyVec): Vec

Const xyzXyzD50_65

  • xyzXyzD50_65(out: null | Vec, src: ReadonlyVec): Vec

Const xyzXyzD65_50

  • xyzXyzD65_50(out: null | Vec, src: ReadonlyVec): Vec

Const yccRgb

  • yccRgb(out: null | Vec, src: ReadonlyVec, luma?: number[]): Vec

Generated using TypeDoc