Class TinyColor

constructor

• new TinyColor(color?: ColorInput, opts?: ConstructorOptions): TinyColor

  Create a tinycolor instance of the color named.

  Parameters

  • Optionalcolor: ColorInput

    the color as one of the valid color input format.

  • Optionalopts: ConstructorOptions

  Returns TinyColor

StatichexNames

Staticnames

analogous

• analogous(results?: number, slices?: number): TinyColor[]

  Gets an analogous color scheme based off of the current color.

  Parameters

  • Optionalresults: number

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

  • Optionalslices: number

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

  Returns TinyColor[]

brighten

• brighten(amount?: number): TinyColor

  Brighten the color a given amount.

  Parameters

  • Optionalamount: number

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

  Returns TinyColor

clone

• clone(): TinyColor

  Gets a new instance with the current color

  Returns TinyColor

complement

• complement(): TinyColor

  Gets the complement of the current color

  Returns TinyColor

darken

• darken(amount?: number): TinyColor

  Darken the color a given amount. Providing 100 will always return black.

  Parameters

  • Optionalamount: number

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

  Returns TinyColor

desaturate

• desaturate(amount?: number): TinyColor

  Desaturate the color a given amount. Providing 100 will is the same as calling greyscale.

  Parameters

  • Optionalamount: number

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

  Returns TinyColor

getAlpha

• getAlpha(): number

  Returns the alpha value of the color

  Returns number

getBrightness

• getBrightness(): number

  Returns the perceived brightness of the color, from 0-255.

  Returns number

getFormat

• getFormat(): string

  Returns the format used to create the tinycolor instance.

  Returns string

getLuminance

• getLuminance(): number

  Returns the perceived luminance of a color, from 0-1.

  Returns number

getOriginalInput

• getOriginalInput(): ColorInput

  Returns the input passed into the constructer used to create the tinycolor instance.

  Returns ColorInput

greyscale

• greyscale(): TinyColor

  Completely desaturates a color into greyscale. Same as calling desaturate(100).

  Returns TinyColor

isDark

• isDark(): boolean

  Return an indication whether the color's perceived brightness is dark.

  Returns boolean

isLight

• isLight(): boolean

  Return an indication whether the color's perceived brightness is light.

  Returns boolean

isValid

• isValid(): boolean

  Return an indication whether the color was successfully parsed.

  Returns boolean

lighten

• lighten(amount?: number): TinyColor

  Lighten the color a given amount. Providing 100 will always return white.

  Parameters

  • Optionalamount: number

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

  Returns TinyColor

monochromatic

• monochromatic(results?: number): TinyColor[]

  Gets a monochromatic color scheme based off of the current color.

  Parameters

  • Optionalresults: number

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

  Returns TinyColor[]

saturate

• saturate(amount?: number): TinyColor

  Saturate the color a given amount.

  Parameters

  • Optionalamount: number

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

  Returns TinyColor

setAlpha

• setAlpha(alpha: number): TinyColor

  Sets the alpha value on the current color.

  Parameters

  • alpha: number

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

  Returns TinyColor

spin

• spin(amount: number): TinyColor

  Spin the hue a given amount. Calling with 0, 360, or -360 will do nothing.

  Parameters

  • amount: number

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

  Returns TinyColor

splitcomplement

• splitcomplement(): [TinyColor, TinyColor, TinyColor]

  Gets a split complement color scheme based off of the current color.

  Returns [TinyColor, TinyColor, TinyColor]

tetrad

• tetrad(): [TinyColor, TinyColor, TinyColor, TinyColor]

  Gets a tetrad based off of the current color.

  Returns [TinyColor, TinyColor, TinyColor, TinyColor]

toFilter

• toFilter(): string

  Returns the color represented as a Microsoft filter for use in old versions of IE.

  Returns string

toHex

• toHex(): string

  Returns the hex value of the color.

  Returns string

toHex8

• toHex8(): string

  Returns the hex 8 value of the color.

  Returns string

