@types/chroma-js

property brewer

brewer: {
    OrRd: string[];
    PuBu: string[];
    BuPu: string[];
    Oranges: string[];
    BuGn: string[];
    YlOrBr: string[];
    YlGn: string[];
    Reds: string[];
    RdPu: string[];
    Greens: string[];
    YlGnBu: string[];
    Purples: string[];
    GnBu: string[];
    Greys: string[];
    YlOrRd: string[];
    PuRd: string[];
    Blues: string[];
    PuBuGn: string[];
    Viridis: string[];
    Spectral: string[];
    RdYlGn: string[];
    RdBu: string[];
    PiYG: string[];
    PRGn: string[];
    RdYlBu: string[];
    BrBG: string[];
    RdGy: string[];
    PuOr: string[];
    Set2: string[];
    Accent: string[];
    Set1: string[];
    Set3: string[];
    Dark2: string[];
    Paired: string[];
    Pastel2: string[];
    Pastel1: string[];
};

• chroma.brewer is an map of ColorBrewer scales that are included in chroma.js for convenience. chroma.scale uses the colors to construct.

method average

average: (
    colors: Array<string | Color>,
    colorSpace?: InterpolationMode,
    weights?: number[]
) => Color;

• Similar to mix, but accepts more than two colors. Simple averaging of R,G,B components and the alpha channel.

method bezier

bezier: (colors: string[]) => { (t: number): Color; scale(): Scale };

• Returns a function that [bezier-interpolates]https://www.vis4.net/blog/posts/mastering-multi-hued-color-scales/ between colors in Lab space. The input range of the function is [0..1]. You can convert it to a scale instance by calling chroma.bezier(...).scale()

method blend

blend: (
    color1: string | Color,
    color2: string | Color,
    blendMode:
        | 'multiply'
        | 'darken'
        | 'lighten'
        | 'screen'
        | 'overlay'
        | 'burn'
        | 'dodge'
) => Color;

• Blends two colors using RGB channel-wise blend functions.

method cmyk

cmyk: (c: number, m: number, y: number, k: number) => Color;

method contrast

contrast: (color1: string | Color, color2: string | Color) => number;

• Computes the WCAG contrast ratio between two colors. A minimum contrast of 4.5:1 is recommended https://www.w3.org/TR/WCAG20-TECHS/G18.html to ensure that text is still readable against a background color.

method css

css: (col: string) => Color;

method cubehelix

cubehelix: () => Cubehelix;

method deltaE

deltaE: (
    color1: string | Color,
    color2: string | Color,
    L?: number,
    C?: number
) => number;

• Computes color difference https://en.wikipedia.org/wiki/Color_difference#CMC_l:c_.281984.29 as developed by the Colour Measurement Committee of the Society of Dyers and Colourists (CMC) in 1984. The implementation is adapted from Bruce Lindbloom. https://web.archive.org/web/20160306044036/http://www.brucelindbloom.com/javascript/ColorDiff.js The parameters L (default 1) and C (default 1) are weighting factors for lightness and chromacity.

method distance

distance: (
    color1: string | Color,
    color2: string | Color,
    colorSpace?: keyof ColorSpaces
) => number;

• Computes the eucledian distance between two colors in a given color space (default is 'lab'). https://en.wikipedia.org/wiki/Euclidean_distance#Three_dimensions

method gl

gl: (red: number, green: number, blue: number, alpha?: number) => Color;

• GL is a variant of RGB(A), with the only difference that the components are normalized to the range of 0..1.

method hcl

hcl: (h: number, c: number, l: number, alpha?: number) => Color;

• Same meaning as lch(), but in different order.

method hex

hex: (color: string) => Color;

• Create a color from a hex or string representation (as supported in CSS).

  This is an alias of chroma.css().

  Parameter color

  The string to convert to a color. the color object.

method hsl

hsl: (h: number, s: number, l: number, alpha?: number) => Color;

method hsv

hsv: (h: number, s: number, v: number, alpha?: number) => Color;

