UNPKG

20.9 kBTypeScriptView Raw
1declare namespace tinycolor {
2 type ColorInputWithoutInstance =
3 | string
4 | ColorFormats.PRGB
5 | ColorFormats.PRGBA
6 | ColorFormats.RGB
7 | ColorFormats.RGBA
8 | ColorFormats.HSL
9 | ColorFormats.HSLA
10 | ColorFormats.HSV
11 | ColorFormats.HSVA;
12 type ColorInput = ColorInputWithoutInstance | Instance;
13
14 namespace ColorFormats {
15 interface Alpha {
16 a: number;
17 }
18
19 interface PRGB {
20 r: string;
21 g: string;
22 b: string;
23 }
24
25 interface PRGBA extends PRGB, Alpha {}
26
27 interface RGB {
28 r: number;
29 g: number;
30 b: number;
31 }
32
33 interface RGBA extends RGB, Alpha {}
34
35 interface HSL {
36 h: number;
37 s: number;
38 l: number;
39 }
40
41 interface HSLA extends HSL, Alpha {}
42
43 interface HSV {
44 h: number;
45 s: number;
46 v: number;
47 }
48
49 interface HSVA extends HSV {
50 a: number;
51 }
52 }
53
54 interface ConstructorOptions {
55 format?: string | undefined;
56 gradientType?: boolean | undefined;
57 }
58
59 interface WCAG2Options {
60 level?: "AA" | "AAA" | undefined;
61 size?: "large" | "small" | undefined;
62 }
63
64 interface MostReadableArgs extends WCAG2Options {
65 includeFallbackColors?: boolean | undefined;
66 }
67
68 interface Constructor {
69 /**
70 * Create a tinycolor instance of the color named.
71 *
72 * @param color - the color as one of the valid color input format.
73 */
74 new(color?: ColorInput, opts?: ConstructorOptions): Instance;
75 (color?: ColorInput, opts?: ConstructorOptions): Instance;
76
77 /**
78 * Create a tinycolor instance based off the relative values.
79 * Works with any color formats
80 *
81 * @param ratio - the relative color/hue values to apply to the new instance.
82 */
83 fromRatio(ratio?: ColorInputWithoutInstance): Instance;
84
85 /**
86 * Compares two colors. Each colors can be any color inputs.
87 */
88 equals(color1?: ColorInput, color2?: ColorInput): boolean;
89
90 /**
91 * Returns a random color
92 */
93 random(): Instance;
94
95 mix(color1: ColorInput, color2: ColorInput, amount?: number): Instance;
96
97 /**
98 * Compares the two colors and returns the constrast between two colors as a number.
99 *
100 * @param color1 - the first color to be used in the comparison.
101 * @param color2 - the second color to be used in the comparison.
102 */
103 readability(color1: ColorInput, color2: ColorInput): number;
104
105 /**
106 * Ensure that foreground and background color combinations meet WCAG2 guidelines.
107 *
108 * @param color1 - the fore color wanted.
109 * @param color2 - the back color wanted.
110 * @param wcag2 - WCAG option. If the entire object is absent, function use the default of {level:"AA",size:"small"}.
111 * @param wcag2.level - The 'level' property states 'AA' or 'AAA'
112 * if missing or invalid, it defaults to 'AA'
113 * @param wcag2.size - The 'size' property states 'large' or 'small'
114 * if missing or invalid, it defaults to 'small'.
115 */
116 isReadable(color1: ColorInput, color2: ColorInput, wcag2?: WCAG2Options): boolean;
117
118 /**
119 * Given a base color and a list of possible foreground or background colors for that base,
120 * returns the most readable color. Optionally returns Black or White if the most readable color is unreadable.
121 *
122 * @param color - the base color.
123 * @param colorsToCompare - array of colors to pick the most readable one from.
124 * @param args - and object with extra arguments
125 */
126 mostReadable(baseColor: ColorInput, colorList: ColorInput[], args?: MostReadableArgs): Instance;
127
128 /**
129 * key: 'real' color name
130 * value: hex value ex. names["red"] --> "f00"
131 */
132 names: {
133 aliceblue: "f0f8ff";
134 antiquewhite: "faebd7";
135 aqua: "0ff";
136 aquamarine: "7fffd4";
137 azure: "f0ffff";
138 beige: "f5f5dc";
139 bisque: "ffe4c4";
140 black: "000";
141 blanchedalmond: "ffebcd";
142 blue: "00f";
143 blueviolet: "8a2be2";
144 brown: "a52a2a";
145 burlywood: "deb887";
146 burntsienna: "ea7e5d";
147 cadetblue: "5f9ea0";
148 chartreuse: "7fff00";
149 chocolate: "d2691e";
150 coral: "ff7f50";
151 cornflowerblue: "6495ed";
152 cornsilk: "fff8dc";
153 crimson: "dc143c";
154 cyan: "0ff";
155 darkblue: "00008b";
156 darkcyan: "008b8b";
157 darkgoldenrod: "b8860b";
158 darkgray: "a9a9a9";
159 darkgreen: "006400";
160 darkgrey: "a9a9a9";
161 darkkhaki: "bdb76b";
162 darkmagenta: "8b008b";
163 darkolivegreen: "556b2f";
164 darkorange: "ff8c00";
165 darkorchid: "9932cc";
166 darkred: "8b0000";
167 darksalmon: "e9967a";
168 darkseagreen: "8fbc8f";
169 darkslateblue: "483d8b";
170 darkslategray: "2f4f4f";
171 darkslategrey: "2f4f4f";
172 darkturquoise: "00ced1";
173 darkviolet: "9400d3";
174 deeppink: "ff1493";
175 deepskyblue: "00bfff";
176 dimgray: "696969";
177 dimgrey: "696969";
178 dodgerblue: "1e90ff";
179 firebrick: "b22222";
180 floralwhite: "fffaf0";
181 forestgreen: "228b22";
182 fuchsia: "f0f";
183 gainsboro: "dcdcdc";
184 ghostwhite: "f8f8ff";
185 gold: "ffd700";
186 goldenrod: "daa520";
187 gray: "808080";
188 green: "008000";
189 greenyellow: "adff2f";
190 grey: "808080";
191 honeydew: "f0fff0";
192 hotpink: "ff69b4";
193 indianred: "cd5c5c";
194 indigo: "4b0082";
195 ivory: "fffff0";
196 khaki: "f0e68c";
197 lavender: "e6e6fa";
198 lavenderblush: "fff0f5";
199 lawngreen: "7cfc00";
200 lemonchiffon: "fffacd";
201 lightblue: "add8e6";
202 lightcoral: "f08080";
203 lightcyan: "e0ffff";
204 lightgoldenrodyellow: "fafad2";
205 lightgray: "d3d3d3";
206 lightgreen: "90ee90";
207 lightgrey: "d3d3d3";
208 lightpink: "ffb6c1";
209 lightsalmon: "ffa07a";
210 lightseagreen: "20b2aa";
211 lightskyblue: "87cefa";
212 lightslategray: "789";
213 lightslategrey: "789";
214 lightsteelblue: "b0c4de";
215 lightyellow: "ffffe0";
216 lime: "0f0";
217 limegreen: "32cd32";
218 linen: "faf0e6";
219 magenta: "f0f";
220 maroon: "800000";
221 mediumaquamarine: "66cdaa";
222 mediumblue: "0000cd";
223 mediumorchid: "ba55d3";
224 mediumpurple: "9370db";
225 mediumseagreen: "3cb371";
226 mediumslateblue: "7b68ee";
227 mediumspringgreen: "00fa9a";
228 mediumturquoise: "48d1cc";
229 mediumvioletred: "c71585";
230 midnightblue: "191970";
231 mintcream: "f5fffa";
232 mistyrose: "ffe4e1";
233 moccasin: "ffe4b5";
234 navajowhite: "ffdead";
235 navy: "000080";
236 oldlace: "fdf5e6";
237 olive: "808000";
238 olivedrab: "6b8e23";
239 orange: "ffa500";
240 orangered: "ff4500";
241 orchid: "da70d6";
242 palegoldenrod: "eee8aa";
243 palegreen: "98fb98";
244 paleturquoise: "afeeee";
245 palevioletred: "db7093";
246 papayawhip: "ffefd5";
247 peachpuff: "ffdab9";
248 peru: "cd853f";
249 pink: "ffc0cb";
250 plum: "dda0dd";
251 powderblue: "b0e0e6";
252 purple: "800080";
253 rebeccapurple: "663399";
254 red: "f00";
255 rosybrown: "bc8f8f";
256 royalblue: "4169e1";
257 saddlebrown: "8b4513";
258 salmon: "fa8072";
259 sandybrown: "f4a460";
260 seagreen: "2e8b57";
261 seashell: "fff5ee";
262 sienna: "a0522d";
263 silver: "c0c0c0";
264 skyblue: "87ceeb";
265 slateblue: "6a5acd";
266 slategray: "708090";
267 slategrey: "708090";
268 snow: "fffafa";
269 springgreen: "00ff7f";
270 steelblue: "4682b4";
271 tan: "d2b48c";
272 teal: "008080";
273 thistle: "d8bfd8";
274 tomato: "ff6347";
275 turquoise: "40e0d0";
276 violet: "ee82ee";
277 wheat: "f5deb3";
278 white: "fff";
279 whitesmoke: "f5f5f5";
280 yellow: "ff0";
281 yellowgreen: "9acd32";
282 };
283
284 /**
285 * key: hex value
286 * value: string name ex. hexnames["f00"] --> "red"
287 */
288 hexNames: {
289 "f0f8ff": "aliceblue";
290 "faebd7": "antiquewhite";
291 "0ff": "aqua" | "cyan";
292 "7fffd4": "aquamarine";
293 "f0ffff": "azure";
294 "f5f5dc": "beige";
295 "ffe4c4": "bisque";
296 "000": "black";
297 "ffebcd": "blanchedalmond";
298 "00f": "blue";
299 "8a2be2": "blueviolet";
300 "a52a2a": "brown";
301 "deb887": "burlywood";
302 "ea7e5d": "burntsienna";
303 "5f9ea0": "cadetblue";
304 "7fff00": "chartreuse";
305 "d2691e": "chocolate";
306 "ff7f50": "coral";
307 "6495ed": "cornflowerblue";
308 "fff8dc": "cornsilk";
309 "dc143c": "crimson";
310 "00008b": "darkblue";
311 "008b8b": "darkcyan";
312 "b8860b": "darkgoldenrod";
313 "a9a9a9": "darkgray" | "darkgrey";
314 "006400": "darkgreen";
315 "bdb76b": "darkkhaki";
316 "8b008b": "darkmagenta";
317 "556b2f": "darkolivegreen";
318 "ff8c00": "darkorange";
319 "9932cc": "darkorchid";
320 "8b0000": "darkred";
321 "e9967a": "darksalmon";
322 "8fbc8f": "darkseagreen";
323 "483d8b": "darkslateblue";
324 "2f4f4f": "darkslategray" | "darkslategrey";
325 "00ced1": "darkturquoise";
326 "9400d3": "darkviolet";
327 "ff1493": "deeppink";
328 "00bfff": "deepskyblue";
329 "696969": "dimgray" | "dimgrey";
330 "1e90ff": "dodgerblue";
331 "b22222": "firebrick";
332 "fffaf0": "floralwhite";
333 "228b22": "forestgreen";
334 "f0f": "fuchsia" | "magenta";
335 "dcdcdc": "gainsboro";
336 "f8f8ff": "ghostwhite";
337 "ffd700": "gold";
338 "daa520": "goldenrod";
339 "808080": "gray" | "grey";
340 "008000": "green";
341 "adff2f": "greenyellow";
342 "f0fff0": "honeydew";
343 "ff69b4": "hotpink";
344 "cd5c5c": "indianred";
345 "4b0082": "indigo";
346 "fffff0": "ivory";
347 "f0e68c": "khaki";
348 "e6e6fa": "lavender";
349 "fff0f5": "lavenderblush";
350 "7cfc00": "lawngreen";
351 "fffacd": "lemonchiffon";
352 "add8e6": "lightblue";
353 "f08080": "lightcoral";
354 "e0ffff": "lightcyan";
355 "fafad2": "lightgoldenrodyellow";
356 "d3d3d3": "lightgray" | "lightgrey";
357 "90ee90": "lightgreen";
358 "ffb6c1": "lightpink";
359 "ffa07a": "lightsalmon";
360 "20b2aa": "lightseagreen";
361 "87cefa": "lightskyblue";
362 "789": "lightslategray" | "lightslategrey";
363 "b0c4de": "lightsteelblue";
364 "ffffe0": "lightyellow";
365 "0f0": "lime";
366 "32cd32": "limegreen";
367 "faf0e6": "linen";
368 "800000": "maroon";
369 "66cdaa": "mediumaquamarine";
370 "0000cd": "mediumblue";
371 "ba55d3": "mediumorchid";
372 "9370db": "mediumpurple";
373 "3cb371": "mediumseagreen";
374 "7b68ee": "mediumslateblue";
375 "00fa9a": "mediumspringgreen";
376 "48d1cc": "mediumturquoise";
377 "c71585": "mediumvioletred";
378 "191970": "midnightblue";
379 "f5fffa": "mintcream";
380 "ffe4e1": "mistyrose";
381 "ffe4b5": "moccasin";
382 "ffdead": "navajowhite";
383 "000080": "navy";
384 "fdf5e6": "oldlace";
385 "808000": "olive";
386 "6b8e23": "olivedrab";
387 "ffa500": "orange";
388 "ff4500": "orangered";
389 "da70d6": "orchid";
390 "eee8aa": "palegoldenrod";
391 "98fb98": "palegreen";
392 "afeeee": "paleturquoise";
393 "db7093": "palevioletred";
394 "ffefd5": "papayawhip";
395 "ffdab9": "peachpuff";
396 "cd853f": "peru";
397 "ffc0cb": "pink";
398 "dda0dd": "plum";
399 "b0e0e6": "powderblue";
400 "800080": "purple";
401 "663399": "rebeccapurple";
402 "f00": "red";
403 "bc8f8f": "rosybrown";
404 "4169e1": "royalblue";
405 "8b4513": "saddlebrown";
406 "fa8072": "salmon";
407 "f4a460": "sandybrown";
408 "2e8b57": "seagreen";
409 "fff5ee": "seashell";
410 "a0522d": "sienna";
411 "c0c0c0": "silver";
412 "87ceeb": "skyblue";
413 "6a5acd": "slateblue";
414 "708090": "slategray" | "slategrey";
415 "fffafa": "snow";
416 "00ff7f": "springgreen";
417 "4682b4": "steelblue";
418 "d2b48c": "tan";
419 "008080": "teal";
420 "d8bfd8": "thistle";
421 "ff6347": "tomato";
422 "40e0d0": "turquoise";
423 "ee82ee": "violet";
424 "f5deb3": "wheat";
425 "fff": "white";
426 "f5f5f5": "whitesmoke";
427 "ff0": "yellow";
428 "9acd32": "yellowgreen";
429 };
430 }
431
432 interface Instance {
433 /**
434 * Return an indication whether the color's perceived brightness is dark.
435 */
436 isDark(): boolean;
437
438 /**
439 * Return an indication whether the color's perceived brightness is light.
440 */
441 isLight(): boolean;
442
443 /**
444 * Return an indication whether the color was successfully parsed.
445 */
446 isValid(): boolean;
447
448 /**
449 * Returns the input passed into the constructer used to create the tinycolor instance.
450 */
451 getOriginalInput(): ColorInput;
452
453 /**
454 * Returns the format used to create the tinycolor instance.
455 */
456 getFormat(): string;
457
458 /**
459 * Returns the alpha value of the color
460 */
461 getAlpha(): number;
462
463 /**
464 * Returns the perceived brightness of the color, from 0-255.
465 */
466 getBrightness(): number;
467
468 /**
469 * Returns the perceived luminance of a color, from 0-1.
470 */
471 getLuminance(): number;
472
473 /**
474 * Sets the alpha value on the current color.
475 *
476 * @param alpha - The new alpha value. The accepted range is 0-1.
477 */
478 setAlpha(alpha: number): Instance;
479
480 /**
481 * Returns the object as a HSVA object.
482 */
483 toHsv(): ColorFormats.HSVA;
484
485 /**
486 * Returns the hsva values interpolated into a string with the following format:
487 * "hsva(xxx, xxx, xxx, xx)".
488 */
489 toHsvString(): string;
490
491 /**
492 * Returns the object as a HSLA object.
493 */
494 toHsl(): ColorFormats.HSLA;
495
496 /**
497 * Returns the hsla values interpolated into a string with the following format:
498 * "hsla(xxx, xxx, xxx, xx)".
499 */
500 toHslString(): string;
501
502 /**
503 * Returns the hex value of the color.
504 */
505 toHex(): string;
506
507 /**
508 * Returns the hex value of the color -with a # appened.
509 */
510 toHexString(): string;
511
512 /**
513 * Returns the hex 8 value of the color.
514 */
515 toHex8(): string;
516
517 /**
518 * Returns the hex 8 value of the color -with a # appened.
519 */
520 toHex8String(): string;
521
522 /**
523 * Returns the object as a RGBA object.
524 */
525 toRgb(): ColorFormats.RGBA;
526
527 /**
528 * Returns the RGBA values interpolated into a string with the following format:
529 * "RGBA(xxx, xxx, xxx, xx)".
530 */
531 toRgbString(): string;
532
533 /**
534 * Returns the object as a RGBA object.
535 */
536 toPercentageRgb(): ColorFormats.PRGBA;
537
538 /**
539 * Returns the RGBA relative values interpolated into a string with the following format:
540 * "RGBA(xxx, xxx, xxx, xx)".
541 */
542 toPercentageRgbString(): string;
543
544 /**
545 * The 'real' name of the color -if there is one.
546 */
547 toName(): string | false;
548
549 /**
550 * Returns the color represented as a Microsoft filter for use in old versions of IE.
551 */
552 toFilter(): string;
553
554 /**
555 * String representation of the color.
556 *
557 * @param format - The format to be used when displaying the string representation.
558 * The accepted values are: "rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv".
559 */
560 toString(format?: "rgb" | "prgb" | "hex" | "hex6" | "hex3" | "hex4" | "hex8" | "name" | "hsl" | "hsv"): string;
561
562 /**
563 * Gets a new instance with the current color
564 */
565 clone(): Instance;
566
567 /**
568 * Lighten the color a given amount. Providing 100 will always return white.
569 *
570 * @param amount - The amount to lighten by. The valid range is 0 to 100.
571 * Default value: 10.
572 */
573 lighten(amount?: number): Instance;
574
575 /**
576 * Brighten the color a given amount.
577 *
578 * @param amount - The amount to brighten by. The valid range is 0 to 100.
579 * Default value: 10.
580 */
581 brighten(amount?: number): Instance;
582
583 /**
584 * Darken the color a given amount.
585 * Providing 100 will always return black.
586 *
587 * @param amount - The amount to darken by. The valid range is 0 to 100.
588 * Default value: 10.
589 */
590 darken(amount?: number): Instance;
591 /**
592 * Desaturate the color a given amount.
593 * Providing 100 will is the same as calling greyscale.
594 *
595 * @param amount - The amount to desaturate by. The valid range is 0 to 100.
596 * Default value: 10.
597 */
598 desaturate(amount?: number): Instance;
599
600 /**
601 * Saturate the color a given amount.
602 *
603 * @param amount - The amount to saturate by. The valid range is 0 to 100.
604 * Default value: 10.
605 */
606 saturate(amount?: number): Instance;
607
608 /**
609 * Completely desaturates a color into greyscale.
610 * Same as calling desaturate(100).
611 */
612 greyscale(): Instance;
613
614 /**
615 * Spin the hue a given amount. Calling with 0, 360, or -360 will do nothing.
616 *
617 * @param amount - The amount to spin by. The valid range is -360 to 360.
618 */
619 spin(amount: number): Instance;
620
621 /**
622 * Gets an analogous color scheme based off of the current color.
623 *
624 * @param results - The amount of results to return.
625 * Default value: 6.
626 * @param slices - The amount to slice the input color by.
627 * Default value: 30.
628 */
629 analogous(results?: number, slices?: number): Instance[];
630
631 /**
632 * Gets the complement of the current color
633 */
634 complement(): Instance;
635
636 /**
637 * Gets a monochromatic color scheme based off of the current color.
638 *
639 * @param results - The amount of results to return.
640 * Default value: 6.
641 */
642 monochromatic(results?: number): Instance[];
643
644 /**
645 * Gets a split complement color scheme based off of the current color.
646 */
647 splitcomplement(): [Instance, Instance, Instance];
648
649 /**
650 * Gets a triad based off of the current color.
651 */
652 triad(): [Instance, Instance, Instance];
653
654 /**
655 * Gets a tetrad based off of the current color.
656 */
657 tetrad(): [Instance, Instance, Instance, Instance];
658 }
659}
660
661declare const tinycolor: tinycolor.Constructor;
662export = tinycolor;
663export as namespace tinycolor;