@ctrl/tinycolor 3.6.1 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/bundles/tinycolor.umd.min.js +1 -1
- package/dist/bundles/tinycolor.umd.min.js.map +1 -1
- package/dist/conversion.js +32 -32
- package/dist/format-input.js +20 -21
- package/dist/from-ratio.js +3 -3
- package/dist/index.d.ts +0 -1
- package/dist/index.js +164 -192
- package/dist/module/conversion.js +31 -31
- package/dist/module/css-color-names.js +1 -1
- package/dist/module/format-input.js +17 -18
- package/dist/module/from-ratio.js +1 -1
- package/dist/module/index.js +158 -186
- package/dist/module/public_api.js +0 -3
- package/dist/module/random.js +37 -40
- package/dist/module/readability.js +12 -16
- package/dist/module/to-ms-filter.js +6 -6
- package/dist/module/umd_api.js +14 -13
- package/dist/module/util.js +3 -3
- package/dist/public_api.d.ts +0 -2
- package/dist/public_api.js +0 -3
- package/dist/random.js +37 -40
- package/dist/readability.js +13 -17
- package/dist/to-ms-filter.js +8 -8
- package/dist/umd_api.d.ts +0 -1
- package/dist/umd_api.js +20 -19
- package/dist/util.js +3 -3
- package/package.json +19 -39
package/dist/index.js
CHANGED
@@ -1,15 +1,12 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
if (color === void 0) { color = ''; }
|
11
|
-
if (opts === void 0) { opts = {}; }
|
12
|
-
var _a;
|
3
|
+
exports.TinyColor = void 0;
|
4
|
+
const conversion_js_1 = require("./conversion.js");
|
5
|
+
const css_color_names_js_1 = require("./css-color-names.js");
|
6
|
+
const format_input_1 = require("./format-input");
|
7
|
+
const util_js_1 = require("./util.js");
|
8
|
+
class TinyColor {
|
9
|
+
constructor(color = '', opts = {}) {
|
13
10
|
// If input is already a tinycolor, return itself
|
14
11
|
if (color instanceof TinyColor) {
|
15
12
|
// eslint-disable-next-line no-constructor-return
|
@@ -19,14 +16,14 @@ var TinyColor = /** @class */ (function () {
|
|
19
16
|
color = (0, conversion_js_1.numberInputToObject)(color);
|
20
17
|
}
|
21
18
|
this.originalInput = color;
|
22
|
-
|
19
|
+
const rgb = (0, format_input_1.inputToRGB)(color);
|
23
20
|
this.originalInput = color;
|
24
21
|
this.r = rgb.r;
|
25
22
|
this.g = rgb.g;
|
26
23
|
this.b = rgb.b;
|
27
24
|
this.a = rgb.a;
|
28
25
|
this.roundA = Math.round(100 * this.a) / 100;
|
29
|
-
this.format =
|
26
|
+
this.format = opts.format ?? rgb.format;
|
30
27
|
this.gradientType = opts.gradientType;
|
31
28
|
// Don't let the range of [0,255] come back in [0,1].
|
32
29
|
// Potentially lose a little bit of precision here, but will fix issues where
|
@@ -43,32 +40,32 @@ var TinyColor = /** @class */ (function () {
|
|
43
40
|
}
|
44
41
|
this.isValid = rgb.ok;
|
45
42
|
}
|
46
|
-
|
43
|
+
isDark() {
|
47
44
|
return this.getBrightness() < 128;
|
48
|
-
}
|
49
|
-
|
45
|
+
}
|
46
|
+
isLight() {
|
50
47
|
return !this.isDark();
|
51
|
-
}
|
48
|
+
}
|
52
49
|
/**
|
53
50
|
* Returns the perceived brightness of the color, from 0-255.
|
54
51
|
*/
|
55
|
-
|
52
|
+
getBrightness() {
|
56
53
|
// http://www.w3.org/TR/AERT#color-contrast
|
57
|
-
|
54
|
+
const rgb = this.toRgb();
|
58
55
|
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
|
59
|
-
}
|
56
|
+
}
|
60
57
|
/**
|
61
58
|
* Returns the perceived luminance of a color, from 0-1.
|
62
59
|
*/
|
63
|
-
|
60
|
+
getLuminance() {
|
64
61
|
// http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
62
|
+
const rgb = this.toRgb();
|
63
|
+
let R;
|
64
|
+
let G;
|
65
|
+
let B;
|
66
|
+
const RsRGB = rgb.r / 255;
|
67
|
+
const GsRGB = rgb.g / 255;
|
68
|
+
const BsRGB = rgb.b / 255;
|
72
69
|
if (RsRGB <= 0.03928) {
|
73
70
|
R = RsRGB / 12.92;
|
74
71
|
}
|
@@ -91,173 +88,167 @@ var TinyColor = /** @class */ (function () {
|
|
91
88
|
B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
|
92
89
|
}
|
93
90
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
94
|
-
}
|
91
|
+
}
|
95
92
|
/**
|
96
93
|
* Returns the alpha value of a color, from 0-1.
|
97
94
|
*/
|
98
|
-
|
95
|
+
getAlpha() {
|
99
96
|
return this.a;
|
100
|
-
}
|
97
|
+
}
|
101
98
|
/**
|
102
99
|
* Sets the alpha value on the current color.
|
103
100
|
*
|
104
101
|
* @param alpha - The new alpha value. The accepted range is 0-1.
|
105
102
|
*/
|
106
|
-
|
103
|
+
setAlpha(alpha) {
|
107
104
|
this.a = (0, util_js_1.boundAlpha)(alpha);
|
108
105
|
this.roundA = Math.round(100 * this.a) / 100;
|
109
106
|
return this;
|
110
|
-
}
|
107
|
+
}
|
111
108
|
/**
|
112
109
|
* Returns whether the color is monochrome.
|
113
110
|
*/
|
114
|
-
|
115
|
-
|
111
|
+
isMonochrome() {
|
112
|
+
const { s } = this.toHsl();
|
116
113
|
return s === 0;
|
117
|
-
}
|
114
|
+
}
|
118
115
|
/**
|
119
116
|
* Returns the object as a HSVA object.
|
120
117
|
*/
|
121
|
-
|
122
|
-
|
118
|
+
toHsv() {
|
119
|
+
const hsv = (0, conversion_js_1.rgbToHsv)(this.r, this.g, this.b);
|
123
120
|
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
|
124
|
-
}
|
121
|
+
}
|
125
122
|
/**
|
126
123
|
* Returns the hsva values interpolated into a string with the following format:
|
127
124
|
* "hsva(xxx, xxx, xxx, xx)".
|
128
125
|
*/
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
return this.a === 1 ?
|
135
|
-
}
|
126
|
+
toHsvString() {
|
127
|
+
const hsv = (0, conversion_js_1.rgbToHsv)(this.r, this.g, this.b);
|
128
|
+
const h = Math.round(hsv.h * 360);
|
129
|
+
const s = Math.round(hsv.s * 100);
|
130
|
+
const v = Math.round(hsv.v * 100);
|
131
|
+
return this.a === 1 ? `hsv(${h}, ${s}%, ${v}%)` : `hsva(${h}, ${s}%, ${v}%, ${this.roundA})`;
|
132
|
+
}
|
136
133
|
/**
|
137
134
|
* Returns the object as a HSLA object.
|
138
135
|
*/
|
139
|
-
|
140
|
-
|
136
|
+
toHsl() {
|
137
|
+
const hsl = (0, conversion_js_1.rgbToHsl)(this.r, this.g, this.b);
|
141
138
|
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
|
142
|
-
}
|
139
|
+
}
|
143
140
|
/**
|
144
141
|
* Returns the hsla values interpolated into a string with the following format:
|
145
142
|
* "hsla(xxx, xxx, xxx, xx)".
|
146
143
|
*/
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
return this.a === 1 ?
|
153
|
-
}
|
144
|
+
toHslString() {
|
145
|
+
const hsl = (0, conversion_js_1.rgbToHsl)(this.r, this.g, this.b);
|
146
|
+
const h = Math.round(hsl.h * 360);
|
147
|
+
const s = Math.round(hsl.s * 100);
|
148
|
+
const l = Math.round(hsl.l * 100);
|
149
|
+
return this.a === 1 ? `hsl(${h}, ${s}%, ${l}%)` : `hsla(${h}, ${s}%, ${l}%, ${this.roundA})`;
|
150
|
+
}
|
154
151
|
/**
|
155
152
|
* Returns the hex value of the color.
|
156
153
|
* @param allow3Char will shorten hex value to 3 char if possible
|
157
154
|
*/
|
158
|
-
|
159
|
-
if (allow3Char === void 0) { allow3Char = false; }
|
155
|
+
toHex(allow3Char = false) {
|
160
156
|
return (0, conversion_js_1.rgbToHex)(this.r, this.g, this.b, allow3Char);
|
161
|
-
}
|
157
|
+
}
|
162
158
|
/**
|
163
159
|
* Returns the hex value of the color -with a # prefixed.
|
164
160
|
* @param allow3Char will shorten hex value to 3 char if possible
|
165
161
|
*/
|
166
|
-
|
167
|
-
if (allow3Char === void 0) { allow3Char = false; }
|
162
|
+
toHexString(allow3Char = false) {
|
168
163
|
return '#' + this.toHex(allow3Char);
|
169
|
-
}
|
164
|
+
}
|
170
165
|
/**
|
171
166
|
* Returns the hex 8 value of the color.
|
172
167
|
* @param allow4Char will shorten hex value to 4 char if possible
|
173
168
|
*/
|
174
|
-
|
175
|
-
if (allow4Char === void 0) { allow4Char = false; }
|
169
|
+
toHex8(allow4Char = false) {
|
176
170
|
return (0, conversion_js_1.rgbaToHex)(this.r, this.g, this.b, this.a, allow4Char);
|
177
|
-
}
|
171
|
+
}
|
178
172
|
/**
|
179
173
|
* Returns the hex 8 value of the color -with a # prefixed.
|
180
174
|
* @param allow4Char will shorten hex value to 4 char if possible
|
181
175
|
*/
|
182
|
-
|
183
|
-
if (allow4Char === void 0) { allow4Char = false; }
|
176
|
+
toHex8String(allow4Char = false) {
|
184
177
|
return '#' + this.toHex8(allow4Char);
|
185
|
-
}
|
178
|
+
}
|
186
179
|
/**
|
187
180
|
* Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
|
188
181
|
* @param allowShortChar will shorten hex value to 3 or 4 char if possible
|
189
182
|
*/
|
190
|
-
|
191
|
-
if (allowShortChar === void 0) { allowShortChar = false; }
|
183
|
+
toHexShortString(allowShortChar = false) {
|
192
184
|
return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
|
193
|
-
}
|
185
|
+
}
|
194
186
|
/**
|
195
187
|
* Returns the object as a RGBA object.
|
196
188
|
*/
|
197
|
-
|
189
|
+
toRgb() {
|
198
190
|
return {
|
199
191
|
r: Math.round(this.r),
|
200
192
|
g: Math.round(this.g),
|
201
193
|
b: Math.round(this.b),
|
202
194
|
a: this.a,
|
203
195
|
};
|
204
|
-
}
|
196
|
+
}
|
205
197
|
/**
|
206
198
|
* Returns the RGBA values interpolated into a string with the following format:
|
207
199
|
* "RGBA(xxx, xxx, xxx, xx)".
|
208
200
|
*/
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
return this.a === 1 ?
|
214
|
-
}
|
201
|
+
toRgbString() {
|
202
|
+
const r = Math.round(this.r);
|
203
|
+
const g = Math.round(this.g);
|
204
|
+
const b = Math.round(this.b);
|
205
|
+
return this.a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${this.roundA})`;
|
206
|
+
}
|
215
207
|
/**
|
216
208
|
* Returns the object as a RGBA object.
|
217
209
|
*/
|
218
|
-
|
219
|
-
|
210
|
+
toPercentageRgb() {
|
211
|
+
const fmt = (x) => `${Math.round((0, util_js_1.bound01)(x, 255) * 100)}%`;
|
220
212
|
return {
|
221
213
|
r: fmt(this.r),
|
222
214
|
g: fmt(this.g),
|
223
215
|
b: fmt(this.b),
|
224
216
|
a: this.a,
|
225
217
|
};
|
226
|
-
}
|
218
|
+
}
|
227
219
|
/**
|
228
220
|
* Returns the RGBA relative values interpolated into a string
|
229
221
|
*/
|
230
|
-
|
231
|
-
|
222
|
+
toPercentageRgbString() {
|
223
|
+
const rnd = (x) => Math.round((0, util_js_1.bound01)(x, 255) * 100);
|
232
224
|
return this.a === 1
|
233
|
-
?
|
234
|
-
:
|
235
|
-
}
|
225
|
+
? `rgb(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%)`
|
226
|
+
: `rgba(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%, ${this.roundA})`;
|
227
|
+
}
|
236
228
|
/**
|
237
229
|
* The 'real' name of the color -if there is one.
|
238
230
|
*/
|
239
|
-
|
231
|
+
toName() {
|
240
232
|
if (this.a === 0) {
|
241
233
|
return 'transparent';
|
242
234
|
}
|
243
235
|
if (this.a < 1) {
|
244
236
|
return false;
|
245
237
|
}
|
246
|
-
|
247
|
-
for (
|
248
|
-
var _b = _a[_i], key = _b[0], value = _b[1];
|
238
|
+
const hex = '#' + (0, conversion_js_1.rgbToHex)(this.r, this.g, this.b, false);
|
239
|
+
for (const [key, value] of Object.entries(css_color_names_js_1.names)) {
|
249
240
|
if (hex === value) {
|
250
241
|
return key;
|
251
242
|
}
|
252
243
|
}
|
253
244
|
return false;
|
254
|
-
}
|
255
|
-
|
256
|
-
|
257
|
-
format = format
|
258
|
-
|
259
|
-
|
260
|
-
|
245
|
+
}
|
246
|
+
toString(format) {
|
247
|
+
const formatSet = Boolean(format);
|
248
|
+
format = format ?? this.format;
|
249
|
+
let formattedString = false;
|
250
|
+
const hasAlpha = this.a < 1 && this.a >= 0;
|
251
|
+
const needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');
|
261
252
|
if (needsAlphaFormat) {
|
262
253
|
// Special case for "transparent", all other non-alpha formats
|
263
254
|
// will return rgba when there is transparency.
|
@@ -294,219 +285,200 @@ var TinyColor = /** @class */ (function () {
|
|
294
285
|
formattedString = this.toHsvString();
|
295
286
|
}
|
296
287
|
return formattedString || this.toHexString();
|
297
|
-
}
|
298
|
-
|
288
|
+
}
|
289
|
+
toNumber() {
|
299
290
|
return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
|
300
|
-
}
|
301
|
-
|
291
|
+
}
|
292
|
+
clone() {
|
302
293
|
return new TinyColor(this.toString());
|
303
|
-
}
|
294
|
+
}
|
304
295
|
/**
|
305
296
|
* Lighten the color a given amount. Providing 100 will always return white.
|
306
297
|
* @param amount - valid between 1-100
|
307
298
|
*/
|
308
|
-
|
309
|
-
|
310
|
-
var hsl = this.toHsl();
|
299
|
+
lighten(amount = 10) {
|
300
|
+
const hsl = this.toHsl();
|
311
301
|
hsl.l += amount / 100;
|
312
302
|
hsl.l = (0, util_js_1.clamp01)(hsl.l);
|
313
303
|
return new TinyColor(hsl);
|
314
|
-
}
|
304
|
+
}
|
315
305
|
/**
|
316
306
|
* Brighten the color a given amount, from 0 to 100.
|
317
307
|
* @param amount - valid between 1-100
|
318
308
|
*/
|
319
|
-
|
320
|
-
|
321
|
-
var rgb = this.toRgb();
|
309
|
+
brighten(amount = 10) {
|
310
|
+
const rgb = this.toRgb();
|
322
311
|
rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
|
323
312
|
rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
|
324
313
|
rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
|
325
314
|
return new TinyColor(rgb);
|
326
|
-
}
|
315
|
+
}
|
327
316
|
/**
|
328
317
|
* Darken the color a given amount, from 0 to 100.
|
329
318
|
* Providing 100 will always return black.
|
330
319
|
* @param amount - valid between 1-100
|
331
320
|
*/
|
332
|
-
|
333
|
-
|
334
|
-
var hsl = this.toHsl();
|
321
|
+
darken(amount = 10) {
|
322
|
+
const hsl = this.toHsl();
|
335
323
|
hsl.l -= amount / 100;
|
336
324
|
hsl.l = (0, util_js_1.clamp01)(hsl.l);
|
337
325
|
return new TinyColor(hsl);
|
338
|
-
}
|
326
|
+
}
|
339
327
|
/**
|
340
328
|
* Mix the color with pure white, from 0 to 100.
|
341
329
|
* Providing 0 will do nothing, providing 100 will always return white.
|
342
330
|
* @param amount - valid between 1-100
|
343
331
|
*/
|
344
|
-
|
345
|
-
if (amount === void 0) { amount = 10; }
|
332
|
+
tint(amount = 10) {
|
346
333
|
return this.mix('white', amount);
|
347
|
-
}
|
334
|
+
}
|
348
335
|
/**
|
349
336
|
* Mix the color with pure black, from 0 to 100.
|
350
337
|
* Providing 0 will do nothing, providing 100 will always return black.
|
351
338
|
* @param amount - valid between 1-100
|
352
339
|
*/
|
353
|
-
|
354
|
-
if (amount === void 0) { amount = 10; }
|
340
|
+
shade(amount = 10) {
|
355
341
|
return this.mix('black', amount);
|
356
|
-
}
|
342
|
+
}
|
357
343
|
/**
|
358
344
|
* Desaturate the color a given amount, from 0 to 100.
|
359
345
|
* Providing 100 will is the same as calling greyscale
|
360
346
|
* @param amount - valid between 1-100
|
361
347
|
*/
|
362
|
-
|
363
|
-
|
364
|
-
var hsl = this.toHsl();
|
348
|
+
desaturate(amount = 10) {
|
349
|
+
const hsl = this.toHsl();
|
365
350
|
hsl.s -= amount / 100;
|
366
351
|
hsl.s = (0, util_js_1.clamp01)(hsl.s);
|
367
352
|
return new TinyColor(hsl);
|
368
|
-
}
|
353
|
+
}
|
369
354
|
/**
|
370
355
|
* Saturate the color a given amount, from 0 to 100.
|
371
356
|
* @param amount - valid between 1-100
|
372
357
|
*/
|
373
|
-
|
374
|
-
|
375
|
-
var hsl = this.toHsl();
|
358
|
+
saturate(amount = 10) {
|
359
|
+
const hsl = this.toHsl();
|
376
360
|
hsl.s += amount / 100;
|
377
361
|
hsl.s = (0, util_js_1.clamp01)(hsl.s);
|
378
362
|
return new TinyColor(hsl);
|
379
|
-
}
|
363
|
+
}
|
380
364
|
/**
|
381
365
|
* Completely desaturates a color into greyscale.
|
382
366
|
* Same as calling `desaturate(100)`
|
383
367
|
*/
|
384
|
-
|
368
|
+
greyscale() {
|
385
369
|
return this.desaturate(100);
|
386
|
-
}
|
370
|
+
}
|
387
371
|
/**
|
388
372
|
* Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
|
389
373
|
* Values outside of this range will be wrapped into this range.
|
390
374
|
*/
|
391
|
-
|
392
|
-
|
393
|
-
|
375
|
+
spin(amount) {
|
376
|
+
const hsl = this.toHsl();
|
377
|
+
const hue = (hsl.h + amount) % 360;
|
394
378
|
hsl.h = hue < 0 ? 360 + hue : hue;
|
395
379
|
return new TinyColor(hsl);
|
396
|
-
}
|
380
|
+
}
|
397
381
|
/**
|
398
382
|
* Mix the current color a given amount with another color, from 0 to 100.
|
399
383
|
* 0 means no mixing (return current color).
|
400
384
|
*/
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
var rgba = {
|
385
|
+
mix(color, amount = 50) {
|
386
|
+
const rgb1 = this.toRgb();
|
387
|
+
const rgb2 = new TinyColor(color).toRgb();
|
388
|
+
const p = amount / 100;
|
389
|
+
const rgba = {
|
407
390
|
r: (rgb2.r - rgb1.r) * p + rgb1.r,
|
408
391
|
g: (rgb2.g - rgb1.g) * p + rgb1.g,
|
409
392
|
b: (rgb2.b - rgb1.b) * p + rgb1.b,
|
410
393
|
a: (rgb2.a - rgb1.a) * p + rgb1.a,
|
411
394
|
};
|
412
395
|
return new TinyColor(rgba);
|
413
|
-
}
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
var part = 360 / slices;
|
419
|
-
var ret = [this];
|
396
|
+
}
|
397
|
+
analogous(results = 6, slices = 30) {
|
398
|
+
const hsl = this.toHsl();
|
399
|
+
const part = 360 / slices;
|
400
|
+
const ret = [this];
|
420
401
|
for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results;) {
|
421
402
|
hsl.h = (hsl.h + part) % 360;
|
422
403
|
ret.push(new TinyColor(hsl));
|
423
404
|
}
|
424
405
|
return ret;
|
425
|
-
}
|
406
|
+
}
|
426
407
|
/**
|
427
408
|
* taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
|
428
409
|
*/
|
429
|
-
|
430
|
-
|
410
|
+
complement() {
|
411
|
+
const hsl = this.toHsl();
|
431
412
|
hsl.h = (hsl.h + 180) % 360;
|
432
413
|
return new TinyColor(hsl);
|
433
|
-
}
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
var modification = 1 / results;
|
414
|
+
}
|
415
|
+
monochromatic(results = 6) {
|
416
|
+
const hsv = this.toHsv();
|
417
|
+
const { h } = hsv;
|
418
|
+
const { s } = hsv;
|
419
|
+
let { v } = hsv;
|
420
|
+
const res = [];
|
421
|
+
const modification = 1 / results;
|
442
422
|
while (results--) {
|
443
|
-
res.push(new TinyColor({ h
|
423
|
+
res.push(new TinyColor({ h, s, v }));
|
444
424
|
v = (v + modification) % 1;
|
445
425
|
}
|
446
426
|
return res;
|
447
|
-
}
|
448
|
-
|
449
|
-
|
450
|
-
|
427
|
+
}
|
428
|
+
splitcomplement() {
|
429
|
+
const hsl = this.toHsl();
|
430
|
+
const { h } = hsl;
|
451
431
|
return [
|
452
432
|
this,
|
453
433
|
new TinyColor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
|
454
434
|
new TinyColor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }),
|
455
435
|
];
|
456
|
-
}
|
436
|
+
}
|
457
437
|
/**
|
458
438
|
* Compute how the color would appear on a background
|
459
439
|
*/
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
440
|
+
onBackground(background) {
|
441
|
+
const fg = this.toRgb();
|
442
|
+
const bg = new TinyColor(background).toRgb();
|
443
|
+
const alpha = fg.a + bg.a * (1 - fg.a);
|
464
444
|
return new TinyColor({
|
465
445
|
r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
|
466
446
|
g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
|
467
447
|
b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
|
468
448
|
a: alpha,
|
469
449
|
});
|
470
|
-
}
|
450
|
+
}
|
471
451
|
/**
|
472
452
|
* Alias for `polyad(3)`
|
473
453
|
*/
|
474
|
-
|
454
|
+
triad() {
|
475
455
|
return this.polyad(3);
|
476
|
-
}
|
456
|
+
}
|
477
457
|
/**
|
478
458
|
* Alias for `polyad(4)`
|
479
459
|
*/
|
480
|
-
|
460
|
+
tetrad() {
|
481
461
|
return this.polyad(4);
|
482
|
-
}
|
462
|
+
}
|
483
463
|
/**
|
484
464
|
* Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
|
485
465
|
* monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
|
486
466
|
*/
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
for (
|
467
|
+
polyad(n) {
|
468
|
+
const hsl = this.toHsl();
|
469
|
+
const { h } = hsl;
|
470
|
+
const result = [this];
|
471
|
+
const increment = 360 / n;
|
472
|
+
for (let i = 1; i < n; i++) {
|
493
473
|
result.push(new TinyColor({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
|
494
474
|
}
|
495
475
|
return result;
|
496
|
-
}
|
476
|
+
}
|
497
477
|
/**
|
498
478
|
* compare color vs current color
|
499
479
|
*/
|
500
|
-
|
480
|
+
equals(color) {
|
501
481
|
return this.toRgbString() === new TinyColor(color).toRgbString();
|
502
|
-
}
|
503
|
-
return TinyColor;
|
504
|
-
}());
|
505
|
-
exports.TinyColor = TinyColor;
|
506
|
-
// kept for backwards compatability with v1
|
507
|
-
function tinycolor(color, opts) {
|
508
|
-
if (color === void 0) { color = ''; }
|
509
|
-
if (opts === void 0) { opts = {}; }
|
510
|
-
return new TinyColor(color, opts);
|
482
|
+
}
|
511
483
|
}
|
512
|
-
exports.
|
484
|
+
exports.TinyColor = TinyColor;
|