| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508 |
- import { numberInputToObject, rgbaToHex, rgbToHex, rgbToHsl, rgbToHsv } from './conversion.js';
- import { names } from './css-color-names.js';
- import { inputToRGB } from './format-input';
- import { bound01, boundAlpha, clamp01 } from './util.js';
- var TinyColor = /** @class */ (function () {
- function TinyColor(color, opts) {
- if (color === void 0) { color = ''; }
- if (opts === void 0) { opts = {}; }
- var _a;
- // If input is already a tinycolor, return itself
- if (color instanceof TinyColor) {
- // eslint-disable-next-line no-constructor-return
- return color;
- }
- if (typeof color === 'number') {
- color = numberInputToObject(color);
- }
- this.originalInput = color;
- var rgb = inputToRGB(color);
- this.originalInput = color;
- this.r = rgb.r;
- this.g = rgb.g;
- this.b = rgb.b;
- this.a = rgb.a;
- this.roundA = Math.round(100 * this.a) / 100;
- this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
- this.gradientType = opts.gradientType;
- // Don't let the range of [0,255] come back in [0,1].
- // Potentially lose a little bit of precision here, but will fix issues where
- // .5 gets interpreted as half of the total, instead of half of 1
- // If it was supposed to be 128, this was already taken care of by `inputToRgb`
- if (this.r < 1) {
- this.r = Math.round(this.r);
- }
- if (this.g < 1) {
- this.g = Math.round(this.g);
- }
- if (this.b < 1) {
- this.b = Math.round(this.b);
- }
- this.isValid = rgb.ok;
- }
- TinyColor.prototype.isDark = function () {
- return this.getBrightness() < 128;
- };
- TinyColor.prototype.isLight = function () {
- return !this.isDark();
- };
- /**
- * Returns the perceived brightness of the color, from 0-255.
- */
- TinyColor.prototype.getBrightness = function () {
- // http://www.w3.org/TR/AERT#color-contrast
- var rgb = this.toRgb();
- return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
- };
- /**
- * Returns the perceived luminance of a color, from 0-1.
- */
- TinyColor.prototype.getLuminance = function () {
- // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
- var rgb = this.toRgb();
- var R;
- var G;
- var B;
- var RsRGB = rgb.r / 255;
- var GsRGB = rgb.g / 255;
- var BsRGB = rgb.b / 255;
- if (RsRGB <= 0.03928) {
- R = RsRGB / 12.92;
- }
- else {
- // eslint-disable-next-line prefer-exponentiation-operator
- R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
- }
- if (GsRGB <= 0.03928) {
- G = GsRGB / 12.92;
- }
- else {
- // eslint-disable-next-line prefer-exponentiation-operator
- G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
- }
- if (BsRGB <= 0.03928) {
- B = BsRGB / 12.92;
- }
- else {
- // eslint-disable-next-line prefer-exponentiation-operator
- B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
- }
- return 0.2126 * R + 0.7152 * G + 0.0722 * B;
- };
- /**
- * Returns the alpha value of a color, from 0-1.
- */
- TinyColor.prototype.getAlpha = function () {
- return this.a;
- };
- /**
- * Sets the alpha value on the current color.
- *
- * @param alpha - The new alpha value. The accepted range is 0-1.
- */
- TinyColor.prototype.setAlpha = function (alpha) {
- this.a = boundAlpha(alpha);
- this.roundA = Math.round(100 * this.a) / 100;
- return this;
- };
- /**
- * Returns whether the color is monochrome.
- */
- TinyColor.prototype.isMonochrome = function () {
- var s = this.toHsl().s;
- return s === 0;
- };
- /**
- * Returns the object as a HSVA object.
- */
- TinyColor.prototype.toHsv = function () {
- var hsv = rgbToHsv(this.r, this.g, this.b);
- return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
- };
- /**
- * Returns the hsva values interpolated into a string with the following format:
- * "hsva(xxx, xxx, xxx, xx)".
- */
- TinyColor.prototype.toHsvString = function () {
- var hsv = rgbToHsv(this.r, this.g, this.b);
- var h = Math.round(hsv.h * 360);
- var s = Math.round(hsv.s * 100);
- var v = Math.round(hsv.v * 100);
- return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
- };
- /**
- * Returns the object as a HSLA object.
- */
- TinyColor.prototype.toHsl = function () {
- var hsl = rgbToHsl(this.r, this.g, this.b);
- return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
- };
- /**
- * Returns the hsla values interpolated into a string with the following format:
- * "hsla(xxx, xxx, xxx, xx)".
- */
- TinyColor.prototype.toHslString = function () {
- var hsl = rgbToHsl(this.r, this.g, this.b);
- var h = Math.round(hsl.h * 360);
- var s = Math.round(hsl.s * 100);
- var l = Math.round(hsl.l * 100);
- return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
- };
- /**
- * Returns the hex value of the color.
- * @param allow3Char will shorten hex value to 3 char if possible
- */
- TinyColor.prototype.toHex = function (allow3Char) {
- if (allow3Char === void 0) { allow3Char = false; }
- return rgbToHex(this.r, this.g, this.b, allow3Char);
- };
- /**
- * Returns the hex value of the color -with a # prefixed.
- * @param allow3Char will shorten hex value to 3 char if possible
- */
- TinyColor.prototype.toHexString = function (allow3Char) {
- if (allow3Char === void 0) { allow3Char = false; }
- return '#' + this.toHex(allow3Char);
- };
- /**
- * Returns the hex 8 value of the color.
- * @param allow4Char will shorten hex value to 4 char if possible
- */
- TinyColor.prototype.toHex8 = function (allow4Char) {
- if (allow4Char === void 0) { allow4Char = false; }
- return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
- };
- /**
- * Returns the hex 8 value of the color -with a # prefixed.
- * @param allow4Char will shorten hex value to 4 char if possible
- */
- TinyColor.prototype.toHex8String = function (allow4Char) {
- if (allow4Char === void 0) { allow4Char = false; }
- return '#' + this.toHex8(allow4Char);
- };
- /**
- * Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
- * @param allowShortChar will shorten hex value to 3 or 4 char if possible
- */
- TinyColor.prototype.toHexShortString = function (allowShortChar) {
- if (allowShortChar === void 0) { allowShortChar = false; }
- return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
- };
- /**
- * Returns the object as a RGBA object.
- */
- TinyColor.prototype.toRgb = function () {
- return {
- r: Math.round(this.r),
- g: Math.round(this.g),
- b: Math.round(this.b),
- a: this.a,
- };
- };
- /**
- * Returns the RGBA values interpolated into a string with the following format:
- * "RGBA(xxx, xxx, xxx, xx)".
- */
- TinyColor.prototype.toRgbString = function () {
- var r = Math.round(this.r);
- var g = Math.round(this.g);
- var b = Math.round(this.b);
- return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
- };
- /**
- * Returns the object as a RGBA object.
- */
- TinyColor.prototype.toPercentageRgb = function () {
- var fmt = function (x) { return "".concat(Math.round(bound01(x, 255) * 100), "%"); };
- return {
- r: fmt(this.r),
- g: fmt(this.g),
- b: fmt(this.b),
- a: this.a,
- };
- };
- /**
- * Returns the RGBA relative values interpolated into a string
- */
- TinyColor.prototype.toPercentageRgbString = function () {
- var rnd = function (x) { return Math.round(bound01(x, 255) * 100); };
- return this.a === 1
- ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)")
- : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
- };
- /**
- * The 'real' name of the color -if there is one.
- */
- TinyColor.prototype.toName = function () {
- if (this.a === 0) {
- return 'transparent';
- }
- if (this.a < 1) {
- return false;
- }
- var hex = '#' + rgbToHex(this.r, this.g, this.b, false);
- for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {
- var _b = _a[_i], key = _b[0], value = _b[1];
- if (hex === value) {
- return key;
- }
- }
- return false;
- };
- TinyColor.prototype.toString = function (format) {
- var formatSet = Boolean(format);
- format = format !== null && format !== void 0 ? format : this.format;
- var formattedString = false;
- var hasAlpha = this.a < 1 && this.a >= 0;
- var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');
- if (needsAlphaFormat) {
- // Special case for "transparent", all other non-alpha formats
- // will return rgba when there is transparency.
- if (format === 'name' && this.a === 0) {
- return this.toName();
- }
- return this.toRgbString();
- }
- if (format === 'rgb') {
- formattedString = this.toRgbString();
- }
- if (format === 'prgb') {
- formattedString = this.toPercentageRgbString();
- }
- if (format === 'hex' || format === 'hex6') {
- formattedString = this.toHexString();
- }
- if (format === 'hex3') {
- formattedString = this.toHexString(true);
- }
- if (format === 'hex4') {
- formattedString = this.toHex8String(true);
- }
- if (format === 'hex8') {
- formattedString = this.toHex8String();
- }
- if (format === 'name') {
- formattedString = this.toName();
- }
- if (format === 'hsl') {
- formattedString = this.toHslString();
- }
- if (format === 'hsv') {
- formattedString = this.toHsvString();
- }
- return formattedString || this.toHexString();
- };
- TinyColor.prototype.toNumber = function () {
- return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
- };
- TinyColor.prototype.clone = function () {
- return new TinyColor(this.toString());
- };
- /**
- * Lighten the color a given amount. Providing 100 will always return white.
- * @param amount - valid between 1-100
- */
- TinyColor.prototype.lighten = function (amount) {
- if (amount === void 0) { amount = 10; }
- var hsl = this.toHsl();
- hsl.l += amount / 100;
- hsl.l = clamp01(hsl.l);
- return new TinyColor(hsl);
- };
- /**
- * Brighten the color a given amount, from 0 to 100.
- * @param amount - valid between 1-100
- */
- TinyColor.prototype.brighten = function (amount) {
- if (amount === void 0) { amount = 10; }
- var rgb = this.toRgb();
- rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
- rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
- rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
- return new TinyColor(rgb);
- };
- /**
- * Darken the color a given amount, from 0 to 100.
- * Providing 100 will always return black.
- * @param amount - valid between 1-100
- */
- TinyColor.prototype.darken = function (amount) {
- if (amount === void 0) { amount = 10; }
- var hsl = this.toHsl();
- hsl.l -= amount / 100;
- hsl.l = clamp01(hsl.l);
- return new TinyColor(hsl);
- };
- /**
- * Mix the color with pure white, from 0 to 100.
- * Providing 0 will do nothing, providing 100 will always return white.
- * @param amount - valid between 1-100
- */
- TinyColor.prototype.tint = function (amount) {
- if (amount === void 0) { amount = 10; }
- return this.mix('white', amount);
- };
- /**
- * Mix the color with pure black, from 0 to 100.
- * Providing 0 will do nothing, providing 100 will always return black.
- * @param amount - valid between 1-100
- */
- TinyColor.prototype.shade = function (amount) {
- if (amount === void 0) { amount = 10; }
- return this.mix('black', amount);
- };
- /**
- * Desaturate the color a given amount, from 0 to 100.
- * Providing 100 will is the same as calling greyscale
- * @param amount - valid between 1-100
- */
- TinyColor.prototype.desaturate = function (amount) {
- if (amount === void 0) { amount = 10; }
- var hsl = this.toHsl();
- hsl.s -= amount / 100;
- hsl.s = clamp01(hsl.s);
- return new TinyColor(hsl);
- };
- /**
- * Saturate the color a given amount, from 0 to 100.
- * @param amount - valid between 1-100
- */
- TinyColor.prototype.saturate = function (amount) {
- if (amount === void 0) { amount = 10; }
- var hsl = this.toHsl();
- hsl.s += amount / 100;
- hsl.s = clamp01(hsl.s);
- return new TinyColor(hsl);
- };
- /**
- * Completely desaturates a color into greyscale.
- * Same as calling `desaturate(100)`
- */
- TinyColor.prototype.greyscale = function () {
- return this.desaturate(100);
- };
- /**
- * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
- * Values outside of this range will be wrapped into this range.
- */
- TinyColor.prototype.spin = function (amount) {
- var hsl = this.toHsl();
- var hue = (hsl.h + amount) % 360;
- hsl.h = hue < 0 ? 360 + hue : hue;
- return new TinyColor(hsl);
- };
- /**
- * Mix the current color a given amount with another color, from 0 to 100.
- * 0 means no mixing (return current color).
- */
- TinyColor.prototype.mix = function (color, amount) {
- if (amount === void 0) { amount = 50; }
- var rgb1 = this.toRgb();
- var rgb2 = new TinyColor(color).toRgb();
- var p = amount / 100;
- var rgba = {
- r: (rgb2.r - rgb1.r) * p + rgb1.r,
- g: (rgb2.g - rgb1.g) * p + rgb1.g,
- b: (rgb2.b - rgb1.b) * p + rgb1.b,
- a: (rgb2.a - rgb1.a) * p + rgb1.a,
- };
- return new TinyColor(rgba);
- };
- TinyColor.prototype.analogous = function (results, slices) {
- if (results === void 0) { results = 6; }
- if (slices === void 0) { slices = 30; }
- var hsl = this.toHsl();
- var part = 360 / slices;
- var ret = [this];
- for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results;) {
- hsl.h = (hsl.h + part) % 360;
- ret.push(new TinyColor(hsl));
- }
- return ret;
- };
- /**
- * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
- */
- TinyColor.prototype.complement = function () {
- var hsl = this.toHsl();
- hsl.h = (hsl.h + 180) % 360;
- return new TinyColor(hsl);
- };
- TinyColor.prototype.monochromatic = function (results) {
- if (results === void 0) { results = 6; }
- var hsv = this.toHsv();
- var h = hsv.h;
- var s = hsv.s;
- var v = hsv.v;
- var res = [];
- var modification = 1 / results;
- while (results--) {
- res.push(new TinyColor({ h: h, s: s, v: v }));
- v = (v + modification) % 1;
- }
- return res;
- };
- TinyColor.prototype.splitcomplement = function () {
- var hsl = this.toHsl();
- var h = hsl.h;
- return [
- this,
- new TinyColor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
- new TinyColor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }),
- ];
- };
- /**
- * Compute how the color would appear on a background
- */
- TinyColor.prototype.onBackground = function (background) {
- var fg = this.toRgb();
- var bg = new TinyColor(background).toRgb();
- var alpha = fg.a + bg.a * (1 - fg.a);
- return new TinyColor({
- r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
- g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
- b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
- a: alpha,
- });
- };
- /**
- * Alias for `polyad(3)`
- */
- TinyColor.prototype.triad = function () {
- return this.polyad(3);
- };
- /**
- * Alias for `polyad(4)`
- */
- TinyColor.prototype.tetrad = function () {
- return this.polyad(4);
- };
- /**
- * Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
- * monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
- */
- TinyColor.prototype.polyad = function (n) {
- var hsl = this.toHsl();
- var h = hsl.h;
- var result = [this];
- var increment = 360 / n;
- for (var i = 1; i < n; i++) {
- result.push(new TinyColor({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
- }
- return result;
- };
- /**
- * compare color vs current color
- */
- TinyColor.prototype.equals = function (color) {
- return this.toRgbString() === new TinyColor(color).toRgbString();
- };
- return TinyColor;
- }());
- export { TinyColor };
- // kept for backwards compatability with v1
- export function tinycolor(color, opts) {
- if (color === void 0) { color = ''; }
- if (opts === void 0) { opts = {}; }
- return new TinyColor(color, opts);
- }
|