toHex8String

• toHex8String(): string

  Returns the hex 8 value of the color -with a # appened.

  Returns string

toHexString

• toHexString(): string

  Returns the hex value of the color -with a # appened.

  Returns string

toHsl

• toHsl(): HSLA

  Returns the object as a HSLA object.

  Returns HSLA

toHslString

• toHslString(): string

  Returns the hsla values interpolated into a string with the following format: "hsla(xxx, xxx, xxx, xx)".

  Returns string

toHsv

• toHsv(): HSVA

  Returns the object as a HSVA object.

  Returns HSVA

toHsvString

• toHsvString(): string

  Returns the hsva values interpolated into a string with the following format: "hsva(xxx, xxx, xxx, xx)".

  Returns string

toName

• toName(): string | false

  The 'real' name of the color -if there is one.

  Returns string | false

toPercentageRgb

• toPercentageRgb(): PRGBA

  Returns the object as a RGBA object.

  Returns PRGBA

toPercentageRgbString

• toPercentageRgbString(): string

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

  Returns string

toRgb

• toRgb(): RGBA

  Returns the object as a RGBA object.

  Returns RGBA

toRgbString

• toRgbString(): string

  Returns the RGBA values interpolated into a string with the following format: "RGBA(xxx, xxx, xxx, xx)".

  Returns string

toString

• toString(
      format?:
          | "name"
          | "rgb"
          | "prgb"
          | "hex"
          | "hex6"
          | "hex3"
          | "hex4"
          | "hex8"
          | "hsl"
          | "hsv",
  ): string

  String representation of the color.

  Parameters

  • Optionalformat:
        | "name"
        | "rgb"
        | "prgb"
        | "hex"
        | "hex6"
        | "hex3"
        | "hex4"
        | "hex8"
        | "hsl"
        | "hsv"

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

  Returns string

triad

• triad(): [TinyColor, TinyColor, TinyColor]

  Gets a triad based off of the current color.

  Returns [TinyColor, TinyColor, TinyColor]

Staticequals

• equals(color1?: ColorInput, color2?: ColorInput): boolean

  Compares two colors. Each colors can be any color inputs.

  Parameters

  • Optionalcolor1: ColorInput
  • Optionalcolor2: ColorInput

  Returns boolean

StaticfromRatio

• fromRatio(ratio?: ColorInputWithoutInstance): TinyColor

  Create a tinycolor instance based off the relative values. Works with any color formats

  Parameters

  • Optionalratio: ColorInputWithoutInstance

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

  Returns TinyColor

StaticisReadable

• isReadable(
      color1: ColorInput,
      color2: ColorInput,
      wcag2?: WCAG2Options,
  ): boolean

  Ensure that foreground and background color combinations meet WCAG2 guidelines.

  Parameters

  • color1: ColorInput

    the fore color wanted.

  • color2: ColorInput

    the back color wanted.

  • Optionalwcag2: WCAG2Options

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

  Returns boolean

Staticmix

• mix(color1: ColorInput, color2: ColorInput, amount?: number): TinyColor

  Parameters

  • color1: ColorInput
  • color2: ColorInput
  • Optionalamount: number

  Returns TinyColor

StaticmostReadable

• mostReadable(
      baseColor: ColorInput,
      colorList: ColorInput[],
      args?: MostReadableArgs,
  ): TinyColor

  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.

  Parameters

  • baseColor: ColorInput

    the base color.

  • colorList: ColorInput[]

    array of colors to pick the most readable one from.

  • Optionalargs: MostReadableArgs

    and object with extra arguments

  Returns TinyColor

Staticrandom

• random(): TinyColor

  Returns a random color

  Returns TinyColor

Staticreadability

• readability(color1: ColorInput, color2: ColorInput): number

  Compares the two colors and returns the constrast between two colors as a number.

  Parameters

  • color1: ColorInput

    the first color to be used in the comparison.

  • color2: ColorInput

    the second color to be used in the comparison.

  Returns number