@types/chroma-js

  • Version 2.1.3
  • Published
  • 20.3 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[];
      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 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) => Color;

              method hsv

              hsv: (h: number, s: number, v: 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) => 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 random

                    random: () => Color;
                    • Returns a random color.

                    method rgb

                    rgb: (r: number, g: number, b: 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 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 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 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'
                                                                              | 'lch'
                                                                              | '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>