method interpolate

interpolate: (
    color1: string | Color,
    color2: string | Color,
    f?: number,
    colorSpace?: InterpolationMode
) => Color;

• Alias for .

method lab

lab: (lightness: number, a: number, b: number, alpha?: number) => Color;

method lch

lch: (l: number, c: number, h: number, alpha?: number) => Color;

method limits

limits: (data: number[], mode: 'e' | 'q' | 'l' | 'k', c: number) => number[];

• Helper function that computes class breaks based on data. Mode: equidistant 'e' breaks are computed by dividing the total range of the data into n groups of equal size. quantile 'q' input domain is divided by quantile ranges. logarithmic 'l' breaks are equidistant breaks but on a logarithmic scale. k-means 'k' breaks use the 1-dimensional [k-means clustering algorithm]https://en.wikipedia.org/wiki/K-means_clustering to find (roughly) n groups of "similar" values. Note that this k-means implementation does not guarantee to find exactly n groups.

method mix

mix: (
    color1: string | Color,
    color2: string | Color,
    f?: number,
    colorSpace?: InterpolationMode
) => Color;

• Mixes two colors. The mix ratio is a value between 0 and 1. The color mixing produces different results based the color space used for interpolation. Defaults to LRGB.

  Example 1

  chroma.mix('red', 'blue', 0.25) // => #bf0040

  Example 2

  chroma.mix('red', 'blue', 0.5, 'hsl') // => #ff00ff

method oklab

oklab: (lightness: number, a: number, b: number, alpha?: number) => Color;

method oklch

oklch: (l: number, c: number, h: number, alpha?: number) => Color;

method random

random: () => Color;

• Returns a random color.

method rgb

rgb: (r: number, g: number, b: number, alpha?: number) => Color;

method scale

scale: {
    (name: string | Color): Scale;
    (colors?: (string | Color)[]): Scale<Color>;
};

method temperature

temperature: (t: number) => Color;

• Returns a color from the color temperature scale. light 2000K, bright sunlight 6000K. Based on Neil Bartlett's implementation. https://github.com/neilbartlett/color-temperature

method valid

valid: (color: any, mode?: string) => boolean;

call signature

(color: string | number | Color): Color;

• Creates a color from a string representation (as supported in CSS). Creates a color from a number representation [0; 16777215]

  Parameter color

  The string to convert to a color. the color object.

call signature

(a: number, b: number, c: number, colorSpace?: keyof ColorSpaces): Color;

• Create a color in the specified color space using a, b and c as values.

  Parameter colorSpace

  The color space to use. Defaults to "rgb". the color object.

call signature

(
    a: number,
    b: number,
    c: number,
    d: number,
    colorSpace?: keyof ColorSpaces
): Color;

call signature

(values: number[], colorSpace?: keyof ColorSpaces): Color;

• Create a color in the specified color space using values.

  Parameter values

  An array of values (e.g. [r, g, b, a?]).

  Parameter colorSpace

  The color space to use. Defaults to "rgb". the color object.

property clipped

clipped: () => boolean;

• Test if a color has been clipped or not. Colors generated from CIELab color space may have their RGB channels clipped to the range of [0..255]. Colors outside that range may exist in nature but are not displayable on RGB monitors (such as ultraviolet).

  Example 1

  chroma.hcl(50, 40, 20).clipped() === true

property cmyk

cmyk: () => ColorSpaces['cmyk'];

• Just like color.rgb but adds the alpha channel to the returned array.

  Example 1

  chroma('orange').rgba() === [255,165,0,1] chroma('hsla(20, 100%, 40%, 0.5)').rgba() === [204,68,0,0.5]

property gl

gl: () => ColorSpaces['gl'];

• Returns an array with the cyan, magenta, yellow, and key (black) components, each as a normalized value between 0 and 1.

  Example 1

  chroma('33cc00').gl() === [0.2,0.8,0,1]

property hcl

hcl: () => ColorSpaces['hcl'];

