Class TinyColor

Hierarchy

TinyColor

Constructors

constructor

new TinyColor(color?: ColorInput, opts?: ConstructorOptions): TinyColor
Create a tinycolor instance of the color named.
Parameters
- Optional color: ColorInput
  
  the color as one of the valid color input format.
- Optional opts: ConstructorOptions
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:125

Properties

`Static` hexNames

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"

Type declaration

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"

`Static` 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"

Type declaration

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"

Methods

analogous

analogous(results?: number, slices?: number): TinyColor[]
Gets an analogous color scheme based off of the current color.
Parameters
- Optional results: number
  
  The amount of results to return. Default value: 6.
- Optional slices: number
  
  The amount to slice the input color by. Default value: 30.
Returns TinyColor[]
- Defined in BackplaneCommonJs/commonjs.d.ts:677

brighten

brighten(amount?: number): TinyColor
Brighten the color a given amount.
Parameters
- Optional amount: number
  
  The amount to brighten by. The valid range is 0 to 100. Default value: 10.
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:629

clone

clone(): TinyColor
Gets a new instance with the current color

Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:613

complement

complement(): TinyColor
Gets the complement of the current color

Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:682

darken

darken(amount?: number): TinyColor
Darken the color a given amount. Providing 100 will always return black.
Parameters
- Optional amount: number
  
  The amount to darken by. The valid range is 0 to 100. Default value: 10.
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:638

desaturate

desaturate(amount?: number): TinyColor
Desaturate the color a given amount. Providing 100 will is the same as calling greyscale.
Parameters
- Optional amount: number
  
  The amount to desaturate by. The valid range is 0 to 100. Default value: 10.
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:646

getAlpha

getAlpha(): number
Returns the alpha value of the color

Returns number
- Defined in BackplaneCommonJs/commonjs.d.ts:509

getBrightness

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

Returns number
- Defined in BackplaneCommonJs/commonjs.d.ts:514

getFormat

getFormat(): string
Returns the format used to create the tinycolor instance.

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:504

getLuminance

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

Returns number
- Defined in BackplaneCommonJs/commonjs.d.ts:519

getOriginalInput

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

Returns ColorInput
- Defined in BackplaneCommonJs/commonjs.d.ts:499

greyscale

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

Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:660

isDark

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

Returns boolean
- Defined in BackplaneCommonJs/commonjs.d.ts:484

isLight

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

Returns boolean
- Defined in BackplaneCommonJs/commonjs.d.ts:489

isValid

isValid(): boolean
Return an indication whether the color was successfully parsed.

Returns boolean
- Defined in BackplaneCommonJs/commonjs.d.ts:494

lighten

lighten(amount?: number): TinyColor
Lighten the color a given amount. Providing 100 will always return white.
Parameters
- Optional amount: number
  
  The amount to lighten by. The valid range is 0 to 100. Default value: 10.
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:621

monochromatic

monochromatic(results?: number): TinyColor[]
Gets a monochromatic color scheme based off of the current color.
Parameters
- Optional results: number
  
  The amount of results to return. Default value: 6.
Returns TinyColor[]
- Defined in BackplaneCommonJs/commonjs.d.ts:690

saturate

saturate(amount?: number): TinyColor
Saturate the color a given amount.
Parameters
- Optional amount: number
  
  The amount to saturate by. The valid range is 0 to 100. Default value: 10.
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:654

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
- Defined in BackplaneCommonJs/commonjs.d.ts:526

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
- Defined in BackplaneCommonJs/commonjs.d.ts:667

splitcomplement

splitcomplement(): [TinyColor, TinyColor, TinyColor]
Gets a split complement color scheme based off of the current color.

Returns [TinyColor, TinyColor, TinyColor]
- Defined in BackplaneCommonJs/commonjs.d.ts:695

tetrad

tetrad(): [TinyColor, TinyColor, TinyColor, TinyColor]
Gets a tetrad based off of the current color.

Returns [TinyColor, TinyColor, TinyColor, TinyColor]
- Defined in BackplaneCommonJs/commonjs.d.ts:705

toFilter

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

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:600

toHex

toHex(): string
Returns the hex value of the color.

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:553

toHex8

toHex8(): string
Returns the hex 8 value of the color.

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:563

toHex8String

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

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:568

toHexString

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

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:558

toHsl

toHsl(): HSLA
Returns the object as a HSLA object.

Returns HSLA
- Defined in BackplaneCommonJs/commonjs.d.ts:542

toHslString

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

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:548

toHsv

toHsv(): HSVA
Returns the object as a HSVA object.

Returns HSVA
- Defined in BackplaneCommonJs/commonjs.d.ts:531

toHsvString

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

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:537

toName

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

Returns string | false
- Defined in BackplaneCommonJs/commonjs.d.ts:595

toPercentageRgb

toPercentageRgb(): PRGBA
Returns the object as a RGBA object.

Returns PRGBA
- Defined in BackplaneCommonJs/commonjs.d.ts:584

toPercentageRgbString

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

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:590

toRgb

toRgb(): RGBA
Returns the object as a RGBA object.

Returns RGBA
- Defined in BackplaneCommonJs/commonjs.d.ts:573

toRgbString

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

Returns string
- Defined in BackplaneCommonJs/commonjs.d.ts:579

toString

toString(format?: "name" | "rgb" | "prgb" | "hex" | "hex6" | "hex3" | "hex4" | "hex8" | "hsl" | "hsv"): string
String representation of the color.
Parameters
- Optional format: "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
- Defined in BackplaneCommonJs/commonjs.d.ts:608

triad

triad(): [TinyColor, TinyColor, TinyColor]
Gets a triad based off of the current color.

Returns [TinyColor, TinyColor, TinyColor]
- Defined in BackplaneCommonJs/commonjs.d.ts:700

`Static` equals

equals(color1?: ColorInput, color2?: ColorInput): boolean
Compares two colors. Each colors can be any color inputs.
Parameters
- Optional color1: ColorInput
- Optional color2: ColorInput
Returns boolean
- Defined in BackplaneCommonJs/commonjs.d.ts:138

`Static` fromRatio

fromRatio(ratio?: ColorInputWithoutInstance): TinyColor
Create a tinycolor instance based off the relative values. Works with any color formats
Parameters
- Optional ratio: ColorInputWithoutInstance
  
  the relative color/hue values to apply to the new instance.
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:133

`Static` isReadable

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.
- Optional wcag2: WCAG2Options
  
  WCAG option. If the entire object is absent, function use the default of {level:"AA",size:"small"}.
Returns boolean
- Defined in BackplaneCommonJs/commonjs.d.ts:166

`Static` mix

mix(color1: ColorInput, color2: ColorInput, amount?: number): TinyColor
Parameters
- color1: ColorInput
- color2: ColorInput
- Optional amount: number
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:145

`Static` mostReadable

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
- colorList: ColorInput[]
- Optional args: MostReadableArgs
  
  and object with extra arguments
Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:176

`Static` random

random(): TinyColor
Returns a random color

Returns TinyColor
- Defined in BackplaneCommonJs/commonjs.d.ts:143

`Static` readability

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
- Defined in BackplaneCommonJs/commonjs.d.ts:153

Class TinyColor

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Optional color: ColorInput

Optional opts: ConstructorOptions

Returns TinyColor

Properties

Static hexNames

Type declaration

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"

`Optional` color: ColorInput

`Optional` opts: ConstructorOptions

`Static` hexNames