@types/chroma-js

  • Version 2.4.4
  • Published
  • 22.1 kB
  • No dependencies
  • MIT license

Install

npm i @types/chroma-js
yarn add @types/chroma-js
pnpm add @types/chroma-js

Overview

TypeScript definitions for chroma-js

Index

Variables

variable chroma

var chroma: chroma.ChromaStatic;

    Interfaces

    interface ChromaStatic

    interface ChromaStatic {}

      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 };

      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;

        method css

        css: (col: string) => Color;

          method cubehelix

          cubehelix: () => Cubehelix;

            method deltaE

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

            method distance

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

            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.

                                interface Color

                                interface Color {}

                                  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.

                                        interface ColorSpaces

                                        interface ColorSpaces {}

                                          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];

                                                                  interface Cubehelix

                                                                  interface Cubehelix {}

                                                                    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

                                                                    interface Scale

                                                                    interface Scale<OutType = Color> {}

                                                                      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;

                                                                                      Type Aliases

                                                                                      type InterpolationMode

                                                                                      type InterpolationMode =
                                                                                      | 'rgb'
                                                                                      | 'hsl'
                                                                                      | 'hsv'
                                                                                      | 'hsi'
                                                                                      | 'lab'
                                                                                      | 'oklab'
                                                                                      | 'lch'
                                                                                      | 'oklch'
                                                                                      | 'hcl'
                                                                                      | 'lrgb';

                                                                                        Package Files (1)

                                                                                        Dependencies (0)

                                                                                        No dependencies.

                                                                                        Dev Dependencies (0)

                                                                                        No dev dependencies.

                                                                                        Peer Dependencies (0)

                                                                                        No peer dependencies.

                                                                                        Badge

                                                                                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/chroma-js.

                                                                                        • Markdown
                                                                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/chroma-js)
                                                                                        • HTML
                                                                                          <a href="https://www.jsdocs.io/package/@types/chroma-js"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>