• Alias of [lch](#color-lch), but with the components in reverse order.

  Example 1

  chroma('skyblue').hcl() === [235.11,25.94,79.21]

property hsi

hsi: () => ColorSpaces['hsi'];

• Returns an array with the hue, saturation, and intensity components, each as number between 0 and 255. Note that for hue-less colors (black, white, and grays), the hue component will be NaN.

  Example 1

  chroma('orange').hsi() === [39.64,1,0.55] chroma('white').hsi() === [NaN,0,1]

property hsl

hsl: () => ColorSpaces['hsl'];

• Returns an array with the hue, saturation, and lightness component. Hue is the color angle in degree (0..360), saturation and lightness are within 0..1. Note that for hue-less colors (black, white, and grays), the hue component will be NaN.

  Example 1

  chroma('orange').hsl() === [38.82,1,0.5,1] chroma('white').hsl() === [NaN,0,1,1]

property hsv

hsv: () => ColorSpaces['hsv'];

• Returns an array with the hue, saturation, and value components. Hue is the color angle in degree (0..360), saturation and value are within 0..1. Note that for hue-less colors (black, white, and grays), the hue component will be NaN.

  Example 1

  chroma('orange').hsv() === [38.82,1,1] chroma('white').hsv() === [NaN,0,1]

property lab

lab: () => ColorSpaces['lab'];

• Returns an array with the **L**, **a**, and **b** components.

  Example 1

  chroma('orange').lab() === [74.94,23.93,78.95]

property lch

lch: () => ColorSpaces['lch'];

• Returns an array with the **Lightness**, **chroma**, and **hue** components.

  Example 1

  chroma('skyblue').lch() === [79.21,25.94,235.11]

property oklab

oklab: () => ColorSpaces['oklab'];

• Returns an array with the **L**, **a**, and **b** components.

  Example 1

  chroma('orange').oklab() === [0.7927,0.0566,0.1614]

property oklch

oklch: () => ColorSpaces['oklch'];

• Returns an array with the **Lightness**, **chroma**, and **hue** components.

  Example 1

  chroma('skyblue').oklch() === [0.8148,0.0819,225.8]

property rgb

rgb: (round?: boolean) => ColorSpaces['rgb'];

• Returns an array with the red, green, and blue component, each as number within the range 0..255. Chroma internally stores RGB channels as floats but rounds the numbers before returning them. You can pass false to prevent the rounding.

  Example 1

  chroma('orange').rgb() === [255,165,0] chroma('orange').darken().rgb() === [198,118,0] chroma('orange').darken().rgb(false) === [198.05,118.11,0]

property rgba

rgba: (round?: boolean) => ColorSpaces['rgba'];

• Just like color.rgb but adds the alpha channel to the returned array.

  Example 1

  chroma('orange').rgba() === [255,165,0,1] chroma('hsla(20, 100%, 40%, 0.5)').rgba() === [204,68,0,0.5]

method alpha

alpha: { (a: number): Color; (): number };

• Get and set the color opacity.

method brighten

brighten: (f?: number) => Color;

method css

css: (mode?: 'hsl') => string;

• Returns a RGB() or HSL() string representation that can be used as CSS-color definition. mode defaults to 'rgb'

method darken

darken: (f?: number) => Color;

method desaturate

desaturate: (s?: number) => Color;

• Similar to saturate, but the opposite direction.

method get

get: (modechan: string) => number;

• Returns a single channel value. Also

  See Also

  • set

method hex

hex: (mode?: 'auto' | 'rgb' | 'rgba') => string;

• Get color as hexadecimal string.

  Parameter mode

  auto - string will include alpha channel only if it's less than 1. rgb - string will not include alpha channel. rgba - string will include alpha channel.

  Example 1

  chroma('orange').hex() === '#ffa500' chroma('orange').alpha(0.5).hex() === '#ffa50080' chroma('orange').alpha(0.5).hex('rgb') === '#ffa500'

method luminance

luminance: { (): number; (l: number, colorSpace?: InterpolationMode): Color };

• Relative brightness, according to the [WCAG]http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef definition. Normalized to 0 for darkest black and 1 for lightest white.

• Set luminance of color. The source color will be interpolated with black or white until the correct luminance is found. The color space used defaults to RGB.

method mix

mix: (
    targetColor: string | Color,
    f?: number,
    colorSpace?: keyof ColorSpaces
) => Color;

method name

name: () => string;

• Returns the named color. Falls back to hexadecimal RGB string, if the color isn't present.

method num

num: () => number;

• Returns the numeric representation of the hexadecimal RGB color.

  Example 1

  chroma('#000000').num() === 0 chroma('#0000ff').num() === 255 chroma('#00ff00').num() === 65280 chroma('#ff0000').num() === 16711680

method saturate

saturate: (s?: number) => Color;

• Changes the saturation of a color by manipulating the Lch chromacity.

method set

set: (modechan: string, v: number | string) => Color;

• Changes a single channel and returns the result a new chroma object.

  Example 1

  // half Lab lightness chroma('orangered').set('lab.l', '*0.5')

  Example 2

  // double Lch saturation chroma('darkseagreen').set('lch.c', '*2')

method temperature

temperature: () => number;

• Estimate the temperature in Kelvin of any given color, though this makes the only sense for colors from the [temperature gradient]ChromaStatic.temperature above.

property cmyk

cmyk: [number, number, number, number];

property gl

gl: [number, number, number, number];

property hcl

hcl: [number, number, number];

property hsi

hsi: [number, number, number];

property hsl

hsl: [number, number, number];

property hsv

hsv: [number, number, number];

property lab

lab: [number, number, number];

property lch

lch: [number, number, number];

property oklab

oklab: [number, number, number];

property oklch

oklch: [number, number, number];

property rgb

rgb: [number, number, number];

property rgba

rgba: [number, number, number, number];

method gamma

gamma: (g: number) => Cubehelix;

• gamma factor can be used to emphasise low or high intensity values, default=1

method lightness

lightness: (l: number[]) => Cubehelix;

• lightness range: default: [0,1] (black -> white)

method rotations

rotations: (r: number) => Cubehelix;

• number (and direction) of hue rotations (e.g. 1=360°, 1.5=540°`), default=-1.5

method scale

scale: () => Scale;

• You can call cubehelix.scale() to use the cube-helix through the chroma.scale interface.

method start

start: (s: number) => Cubehelix;

• Set start color for hue rotation, default=300

method cache

cache: (use: boolean) => boolean;

method classes

classes: (c: number | number[]) => this;

• If you want the scale function to return a distinct set of colors instead of a continuous gradient, you can use scale.classes. If you pass a number the scale will broken into equi-distant classes. You can also define custom class breaks by passing them as array

method colors

colors: {
    (
        c: number | undefined,
        format:
            | undefined
            | null
            | 'alpha'
            | 'darken'
            | 'brighten'
            | 'saturate'
            | 'desaturate'
    ): Color[];
    (c: number, format: 'luminance' | 'temperature'): number[];
    <K extends keyof ColorSpaces>(c: number, format: K): ColorSpaces[K][];
    (c: number, format?: 'hex' | 'name'): string[];
};

• You can call scale.colors(n) to quickly grab c equi-distant colors from a color scale. If called with no arguments, scale.colors returns the original array of colors used to create the scale.

method correctLightness

correctLightness: (enable?: boolean) => this;

method domain

domain: (d?: number[], n?: number, mode?: string) => this;

method gamma

gamma: (g: number) => this;

method mode

mode: (mode: InterpolationMode) => this;

method out

out: {
    (format: null): Scale;
    <K extends keyof ColorSpaces>(format: K): Scale<ColorSpaces[K]>;
    (format: 'hex'): Scale<string>;
};

• Set out format for scale() call. Passing null will result in a scale which outputs colors.

method padding

padding: (p: number | number[]) => this;

call signature

(c: string[]): Scale;

call signature

(value: number | null | undefined): OutType;