Class TinyColor

Constructors

constructor

Properties

hexNames names

Methods

analogous brighten clone complement darken desaturate getAlpha getBrightness getFormat getLuminance getOriginalInput greyscale isDark isLight isValid lighten monochromatic saturate setAlpha spin splitcomplement tetrad toFilter toHex toHex8 toHex8String toHexString toHsl toHslString toHsv toHsvString toName toPercentageRgb toPercentageRgbString toRgb toRgbString toString triad equals fromRatio isReadable mix mostReadable random readability

Constructors

constructor

Properties

StatichexNames

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

key: hex value value: string name ex. hexnames["f00"] --> "red"

Staticnames

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"

Methods

analogous

  • analogous(results?, slices?): 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?): 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

complement

darken

  • darken(amount?): 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?): 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

greyscale

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?): 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?): 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?): 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): 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): 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

tetrad

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

toHslString

  • toHslString(): string

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

    Returns string

toHsv

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

toPercentageRgbString

  • toPercentageRgbString(): string

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

    Returns string

toRgb

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?): 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

Staticequals

  • equals(color1?, color2?): boolean

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

    Parameters

    Returns boolean

StaticfromRatio

StaticisReadable

  • isReadable(color1, color2, wcag2?): 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

StaticmostReadable

  • mostReadable(baseColor, colorList, args?): 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

    Returns TinyColor

Staticrandom

Staticreadability

  • readability(color1, color2): 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

Settings

Member Visibility

On This Page

Constructors
Properties
Methods