@types/tinycolor2

  • Version 1.4.3
  • Published
  • 24.1 kB
  • No dependencies
  • MIT license

Install

npm i @types/tinycolor2
yarn add @types/tinycolor2
pnpm add @types/tinycolor2

Overview

TypeScript definitions for tinycolor

Index

Variables

variable tinycolor

const tinycolor: tinycolor.Constructor;

    Interfaces

    interface Constructor

    interface Constructor {}

      property hexNames

      hexNames: {
      f0f8ff: 'aliceblue';
      faebd7: 'antiquewhite';
      '0ff': 'aqua' | 'cyan';
      '7fffd4': 'aquamarine';
      f0ffff: 'azure';
      f5f5dc: 'beige';
      ffe4c4: 'bisque';
      '000': 'black';
      ffebcd: 'blanchedalmond';
      '00f': 'blue';
      '8a2be2': 'blueviolet';
      a52a2a: 'brown';
      deb887: 'burlywood';
      ea7e5d: 'burntsienna';
      '5f9ea0': 'cadetblue';
      '7fff00': 'chartreuse';
      d2691e: 'chocolate';
      ff7f50: 'coral';
      '6495ed': 'cornflowerblue';
      fff8dc: 'cornsilk';
      dc143c: 'crimson';
      '00008b': 'darkblue';
      '008b8b': 'darkcyan';
      b8860b: 'darkgoldenrod';
      a9a9a9: 'darkgray' | 'darkgrey';
      '006400': 'darkgreen';
      bdb76b: 'darkkhaki';
      '8b008b': 'darkmagenta';
      '556b2f': 'darkolivegreen';
      ff8c00: 'darkorange';
      '9932cc': 'darkorchid';
      '8b0000': 'darkred';
      e9967a: 'darksalmon';
      '8fbc8f': 'darkseagreen';
      '483d8b': 'darkslateblue';
      '2f4f4f': 'darkslategray' | 'darkslategrey';
      '00ced1': 'darkturquoise';
      '9400d3': 'darkviolet';
      ff1493: 'deeppink';
      '00bfff': 'deepskyblue';
      '696969': 'dimgray' | 'dimgrey';
      '1e90ff': 'dodgerblue';
      b22222: 'firebrick';
      fffaf0: 'floralwhite';
      '228b22': 'forestgreen';
      f0f: 'fuchsia' | 'magenta';
      dcdcdc: 'gainsboro';
      f8f8ff: 'ghostwhite';
      ffd700: 'gold';
      daa520: 'goldenrod';
      '808080': 'gray' | 'grey';
      '008000': 'green';
      adff2f: 'greenyellow';
      f0fff0: 'honeydew';
      ff69b4: 'hotpink';
      cd5c5c: 'indianred';
      '4b0082': 'indigo';
      fffff0: 'ivory';
      f0e68c: 'khaki';
      e6e6fa: 'lavender';
      fff0f5: 'lavenderblush';
      '7cfc00': 'lawngreen';
      fffacd: 'lemonchiffon';
      add8e6: 'lightblue';
      f08080: 'lightcoral';
      e0ffff: 'lightcyan';
      fafad2: 'lightgoldenrodyellow';
      d3d3d3: 'lightgray' | 'lightgrey';
      '90ee90': 'lightgreen';
      ffb6c1: 'lightpink';
      ffa07a: 'lightsalmon';
      '20b2aa': 'lightseagreen';
      '87cefa': 'lightskyblue';
      '789': 'lightslategray' | 'lightslategrey';
      b0c4de: 'lightsteelblue';
      ffffe0: 'lightyellow';
      '0f0': 'lime';
      '32cd32': 'limegreen';
      faf0e6: 'linen';
      '800000': 'maroon';
      '66cdaa': 'mediumaquamarine';
      '0000cd': 'mediumblue';
      ba55d3: 'mediumorchid';
      '9370db': 'mediumpurple';
      '3cb371': 'mediumseagreen';
      '7b68ee': 'mediumslateblue';
      '00fa9a': 'mediumspringgreen';
      '48d1cc': 'mediumturquoise';
      c71585: 'mediumvioletred';
      '191970': 'midnightblue';
      f5fffa: 'mintcream';
      ffe4e1: 'mistyrose';
      ffe4b5: 'moccasin';
      ffdead: 'navajowhite';
      '000080': 'navy';
      fdf5e6: 'oldlace';
      '808000': 'olive';
      '6b8e23': 'olivedrab';
      ffa500: 'orange';
      ff4500: 'orangered';
      da70d6: 'orchid';
      eee8aa: 'palegoldenrod';
      '98fb98': 'palegreen';
      afeeee: 'paleturquoise';
      db7093: 'palevioletred';
      ffefd5: 'papayawhip';
      ffdab9: 'peachpuff';
      cd853f: 'peru';
      ffc0cb: 'pink';
      dda0dd: 'plum';
      b0e0e6: 'powderblue';
      '800080': 'purple';
      '663399': 'rebeccapurple';
      f00: 'red';
      bc8f8f: 'rosybrown';
      '4169e1': 'royalblue';
      '8b4513': 'saddlebrown';
      fa8072: 'salmon';
      f4a460: 'sandybrown';
      '2e8b57': 'seagreen';
      fff5ee: 'seashell';
      a0522d: 'sienna';
      c0c0c0: 'silver';
      '87ceeb': 'skyblue';
      '6a5acd': 'slateblue';
      '708090': 'slategray' | 'slategrey';
      fffafa: 'snow';
      '00ff7f': 'springgreen';
      '4682b4': 'steelblue';
      d2b48c: 'tan';
      '008080': 'teal';
      d8bfd8: 'thistle';
      ff6347: 'tomato';
      '40e0d0': 'turquoise';
      ee82ee: 'violet';
      f5deb3: 'wheat';
      fff: 'white';
      f5f5f5: 'whitesmoke';
      ff0: 'yellow';
      '9acd32': 'yellowgreen';
      };
      • key: hex value value: string name ex. hexnames["f00"] --> "red"

      property names

      names: {
      aliceblue: 'f0f8ff';
      antiquewhite: 'faebd7';
      aqua: '0ff';
      aquamarine: '7fffd4';
      azure: 'f0ffff';
      beige: 'f5f5dc';
      bisque: 'ffe4c4';
      black: '000';
      blanchedalmond: 'ffebcd';
      blue: '00f';
      blueviolet: '8a2be2';
      brown: 'a52a2a';
      burlywood: 'deb887';
      burntsienna: 'ea7e5d';
      cadetblue: '5f9ea0';
      chartreuse: '7fff00';
      chocolate: 'd2691e';
      coral: 'ff7f50';
      cornflowerblue: '6495ed';
      cornsilk: 'fff8dc';
      crimson: 'dc143c';
      cyan: '0ff';
      darkblue: '00008b';
      darkcyan: '008b8b';
      darkgoldenrod: 'b8860b';
      darkgray: 'a9a9a9';
      darkgreen: '006400';
      darkgrey: 'a9a9a9';
      darkkhaki: 'bdb76b';
      darkmagenta: '8b008b';
      darkolivegreen: '556b2f';
      darkorange: 'ff8c00';
      darkorchid: '9932cc';
      darkred: '8b0000';
      darksalmon: 'e9967a';
      darkseagreen: '8fbc8f';
      darkslateblue: '483d8b';
      darkslategray: '2f4f4f';
      darkslategrey: '2f4f4f';
      darkturquoise: '00ced1';
      darkviolet: '9400d3';
      deeppink: 'ff1493';
      deepskyblue: '00bfff';
      dimgray: '696969';
      dimgrey: '696969';
      dodgerblue: '1e90ff';
      firebrick: 'b22222';
      floralwhite: 'fffaf0';
      forestgreen: '228b22';
      fuchsia: 'f0f';
      gainsboro: 'dcdcdc';
      ghostwhite: 'f8f8ff';
      gold: 'ffd700';
      goldenrod: 'daa520';
      gray: '808080';
      green: '008000';
      greenyellow: 'adff2f';
      grey: '808080';
      honeydew: 'f0fff0';
      hotpink: 'ff69b4';
      indianred: 'cd5c5c';
      indigo: '4b0082';
      ivory: 'fffff0';
      khaki: 'f0e68c';
      lavender: 'e6e6fa';
      lavenderblush: 'fff0f5';
      lawngreen: '7cfc00';
      lemonchiffon: 'fffacd';
      lightblue: 'add8e6';
      lightcoral: 'f08080';
      lightcyan: 'e0ffff';
      lightgoldenrodyellow: 'fafad2';
      lightgray: 'd3d3d3';
      lightgreen: '90ee90';
      lightgrey: 'd3d3d3';
      lightpink: 'ffb6c1';
      lightsalmon: 'ffa07a';
      lightseagreen: '20b2aa';
      lightskyblue: '87cefa';
      lightslategray: '789';
      lightslategrey: '789';
      lightsteelblue: 'b0c4de';
      lightyellow: 'ffffe0';
      lime: '0f0';
      limegreen: '32cd32';
      linen: 'faf0e6';
      magenta: 'f0f';
      maroon: '800000';
      mediumaquamarine: '66cdaa';
      mediumblue: '0000cd';
      mediumorchid: 'ba55d3';
      mediumpurple: '9370db';
      mediumseagreen: '3cb371';
      mediumslateblue: '7b68ee';
      mediumspringgreen: '00fa9a';
      mediumturquoise: '48d1cc';
      mediumvioletred: 'c71585';
      midnightblue: '191970';
      mintcream: 'f5fffa';
      mistyrose: 'ffe4e1';
      moccasin: 'ffe4b5';
      navajowhite: 'ffdead';
      navy: '000080';
      oldlace: 'fdf5e6';
      olive: '808000';
      olivedrab: '6b8e23';
      orange: 'ffa500';
      orangered: 'ff4500';
      orchid: 'da70d6';
      palegoldenrod: 'eee8aa';
      palegreen: '98fb98';
      paleturquoise: 'afeeee';
      palevioletred: 'db7093';
      papayawhip: 'ffefd5';
      peachpuff: 'ffdab9';
      peru: 'cd853f';
      pink: 'ffc0cb';
      plum: 'dda0dd';
      powderblue: 'b0e0e6';
      purple: '800080';
      rebeccapurple: '663399';
      red: 'f00';
      rosybrown: 'bc8f8f';
      royalblue: '4169e1';
      saddlebrown: '8b4513';
      salmon: 'fa8072';
      sandybrown: 'f4a460';
      seagreen: '2e8b57';
      seashell: 'fff5ee';
      sienna: 'a0522d';
      silver: 'c0c0c0';
      skyblue: '87ceeb';
      slateblue: '6a5acd';
      slategray: '708090';
      slategrey: '708090';
      snow: 'fffafa';
      springgreen: '00ff7f';
      steelblue: '4682b4';
      tan: 'd2b48c';
      teal: '008080';
      thistle: 'd8bfd8';
      tomato: 'ff6347';
      turquoise: '40e0d0';
      violet: 'ee82ee';
      wheat: 'f5deb3';
      white: 'fff';
      whitesmoke: 'f5f5f5';
      yellow: 'ff0';
      yellowgreen: '9acd32';
      };
      • key: 'real' color name value: hex value ex. names["red"] --> "f00"

      method equals

      equals: (color1?: ColorInput, color2?: ColorInput) => boolean;
      • Compares two colors. Each colors can be any color inputs.

      method fromRatio

      fromRatio: (ratio?: ColorInputWithoutInstance) => Instance;
      • Create a tinycolor instance based off the relative values. Works with any color formats

        Parameter ratio

        the relative color/hue values to apply to the new instance.

      method isReadable

      isReadable: (
      color1: ColorInput,
      color2: ColorInput,
      wcag2?: WCAG2Options
      ) => boolean;
      • Ensure that foreground and background color combinations meet WCAG2 guidelines.

        Parameter color1

        the fore color wanted.

        Parameter color2

        the back color wanted.

        Parameter wcag2

        WCAG option. If the entire object is absent, function use the default of {level:"AA",size:"small"}.

        Parameter

        wcag2.level - The 'level' property states 'AA' or 'AAA' if missing or invalid, it defaults to 'AA'

        Parameter

        wcag2.size - The 'size' property states 'large' or 'small' if missing or invalid, it defaults to 'small'.

      method mix

      mix: (color1: ColorInput, color2: ColorInput, amount?: number) => Instance;

        method mostReadable

        mostReadable: (
        baseColor: ColorInput,
        colorList: ColorInput[],
        args?: MostReadableArgs
        ) => Instance;
        • Given a base color and a list of possible foreground or background colors for that base, returns the most readable color. Optionally returns Black or White if the most readable color is unreadable.

          Parameter color

          the base color.

          Parameter colorsToCompare

          array of colors to pick the most readable one from.

          Parameter args

          and object with extra arguments

        method random

        random: () => Instance;
        • Returns a random color

        method readability

        readability: (color1: ColorInput, color2: ColorInput) => number;
        • Compares the two colors and returns the constrast between two colors as a number.

          Parameter color1

          the first color to be used in the comparison.

          Parameter color2

          the second color to be used in the comparison.

        construct signature

        new (color?: ColorInput, opts?: ConstructorOptions): Instance;
        • Create a tinycolor instance of the color named.

          Parameter color

          the color as one of the valid color input format.

        call signature

        (color?: ColorInput, opts?: ConstructorOptions): Instance;

          interface ConstructorOptions

          interface ConstructorOptions {}

            property format

            format?: string | undefined;

              property gradientType

              gradientType?: boolean | undefined;

                interface Instance

                interface Instance {}

                  method analogous

                  analogous: (results?: number, slices?: number) => Instance[];
                  • Gets an analogous color scheme based off of the current color.

                    Parameter results

                    The amount of results to return. Default value: 6.

                    Parameter slices

                    The amount to slice the input color by. Default value: 30.

                  method brighten

                  brighten: (amount?: number) => Instance;
                  • Brighten the color a given amount.

                    Parameter amount

                    The amount to brighten by. The valid range is 0 to 100. Default value: 10.

                  method clone

                  clone: () => Instance;
                  • Gets a new instance with the current color

                  method complement

                  complement: () => Instance;
                  • Gets the complement of the current color

                  method darken

                  darken: (amount?: number) => Instance;
                  • Darken the color a given amount. Providing 100 will always return black.

                    Parameter amount

                    The amount to darken by. The valid range is 0 to 100. Default value: 10.

                  method desaturate

                  desaturate: (amount?: number) => Instance;
                  • Desaturate the color a given amount. Providing 100 will is the same as calling greyscale.

                    Parameter amount

                    The amount to desaturate by. The valid range is 0 to 100. Default value: 10.

                  method getAlpha

                  getAlpha: () => number;
                  • Returns the alpha value of the color

                  method getBrightness

                  getBrightness: () => number;
                  • Returns the perceived brightness of the color, from 0-255.

                  method getFormat

                  getFormat: () => string;
                  • Returns the format used to create the tinycolor instance.

                  method getLuminance

                  getLuminance: () => number;
                  • Returns the perceived luminance of a color, from 0-1.

                  method getOriginalInput

                  getOriginalInput: () => ColorInput;
                  • Returns the input passed into the constructer used to create the tinycolor instance.

                  method greyscale

                  greyscale: () => Instance;
                  • Completely desaturates a color into greyscale. Same as calling desaturate(100).

                  method isDark

                  isDark: () => boolean;
                  • Return an indication whether the color's perceived brightness is dark.

                  method isLight

                  isLight: () => boolean;
                  • Return an indication whether the color's perceived brightness is light.

                  method isValid

                  isValid: () => boolean;
                  • Return an indication whether the color was successfully parsed.

                  method lighten

                  lighten: (amount?: number) => Instance;
                  • Lighten the color a given amount. Providing 100 will always return white.

                    Parameter amount

                    The amount to lighten by. The valid range is 0 to 100. Default value: 10.

                  method monochromatic

                  monochromatic: (results?: number) => Instance[];
                  • Gets a monochromatic color scheme based off of the current color.

                    Parameter results

                    The amount of results to return. Default value: 6.

                  method saturate

                  saturate: (amount?: number) => Instance;
                  • Saturate the color a given amount.

                    Parameter amount

                    The amount to saturate by. The valid range is 0 to 100. Default value: 10.

                  method setAlpha

                  setAlpha: (alpha: number) => Instance;
                  • Sets the alpha value on the current color.

                    Parameter alpha

                    The new alpha value. The accepted range is 0-1.

                  method spin

                  spin: (amount: number) => Instance;
                  • Spin the hue a given amount. Calling with 0, 360, or -360 will do nothing.

                    Parameter amount

                    The amount to spin by. The valid range is -360 to 360.

                  method splitcomplement

                  splitcomplement: () => [Instance, Instance, Instance];
                  • Gets a split complement color scheme based off of the current color.

                  method tetrad

                  tetrad: () => [Instance, Instance, Instance, Instance];
                  • Gets a tetrad based off of the current color.

                  method toFilter

                  toFilter: () => string;
                  • Returns the color represented as a Microsoft filter for use in old versions of IE.

                  method toHex

                  toHex: () => string;
                  • Returns the hex value of the color.

                  method toHex8

                  toHex8: () => string;
                  • Returns the hex 8 value of the color.

                  method toHex8String

                  toHex8String: () => string;
                  • Returns the hex 8 value of the color -with a # appened.

                  method toHexString

                  toHexString: () => string;
                  • Returns the hex value of the color -with a # appened.

                  method toHsl

                  toHsl: () => ColorFormats.HSLA;
                  • Returns the object as a HSLA object.

                  method toHslString

                  toHslString: () => string;
                  • Returns the hsla values interpolated into a string with the following format: "hsla(xxx, xxx, xxx, xx)".

                  method toHsv

                  toHsv: () => ColorFormats.HSVA;
                  • Returns the object as a HSVA object.

                  method toHsvString

                  toHsvString: () => string;
                  • Returns the hsva values interpolated into a string with the following format: "hsva(xxx, xxx, xxx, xx)".

                  method toName

                  toName: () => string | false;
                  • The 'real' name of the color -if there is one.

                  method toPercentageRgb

                  toPercentageRgb: () => ColorFormats.PRGBA;
                  • Returns the object as a RGBA object.

                  method toPercentageRgbString

                  toPercentageRgbString: () => string;
                  • Returns the RGBA relative values interpolated into a string with the following format: "RGBA(xxx, xxx, xxx, xx)".

                  method toRgb

                  toRgb: () => ColorFormats.RGBA;
                  • Returns the object as a RGBA object.

                  method toRgbString

                  toRgbString: () => string;
                  • Returns the RGBA values interpolated into a string with the following format: "RGBA(xxx, xxx, xxx, xx)".

                  method toString

                  toString: (
                  format?:
                  | 'rgb'
                  | 'prgb'
                  | 'hex'
                  | 'hex6'
                  | 'hex3'
                  | 'hex4'
                  | 'hex8'
                  | 'name'
                  | 'hsl'
                  | 'hsv'
                  ) => string;
                  • String representation of the color.

                    Parameter format

                    The format to be used when displaying the string representation. The accepted values are: "rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv".

                  method triad

                  triad: () => [Instance, Instance, Instance];
                  • Gets a triad based off of the current color.

                  interface MostReadableArgs

                  interface MostReadableArgs extends WCAG2Options {}

                    property includeFallbackColors

                    includeFallbackColors?: boolean | undefined;

                      interface WCAG2Options

                      interface WCAG2Options {}

                        property level

                        level?: 'AA' | 'AAA' | undefined;

                          property size

                          size?: 'large' | 'small' | undefined;

                            Type Aliases

                            type ColorInput

                            type ColorInput = ColorInputWithoutInstance | Instance;

                              type ColorInputWithoutInstance

                              type ColorInputWithoutInstance =
                              | string
                              | ColorFormats.PRGB
                              | ColorFormats.PRGBA
                              | ColorFormats.RGB
                              | ColorFormats.RGBA
                              | ColorFormats.HSL
                              | ColorFormats.HSLA
                              | ColorFormats.HSV
                              | ColorFormats.HSVA;

                                Namespaces

                                namespace ColorFormats

                                namespace ColorFormats {}

                                  interface Alpha

                                  interface Alpha {}

                                    property a

                                    a: number;

                                      interface HSL

                                      interface HSL {}

                                        property h

                                        h: number;

                                          property l

                                          l: number;

                                            property s

                                            s: number;

                                              interface HSLA

                                              interface HSLA extends HSL, Alpha {}

                                                interface HSV

                                                interface HSV {}

                                                  property h

                                                  h: number;

                                                    property s

                                                    s: number;

                                                      property v

                                                      v: number;

                                                        interface HSVA

                                                        interface HSVA extends HSV {}

                                                          property a

                                                          a: number;

                                                            interface PRGB

                                                            interface PRGB {}

                                                              property b

                                                              b: string;

                                                                property g

                                                                g: string;

                                                                  property r

                                                                  r: string;

                                                                    interface PRGBA

                                                                    interface PRGBA extends PRGB, Alpha {}

                                                                      interface RGB

                                                                      interface RGB {}

                                                                        property b

                                                                        b: number;

                                                                          property g

                                                                          g: number;

                                                                            property r

                                                                            r: number;

                                                                              interface RGBA

                                                                              interface RGBA extends RGB, Alpha {}

                                                                                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/tinycolor2.

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