Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@bgrins/test-tinycolor-esm
Advanced tools
@bgrins/test-tinycolor-esm - npm Package Compare versions
Comparing version 0.0.6 to 1.4.2
@@ -33,3 +33,3 @@ // This file is autogenerated. | ||
| Deno.test("url test", () => { | ||
| Deno.test("TinyColor initialization", function () { | ||
| assert( | ||
@@ -72,17 +72,2 @@ typeof tinycolor != "undefined", | ||
| // Deno.test("TinyColor initialization", function() { | ||
| // assert(typeof tinycolor != "undefined", "tinycolor is initialized on the page"); | ||
| // assert(typeof tinycolor("red") == "object", "tinycolor is able to be instantiated"); | ||
| // var r = tinycolor("red"); | ||
| // assert(tinycolor(r) === r, "when given a tinycolor instance, tinycolor() returns it"); | ||
| // assert(new tinycolor(r) === r, "when given a tinycolor instance, new tinycolor() returns it"); | ||
| // assertEquals(tinycolor("red", { format: "hex" }).toString(), "#ff0000", "tinycolor options are being parsed"); | ||
| // assertEquals(tinycolor.fromRatio({r: 1, g: 0, b: 0 }, { format: "hex" }).toString(), "#ff0000", "tinycolor options are being parsed"); | ||
| // var obj = {h: 180, s: 0.5, l: 0.5}; | ||
| // var color = tinycolor(obj); | ||
| // assert(obj.s === 0.5, "when given an object, the original object is not modified"); | ||
| // }); | ||
| Deno.test("Original input", function () { | ||
@@ -370,3 +355,8 @@ var colorRgbUp = "RGB(39, 39, 39)"; | ||
| tinycolor({ r: 255, g: 0, b: 0 }).toRgb(), | ||
| { r: 255, g: 0, b: 0, a: 1 }, | ||
| { | ||
| r: 255, | ||
| g: 0, | ||
| b: 0, | ||
| a: 1, | ||
| }, | ||
| "object input and compare" | ||
@@ -421,3 +411,8 @@ ); | ||
| tinycolor({ r: "100%", g: "0%", b: "0%" }).toRgb(), | ||
| { r: 255, g: 0, b: 0, a: 1 }, | ||
| { | ||
| r: 255, | ||
| g: 0, | ||
| b: 0, | ||
| a: 1, | ||
| }, | ||
| "object input and compare" | ||
@@ -768,11 +763,17 @@ ); | ||
| { r: 255, g: 0, b: 0, a: 0.6 }, | ||
| { format: "name" } | ||
| { | ||
| format: "name", | ||
| } | ||
| ); | ||
| var transparentNamed = tinycolor.fromRatio( | ||
| { r: 255, g: 0, b: 0, a: 0 }, | ||
| { format: "name" } | ||
| { | ||
| format: "name", | ||
| } | ||
| ); | ||
| var redHex = tinycolor.fromRatio( | ||
| { r: 255, g: 0, b: 0, a: 0.4 }, | ||
| { format: "hex" } | ||
| { | ||
| format: "hex", | ||
| } | ||
| ); | ||
@@ -1284,3 +1285,5 @@ | ||
| tinycolor | ||
| .mostReadable("#fff", ["#fff", "#fff"], { includeFallbackColors: true }) | ||
| .mostReadable("#fff", ["#fff", "#fff"], { | ||
| includeFallbackColors: true, | ||
| }) | ||
| .toHexString(), | ||
@@ -1292,3 +1295,5 @@ "#000000", | ||
| tinycolor | ||
| .mostReadable("#123", ["#124", "#125"], { includeFallbackColors: false }) | ||
| .mostReadable("#123", ["#124", "#125"], { | ||
| includeFallbackColors: false, | ||
| }) | ||
| .toHexString(), | ||
@@ -1300,3 +1305,5 @@ "#112255", | ||
| tinycolor | ||
| .mostReadable("#123", ["#000", "#fff"], { includeFallbackColors: false }) | ||
| .mostReadable("#123", ["#000", "#fff"], { | ||
| includeFallbackColors: false, | ||
| }) | ||
| .toHexString(), | ||
@@ -1308,3 +1315,5 @@ "#ffffff", | ||
| tinycolor | ||
| .mostReadable("#123", ["#124", "#125"], { includeFallbackColors: true }) | ||
| .mostReadable("#123", ["#124", "#125"], { | ||
| includeFallbackColors: true, | ||
| }) | ||
| .toHexString(), | ||
@@ -2081,2 +2090,4 @@ "#ffffff", | ||
| // The combination tests need to be expanded furthe | ||
| function colorsToHexString(colors) { | ||
@@ -2083,0 +2094,0 @@ return colors |
2192
cjs/tinycolor.js
| // This file is autogenerated. | ||
| // It's here for backwards compatibility with CJS. | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.tinycolor = factory()); | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.tinycolor = factory()); | ||
| })(this, (function () { 'use strict'; | ||
| // https://github.com/bgrins/TinyColor | ||
| // Brian Grinstead, MIT License | ||
| // TinyColor v1.4.2 | ||
| // https://github.com/bgrins/TinyColor | ||
| // Brian Grinstead, MIT License | ||
| var trimLeft = /^\s+/, | ||
| trimRight = /\s+$/, | ||
| mathRound = Math.round, | ||
| mathMin = Math.min, | ||
| mathMax = Math.max, | ||
| mathRandom = Math.random; | ||
| var trimLeft = /^\s+/, | ||
| trimRight = /\s+$/, | ||
| mathRound = Math.round, | ||
| mathMin = Math.min, | ||
| mathMax = Math.max, | ||
| mathRandom = Math.random; | ||
| function tinycolor (color, opts) { | ||
| function tinycolor(color, opts) { | ||
| color = color ? color : ""; | ||
| opts = opts || {}; | ||
| color = (color) ? color : ''; | ||
| opts = opts || { }; | ||
| // If input is already a tinycolor, return itself | ||
| if (color instanceof tinycolor) { | ||
| return color; | ||
| } | ||
| // If we are called as a function, call using new instead | ||
| if (!(this instanceof tinycolor)) { | ||
| return new tinycolor(color, opts); | ||
| } | ||
| // If input is already a tinycolor, return itself | ||
| if (color instanceof tinycolor) { | ||
| return color; | ||
| } | ||
| // If we are called as a function, call using new instead | ||
| if (!(this instanceof tinycolor)) { | ||
| return new tinycolor(color, opts); | ||
| } | ||
| 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 = mathRound(100 * this._a) / 100), | ||
| (this._format = opts.format || rgb.format); | ||
| this._gradientType = opts.gradientType; | ||
| 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 = mathRound(100*this._a) / 100, | ||
| this._format = opts.format || 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 = mathRound(this._r); | ||
| if (this._g < 1) this._g = mathRound(this._g); | ||
| if (this._b < 1) this._b = mathRound(this._b); | ||
| // 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 = mathRound(this._r); } | ||
| if (this._g < 1) { this._g = mathRound(this._g); } | ||
| if (this._b < 1) { this._b = mathRound(this._b); } | ||
| this._ok = rgb.ok; | ||
| } | ||
| this._ok = rgb.ok; | ||
| } | ||
| tinycolor.prototype = { | ||
| isDark: function () { | ||
| return this.getBrightness() < 128; | ||
| }, | ||
| isLight: function () { | ||
| return !this.isDark(); | ||
| }, | ||
| isValid: function () { | ||
| return this._ok; | ||
| }, | ||
| getOriginalInput: function () { | ||
| return this._originalInput; | ||
| }, | ||
| getFormat: function () { | ||
| return this._format; | ||
| }, | ||
| getAlpha: function () { | ||
| return this._a; | ||
| }, | ||
| 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; | ||
| }, | ||
| getLuminance: function () { | ||
| //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef | ||
| var rgb = this.toRgb(); | ||
| var RsRGB, GsRGB, BsRGB, R, G, B; | ||
| RsRGB = rgb.r / 255; | ||
| GsRGB = rgb.g / 255; | ||
| BsRGB = rgb.b / 255; | ||
| tinycolor.prototype = { | ||
| isDark: function() { | ||
| return this.getBrightness() < 128; | ||
| }, | ||
| isLight: function() { | ||
| return !this.isDark(); | ||
| }, | ||
| isValid: function() { | ||
| return this._ok; | ||
| }, | ||
| getOriginalInput: function() { | ||
| return this._originalInput; | ||
| }, | ||
| getFormat: function() { | ||
| return this._format; | ||
| }, | ||
| getAlpha: function() { | ||
| return this._a; | ||
| }, | ||
| 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; | ||
| }, | ||
| getLuminance: function() { | ||
| //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef | ||
| var rgb = this.toRgb(); | ||
| var RsRGB, GsRGB, BsRGB, R, G, B; | ||
| RsRGB = rgb.r/255; | ||
| GsRGB = rgb.g/255; | ||
| BsRGB = rgb.b/255; | ||
| if (RsRGB <= 0.03928) R = RsRGB / 12.92; | ||
| else R = Math.pow((RsRGB + 0.055) / 1.055, 2.4); | ||
| if (GsRGB <= 0.03928) G = GsRGB / 12.92; | ||
| else G = Math.pow((GsRGB + 0.055) / 1.055, 2.4); | ||
| if (BsRGB <= 0.03928) B = BsRGB / 12.92; | ||
| else B = Math.pow((BsRGB + 0.055) / 1.055, 2.4); | ||
| return 0.2126 * R + 0.7152 * G + 0.0722 * B; | ||
| }, | ||
| setAlpha: function (value) { | ||
| this._a = boundAlpha(value); | ||
| this._roundA = mathRound(100 * this._a) / 100; | ||
| return this; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHsvString: function () { | ||
| var hsv = rgbToHsv(this._r, this._g, this._b); | ||
| var h = mathRound(hsv.h * 360), | ||
| s = mathRound(hsv.s * 100), | ||
| v = mathRound(hsv.v * 100); | ||
| return this._a == 1 | ||
| ? "hsv(" + h + ", " + s + "%, " + v + "%)" | ||
| : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")"; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHslString: function () { | ||
| var hsl = rgbToHsl(this._r, this._g, this._b); | ||
| var h = mathRound(hsl.h * 360), | ||
| s = mathRound(hsl.s * 100), | ||
| l = mathRound(hsl.l * 100); | ||
| return this._a == 1 | ||
| ? "hsl(" + h + ", " + s + "%, " + l + "%)" | ||
| : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")"; | ||
| }, | ||
| toHex: function (allow3Char) { | ||
| return rgbToHex(this._r, this._g, this._b, allow3Char); | ||
| }, | ||
| toHexString: function (allow3Char) { | ||
| return "#" + this.toHex(allow3Char); | ||
| }, | ||
| toHex8: function (allow4Char) { | ||
| return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); | ||
| }, | ||
| toHex8String: function (allow4Char) { | ||
| return "#" + this.toHex8(allow4Char); | ||
| }, | ||
| toRgb: function () { | ||
| return { | ||
| r: mathRound(this._r), | ||
| g: mathRound(this._g), | ||
| b: mathRound(this._b), | ||
| a: this._a, | ||
| }; | ||
| }, | ||
| toRgbString: function () { | ||
| return this._a == 1 | ||
| ? "rgb(" + | ||
| mathRound(this._r) + | ||
| ", " + | ||
| mathRound(this._g) + | ||
| ", " + | ||
| mathRound(this._b) + | ||
| ")" | ||
| : "rgba(" + | ||
| mathRound(this._r) + | ||
| ", " + | ||
| mathRound(this._g) + | ||
| ", " + | ||
| mathRound(this._b) + | ||
| ", " + | ||
| this._roundA + | ||
| ")"; | ||
| }, | ||
| toPercentageRgb: function () { | ||
| return { | ||
| r: mathRound(bound01(this._r, 255) * 100) + "%", | ||
| g: mathRound(bound01(this._g, 255) * 100) + "%", | ||
| b: mathRound(bound01(this._b, 255) * 100) + "%", | ||
| a: this._a, | ||
| }; | ||
| }, | ||
| toPercentageRgbString: function () { | ||
| return this._a == 1 | ||
| ? "rgb(" + | ||
| mathRound(bound01(this._r, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._g, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._b, 255) * 100) + | ||
| "%)" | ||
| : "rgba(" + | ||
| mathRound(bound01(this._r, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._g, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._b, 255) * 100) + | ||
| "%, " + | ||
| this._roundA + | ||
| ")"; | ||
| }, | ||
| toName: function () { | ||
| if (this._a === 0) { | ||
| return "transparent"; | ||
| } | ||
| if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} | ||
| if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} | ||
| if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} | ||
| return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); | ||
| }, | ||
| setAlpha: function(value) { | ||
| this._a = boundAlpha(value); | ||
| this._roundA = mathRound(100*this._a) / 100; | ||
| return this; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHsvString: function() { | ||
| var hsv = rgbToHsv(this._r, this._g, this._b); | ||
| var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); | ||
| return (this._a == 1) ? | ||
| "hsv(" + h + ", " + s + "%, " + v + "%)" : | ||
| "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHslString: function() { | ||
| var hsl = rgbToHsl(this._r, this._g, this._b); | ||
| var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); | ||
| return (this._a == 1) ? | ||
| "hsl(" + h + ", " + s + "%, " + l + "%)" : | ||
| "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; | ||
| }, | ||
| toHex: function(allow3Char) { | ||
| return rgbToHex(this._r, this._g, this._b, allow3Char); | ||
| }, | ||
| toHexString: function(allow3Char) { | ||
| return '#' + this.toHex(allow3Char); | ||
| }, | ||
| toHex8: function(allow4Char) { | ||
| return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); | ||
| }, | ||
| toHex8String: function(allow4Char) { | ||
| return '#' + this.toHex8(allow4Char); | ||
| }, | ||
| toRgb: function() { | ||
| return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; | ||
| }, | ||
| toRgbString: function() { | ||
| return (this._a == 1) ? | ||
| "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : | ||
| "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; | ||
| }, | ||
| toPercentageRgb: function() { | ||
| return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; | ||
| }, | ||
| toPercentageRgbString: function() { | ||
| return (this._a == 1) ? | ||
| "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : | ||
| "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; | ||
| }, | ||
| toName: function() { | ||
| if (this._a === 0) { | ||
| return "transparent"; | ||
| } | ||
| if (this._a < 1) { | ||
| return false; | ||
| } | ||
| if (this._a < 1) { | ||
| return false; | ||
| } | ||
| return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; | ||
| }, | ||
| toFilter: function (secondColor) { | ||
| var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a); | ||
| var secondHex8String = hex8String; | ||
| var gradientType = this._gradientType ? "GradientType = 1, " : ""; | ||
| return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; | ||
| }, | ||
| toFilter: function(secondColor) { | ||
| var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); | ||
| var secondHex8String = hex8String; | ||
| var gradientType = this._gradientType ? "GradientType = 1, " : ""; | ||
| if (secondColor) { | ||
| var s = tinycolor(secondColor); | ||
| secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a); | ||
| } | ||
| if (secondColor) { | ||
| var s = tinycolor(secondColor); | ||
| secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); | ||
| } | ||
| return ( | ||
| "progid:DXImageTransform.Microsoft.gradient(" + | ||
| gradientType + | ||
| "startColorstr=" + | ||
| hex8String + | ||
| ",endColorstr=" + | ||
| secondHex8String + | ||
| ")" | ||
| ); | ||
| }, | ||
| toString: function (format) { | ||
| var formatSet = !!format; | ||
| format = format || this._format; | ||
| return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; | ||
| }, | ||
| toString: function(format) { | ||
| var formatSet = !!format; | ||
| format = format || this._format; | ||
| var formattedString = false; | ||
| var hasAlpha = this._a < 1 && this._a >= 0; | ||
| var needsAlphaFormat = | ||
| !formatSet && | ||
| hasAlpha && | ||
| (format === "hex" || | ||
| format === "hex6" || | ||
| format === "hex3" || | ||
| format === "hex4" || | ||
| format === "hex8" || | ||
| format === "name"); | ||
| var formattedString = false; | ||
| var hasAlpha = this._a < 1 && this._a >= 0; | ||
| var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || 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(); | ||
| } | ||
| 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(); | ||
| }, | ||
| clone: function () { | ||
| return tinycolor(this.toString()); | ||
| }, | ||
| return formattedString || this.toHexString(); | ||
| }, | ||
| clone: function() { | ||
| return tinycolor(this.toString()); | ||
| }, | ||
| _applyModification: function (fn, args) { | ||
| var color = fn.apply(null, [this].concat([].slice.call(args))); | ||
| this._r = color._r; | ||
| this._g = color._g; | ||
| this._b = color._b; | ||
| this.setAlpha(color._a); | ||
| return this; | ||
| }, | ||
| lighten: function () { | ||
| return this._applyModification(lighten, arguments); | ||
| }, | ||
| brighten: function () { | ||
| return this._applyModification(brighten, arguments); | ||
| }, | ||
| darken: function () { | ||
| return this._applyModification(darken, arguments); | ||
| }, | ||
| desaturate: function () { | ||
| return this._applyModification(desaturate, arguments); | ||
| }, | ||
| saturate: function () { | ||
| return this._applyModification(saturate, arguments); | ||
| }, | ||
| greyscale: function () { | ||
| return this._applyModification(greyscale, arguments); | ||
| }, | ||
| spin: function () { | ||
| return this._applyModification(spin, arguments); | ||
| }, | ||
| _applyModification: function(fn, args) { | ||
| var color = fn.apply(null, [this].concat([].slice.call(args))); | ||
| this._r = color._r; | ||
| this._g = color._g; | ||
| this._b = color._b; | ||
| this.setAlpha(color._a); | ||
| return this; | ||
| }, | ||
| lighten: function() { | ||
| return this._applyModification(lighten, arguments); | ||
| }, | ||
| brighten: function() { | ||
| return this._applyModification(brighten, arguments); | ||
| }, | ||
| darken: function() { | ||
| return this._applyModification(darken, arguments); | ||
| }, | ||
| desaturate: function() { | ||
| return this._applyModification(desaturate, arguments); | ||
| }, | ||
| saturate: function() { | ||
| return this._applyModification(saturate, arguments); | ||
| }, | ||
| greyscale: function() { | ||
| return this._applyModification(greyscale, arguments); | ||
| }, | ||
| spin: function() { | ||
| return this._applyModification(spin, arguments); | ||
| }, | ||
| _applyCombination: function (fn, args) { | ||
| return fn.apply(null, [this].concat([].slice.call(args))); | ||
| }, | ||
| analogous: function () { | ||
| return this._applyCombination(analogous, arguments); | ||
| }, | ||
| complement: function () { | ||
| return this._applyCombination(complement, arguments); | ||
| }, | ||
| monochromatic: function () { | ||
| return this._applyCombination(monochromatic, arguments); | ||
| }, | ||
| splitcomplement: function () { | ||
| return this._applyCombination(splitcomplement, arguments); | ||
| }, | ||
| triad: function () { | ||
| return this._applyCombination(triad, arguments); | ||
| }, | ||
| tetrad: function () { | ||
| return this._applyCombination(tetrad, arguments); | ||
| }, | ||
| }; | ||
| _applyCombination: function(fn, args) { | ||
| return fn.apply(null, [this].concat([].slice.call(args))); | ||
| }, | ||
| analogous: function() { | ||
| return this._applyCombination(analogous, arguments); | ||
| }, | ||
| complement: function() { | ||
| return this._applyCombination(complement, arguments); | ||
| }, | ||
| monochromatic: function() { | ||
| return this._applyCombination(monochromatic, arguments); | ||
| }, | ||
| splitcomplement: function() { | ||
| return this._applyCombination(splitcomplement, arguments); | ||
| }, | ||
| triad: function() { | ||
| return this._applyCombination(triad, arguments); | ||
| }, | ||
| tetrad: function() { | ||
| return this._applyCombination(tetrad, arguments); | ||
| // If input is an object, force 1 into "1.0" to handle ratios properly | ||
| // String input requires "1.0" as input, so 1 will be treated as 1 | ||
| tinycolor.fromRatio = function (color, opts) { | ||
| if (typeof color == "object") { | ||
| var newColor = {}; | ||
| for (var i in color) { | ||
| if (color.hasOwnProperty(i)) { | ||
| if (i === "a") { | ||
| newColor[i] = color[i]; | ||
| } else { | ||
| newColor[i] = convertToPercentage(color[i]); | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| color = newColor; | ||
| } | ||
| // If input is an object, force 1 into "1.0" to handle ratios properly | ||
| // String input requires "1.0" as input, so 1 will be treated as 1 | ||
| tinycolor.fromRatio = function(color, opts) { | ||
| if (typeof color == "object") { | ||
| var newColor = {}; | ||
| for (var i in color) { | ||
| if (color.hasOwnProperty(i)) { | ||
| if (i === "a") { | ||
| newColor[i] = color[i]; | ||
| } | ||
| else { | ||
| newColor[i] = convertToPercentage(color[i]); | ||
| } | ||
| } | ||
| } | ||
| color = newColor; | ||
| } | ||
| return tinycolor(color, opts); | ||
| }; | ||
| return tinycolor(color, opts); | ||
| }; | ||
| // Given a string or object, convert that input to RGB | ||
| // Possible string inputs: | ||
| // | ||
| // "red" | ||
| // "#f00" or "f00" | ||
| // "#ff0000" or "ff0000" | ||
| // "#ff000000" or "ff000000" | ||
| // "rgb 255 0 0" or "rgb (255, 0, 0)" | ||
| // "rgb 1.0 0 0" or "rgb (1, 0, 0)" | ||
| // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" | ||
| // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" | ||
| // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" | ||
| // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" | ||
| // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" | ||
| // | ||
| function inputToRGB(color) { | ||
| var rgb = { r: 0, g: 0, b: 0 }; | ||
| var a = 1; | ||
| var s = null; | ||
| var v = null; | ||
| var l = null; | ||
| var ok = false; | ||
| var format = false; | ||
| // Given a string or object, convert that input to RGB | ||
| // Possible string inputs: | ||
| // | ||
| // "red" | ||
| // "#f00" or "f00" | ||
| // "#ff0000" or "ff0000" | ||
| // "#ff000000" or "ff000000" | ||
| // "rgb 255 0 0" or "rgb (255, 0, 0)" | ||
| // "rgb 1.0 0 0" or "rgb (1, 0, 0)" | ||
| // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" | ||
| // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" | ||
| // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" | ||
| // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" | ||
| // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" | ||
| // | ||
| function inputToRGB(color) { | ||
| if (typeof color == "string") { | ||
| color = stringInputToObject(color); | ||
| } | ||
| var rgb = { r: 0, g: 0, b: 0 }; | ||
| var a = 1; | ||
| var s = null; | ||
| var v = null; | ||
| var l = null; | ||
| var ok = false; | ||
| var format = false; | ||
| if (typeof color == "object") { | ||
| if ( | ||
| isValidCSSUnit(color.r) && | ||
| isValidCSSUnit(color.g) && | ||
| isValidCSSUnit(color.b) | ||
| ) { | ||
| rgb = rgbToRgb(color.r, color.g, color.b); | ||
| ok = true; | ||
| format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; | ||
| } else if ( | ||
| isValidCSSUnit(color.h) && | ||
| isValidCSSUnit(color.s) && | ||
| isValidCSSUnit(color.v) | ||
| ) { | ||
| s = convertToPercentage(color.s); | ||
| v = convertToPercentage(color.v); | ||
| rgb = hsvToRgb(color.h, s, v); | ||
| ok = true; | ||
| format = "hsv"; | ||
| } else if ( | ||
| isValidCSSUnit(color.h) && | ||
| isValidCSSUnit(color.s) && | ||
| isValidCSSUnit(color.l) | ||
| ) { | ||
| s = convertToPercentage(color.s); | ||
| l = convertToPercentage(color.l); | ||
| rgb = hslToRgb(color.h, s, l); | ||
| ok = true; | ||
| format = "hsl"; | ||
| } | ||
| if (typeof color == "string") { | ||
| color = stringInputToObject(color); | ||
| } | ||
| if (color.hasOwnProperty("a")) { | ||
| a = color.a; | ||
| } | ||
| } | ||
| if (typeof color == "object") { | ||
| if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { | ||
| rgb = rgbToRgb(color.r, color.g, color.b); | ||
| ok = true; | ||
| format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; | ||
| } | ||
| else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { | ||
| s = convertToPercentage(color.s); | ||
| v = convertToPercentage(color.v); | ||
| rgb = hsvToRgb(color.h, s, v); | ||
| ok = true; | ||
| format = "hsv"; | ||
| } | ||
| else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { | ||
| s = convertToPercentage(color.s); | ||
| l = convertToPercentage(color.l); | ||
| rgb = hslToRgb(color.h, s, l); | ||
| ok = true; | ||
| format = "hsl"; | ||
| } | ||
| a = boundAlpha(a); | ||
| if (color.hasOwnProperty("a")) { | ||
| a = color.a; | ||
| } | ||
| } | ||
| return { | ||
| ok: ok, | ||
| format: color.format || format, | ||
| r: mathMin(255, mathMax(rgb.r, 0)), | ||
| g: mathMin(255, mathMax(rgb.g, 0)), | ||
| b: mathMin(255, mathMax(rgb.b, 0)), | ||
| a: a, | ||
| }; | ||
| } | ||
| a = boundAlpha(a); | ||
| // Conversion Functions | ||
| // -------------------- | ||
| return { | ||
| ok: ok, | ||
| format: color.format || format, | ||
| r: mathMin(255, mathMax(rgb.r, 0)), | ||
| g: mathMin(255, mathMax(rgb.g, 0)), | ||
| b: mathMin(255, mathMax(rgb.b, 0)), | ||
| a: a | ||
| }; | ||
| } | ||
| // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: | ||
| // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript> | ||
| // `rgbToRgb` | ||
| // Handle bounds / percentage checking to conform to CSS color spec | ||
| // <http://www.w3.org/TR/css3-color/> | ||
| // *Assumes:* r, g, b in [0, 255] or [0, 1] | ||
| // *Returns:* { r, g, b } in [0, 255] | ||
| function rgbToRgb(r, g, b) { | ||
| return { | ||
| r: bound01(r, 255) * 255, | ||
| g: bound01(g, 255) * 255, | ||
| b: bound01(b, 255) * 255, | ||
| }; | ||
| } | ||
| // Conversion Functions | ||
| // -------------------- | ||
| // `rgbToHsl` | ||
| // Converts an RGB color value to HSL. | ||
| // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] | ||
| // *Returns:* { h, s, l } in [0,1] | ||
| function rgbToHsl(r, g, b) { | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: | ||
| // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript> | ||
| var max = mathMax(r, g, b), | ||
| min = mathMin(r, g, b); | ||
| var h, | ||
| s, | ||
| l = (max + min) / 2; | ||
| // `rgbToRgb` | ||
| // Handle bounds / percentage checking to conform to CSS color spec | ||
| // <http://www.w3.org/TR/css3-color/> | ||
| // *Assumes:* r, g, b in [0, 255] or [0, 1] | ||
| // *Returns:* { r, g, b } in [0, 255] | ||
| function rgbToRgb(r, g, b){ | ||
| return { | ||
| r: bound01(r, 255) * 255, | ||
| g: bound01(g, 255) * 255, | ||
| b: bound01(b, 255) * 255 | ||
| }; | ||
| if (max == min) { | ||
| h = s = 0; // achromatic | ||
| } else { | ||
| var d = max - min; | ||
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | ||
| switch (max) { | ||
| case r: | ||
| h = (g - b) / d + (g < b ? 6 : 0); | ||
| break; | ||
| case g: | ||
| h = (b - r) / d + 2; | ||
| break; | ||
| case b: | ||
| h = (r - g) / d + 4; | ||
| break; | ||
| } | ||
| h /= 6; | ||
| } | ||
| // `rgbToHsl` | ||
| // Converts an RGB color value to HSL. | ||
| // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] | ||
| // *Returns:* { h, s, l } in [0,1] | ||
| function rgbToHsl(r, g, b) { | ||
| return { h: h, s: s, l: l }; | ||
| } | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| // `hslToRgb` | ||
| // Converts an HSL color value to RGB. | ||
| // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hslToRgb(h, s, l) { | ||
| var r, g, b; | ||
| var max = mathMax(r, g, b), min = mathMin(r, g, b); | ||
| var h, s, l = (max + min) / 2; | ||
| h = bound01(h, 360); | ||
| s = bound01(s, 100); | ||
| l = bound01(l, 100); | ||
| if(max == min) { | ||
| h = s = 0; // achromatic | ||
| } | ||
| else { | ||
| var d = max - min; | ||
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | ||
| switch(max) { | ||
| case r: h = (g - b) / d + (g < b ? 6 : 0); break; | ||
| case g: h = (b - r) / d + 2; break; | ||
| case b: h = (r - g) / d + 4; break; | ||
| } | ||
| function hue2rgb(p, q, t) { | ||
| if (t < 0) t += 1; | ||
| if (t > 1) t -= 1; | ||
| if (t < 1 / 6) return p + (q - p) * 6 * t; | ||
| if (t < 1 / 2) return q; | ||
| if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; | ||
| return p; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, l: l }; | ||
| if (s === 0) { | ||
| r = g = b = l; // achromatic | ||
| } else { | ||
| var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | ||
| var p = 2 * l - q; | ||
| r = hue2rgb(p, q, h + 1 / 3); | ||
| g = hue2rgb(p, q, h); | ||
| b = hue2rgb(p, q, h - 1 / 3); | ||
| } | ||
| // `hslToRgb` | ||
| // Converts an HSL color value to RGB. | ||
| // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hslToRgb(h, s, l) { | ||
| var r, g, b; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| } | ||
| h = bound01(h, 360); | ||
| s = bound01(s, 100); | ||
| l = bound01(l, 100); | ||
| // `rgbToHsv` | ||
| // Converts an RGB color value to HSV | ||
| // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] | ||
| // *Returns:* { h, s, v } in [0,1] | ||
| function rgbToHsv(r, g, b) { | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| function hue2rgb(p, q, t) { | ||
| if(t < 0) t += 1; | ||
| if(t > 1) t -= 1; | ||
| if(t < 1/6) return p + (q - p) * 6 * t; | ||
| if(t < 1/2) return q; | ||
| if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; | ||
| return p; | ||
| } | ||
| var max = mathMax(r, g, b), | ||
| min = mathMin(r, g, b); | ||
| var h, | ||
| s, | ||
| v = max; | ||
| if(s === 0) { | ||
| r = g = b = l; // achromatic | ||
| } | ||
| else { | ||
| var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | ||
| var p = 2 * l - q; | ||
| r = hue2rgb(p, q, h + 1/3); | ||
| g = hue2rgb(p, q, h); | ||
| b = hue2rgb(p, q, h - 1/3); | ||
| } | ||
| var d = max - min; | ||
| s = max === 0 ? 0 : d / max; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| if (max == min) { | ||
| h = 0; // achromatic | ||
| } else { | ||
| switch (max) { | ||
| case r: | ||
| h = (g - b) / d + (g < b ? 6 : 0); | ||
| break; | ||
| case g: | ||
| h = (b - r) / d + 2; | ||
| break; | ||
| case b: | ||
| h = (r - g) / d + 4; | ||
| break; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, v: v }; | ||
| } | ||
| // `rgbToHsv` | ||
| // Converts an RGB color value to HSV | ||
| // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] | ||
| // *Returns:* { h, s, v } in [0,1] | ||
| function rgbToHsv(r, g, b) { | ||
| // `hsvToRgb` | ||
| // Converts an HSV color value to RGB. | ||
| // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hsvToRgb(h, s, v) { | ||
| h = bound01(h, 360) * 6; | ||
| s = bound01(s, 100); | ||
| v = bound01(v, 100); | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| var i = Math.floor(h), | ||
| f = h - i, | ||
| p = v * (1 - s), | ||
| q = v * (1 - f * s), | ||
| t = v * (1 - (1 - f) * s), | ||
| mod = i % 6, | ||
| r = [v, q, p, p, t, v][mod], | ||
| g = [t, v, v, q, p, p][mod], | ||
| b = [p, p, t, v, v, q][mod]; | ||
| var max = mathMax(r, g, b), min = mathMin(r, g, b); | ||
| var h, s, v = max; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| } | ||
| var d = max - min; | ||
| s = max === 0 ? 0 : d / max; | ||
| // `rgbToHex` | ||
| // Converts an RGB color to hex | ||
| // Assumes r, g, and b are contained in the set [0, 255] | ||
| // Returns a 3 or 6 character hex | ||
| function rgbToHex(r, g, b, allow3Char) { | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| ]; | ||
| if(max == min) { | ||
| h = 0; // achromatic | ||
| } | ||
| else { | ||
| switch(max) { | ||
| case r: h = (g - b) / d + (g < b ? 6 : 0); break; | ||
| case g: h = (b - r) / d + 2; break; | ||
| case b: h = (r - g) / d + 4; break; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, v: v }; | ||
| // Return a 3 character hex if possible | ||
| if ( | ||
| allow3Char && | ||
| hex[0].charAt(0) == hex[0].charAt(1) && | ||
| hex[1].charAt(0) == hex[1].charAt(1) && | ||
| hex[2].charAt(0) == hex[2].charAt(1) | ||
| ) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); | ||
| } | ||
| // `hsvToRgb` | ||
| // Converts an HSV color value to RGB. | ||
| // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hsvToRgb(h, s, v) { | ||
| return hex.join(""); | ||
| } | ||
| h = bound01(h, 360) * 6; | ||
| s = bound01(s, 100); | ||
| v = bound01(v, 100); | ||
| // `rgbaToHex` | ||
| // Converts an RGBA color plus alpha transparency to hex | ||
| // Assumes r, g, b are contained in the set [0, 255] and | ||
| // a in [0, 1]. Returns a 4 or 8 character rgba hex | ||
| function rgbaToHex(r, g, b, a, allow4Char) { | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| pad2(convertDecimalToHex(a)), | ||
| ]; | ||
| var i = Math.floor(h), | ||
| f = h - i, | ||
| p = v * (1 - s), | ||
| q = v * (1 - f * s), | ||
| t = v * (1 - (1 - f) * s), | ||
| mod = i % 6, | ||
| r = [v, q, p, p, t, v][mod], | ||
| g = [t, v, v, q, p, p][mod], | ||
| b = [p, p, t, v, v, q][mod]; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| // Return a 4 character hex if possible | ||
| if ( | ||
| allow4Char && | ||
| hex[0].charAt(0) == hex[0].charAt(1) && | ||
| hex[1].charAt(0) == hex[1].charAt(1) && | ||
| hex[2].charAt(0) == hex[2].charAt(1) && | ||
| hex[3].charAt(0) == hex[3].charAt(1) | ||
| ) { | ||
| return ( | ||
| hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0) | ||
| ); | ||
| } | ||
| // `rgbToHex` | ||
| // Converts an RGB color to hex | ||
| // Assumes r, g, and b are contained in the set [0, 255] | ||
| // Returns a 3 or 6 character hex | ||
| function rgbToHex(r, g, b, allow3Char) { | ||
| return hex.join(""); | ||
| } | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)) | ||
| ]; | ||
| // `rgbaToArgbHex` | ||
| // Converts an RGBA color to an ARGB Hex8 string | ||
| // Rarely used, but required for "toFilter()" | ||
| function rgbaToArgbHex(r, g, b, a) { | ||
| var hex = [ | ||
| pad2(convertDecimalToHex(a)), | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| ]; | ||
| // Return a 3 character hex if possible | ||
| if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); | ||
| } | ||
| return hex.join(""); | ||
| } | ||
| return hex.join(""); | ||
| } | ||
| // `equals` | ||
| // Can be called with any tinycolor input | ||
| tinycolor.equals = function (color1, color2) { | ||
| if (!color1 || !color2) return false; | ||
| return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); | ||
| }; | ||
| // `rgbaToHex` | ||
| // Converts an RGBA color plus alpha transparency to hex | ||
| // Assumes r, g, b are contained in the set [0, 255] and | ||
| // a in [0, 1]. Returns a 4 or 8 character rgba hex | ||
| function rgbaToHex(r, g, b, a, allow4Char) { | ||
| tinycolor.random = function () { | ||
| return tinycolor.fromRatio({ | ||
| r: mathRandom(), | ||
| g: mathRandom(), | ||
| b: mathRandom(), | ||
| }); | ||
| }; | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| pad2(convertDecimalToHex(a)) | ||
| ]; | ||
| // Modification Functions | ||
| // ---------------------- | ||
| // Thanks to less.js for some of the basics here | ||
| // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js> | ||
| // Return a 4 character hex if possible | ||
| if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); | ||
| } | ||
| function desaturate(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s -= amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| return hex.join(""); | ||
| } | ||
| function saturate(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s += amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| // `rgbaToArgbHex` | ||
| // Converts an RGBA color to an ARGB Hex8 string | ||
| // Rarely used, but required for "toFilter()" | ||
| function rgbaToArgbHex(r, g, b, a) { | ||
| function greyscale(color) { | ||
| return tinycolor(color).desaturate(100); | ||
| } | ||
| var hex = [ | ||
| pad2(convertDecimalToHex(a)), | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)) | ||
| ]; | ||
| function lighten(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l += amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| } | ||
| return hex.join(""); | ||
| } | ||
| function brighten(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var rgb = tinycolor(color).toRgb(); | ||
| rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * -(amount / 100)))); | ||
| rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * -(amount / 100)))); | ||
| rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * -(amount / 100)))); | ||
| return tinycolor(rgb); | ||
| } | ||
| // `equals` | ||
| // Can be called with any tinycolor input | ||
| tinycolor.equals = function (color1, color2) { | ||
| if (!color1 || !color2) { return false; } | ||
| return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); | ||
| }; | ||
| function darken(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l -= amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| } | ||
| tinycolor.random = function() { | ||
| return tinycolor.fromRatio({ | ||
| r: mathRandom(), | ||
| g: mathRandom(), | ||
| b: mathRandom() | ||
| }); | ||
| }; | ||
| // 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. | ||
| function spin(color, amount) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var hue = (hsl.h + amount) % 360; | ||
| hsl.h = hue < 0 ? 360 + hue : hue; | ||
| return tinycolor(hsl); | ||
| } | ||
| // Combination Functions | ||
| // --------------------- | ||
| // Thanks to jQuery xColor for some of the ideas behind these | ||
| // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js> | ||
| // Modification Functions | ||
| // ---------------------- | ||
| // Thanks to less.js for some of the basics here | ||
| // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js> | ||
| function complement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.h = (hsl.h + 180) % 360; | ||
| return tinycolor(hsl); | ||
| } | ||
| function desaturate(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s -= amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| function triad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function saturate(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s += amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| function tetrad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function greyscale(color) { | ||
| return tinycolor(color).desaturate(100); | ||
| } | ||
| function splitcomplement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function lighten (color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l += amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| } | ||
| function analogous(color, results, slices) { | ||
| results = results || 6; | ||
| slices = slices || 30; | ||
| function brighten(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var rgb = tinycolor(color).toRgb(); | ||
| rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); | ||
| rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); | ||
| rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); | ||
| return tinycolor(rgb); | ||
| } | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var part = 360 / slices; | ||
| var ret = [tinycolor(color)]; | ||
| function darken (color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l -= amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results; ) { | ||
| hsl.h = (hsl.h + part) % 360; | ||
| ret.push(tinycolor(hsl)); | ||
| } | ||
| return ret; | ||
| } | ||
| // 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. | ||
| function spin(color, amount) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var hue = (hsl.h + amount) % 360; | ||
| hsl.h = hue < 0 ? 360 + hue : hue; | ||
| return tinycolor(hsl); | ||
| function monochromatic(color, results) { | ||
| results = results || 6; | ||
| var hsv = tinycolor(color).toHsv(); | ||
| var h = hsv.h, | ||
| s = hsv.s, | ||
| v = hsv.v; | ||
| var ret = []; | ||
| var modification = 1 / results; | ||
| while (results--) { | ||
| ret.push(tinycolor({ h: h, s: s, v: v })); | ||
| v = (v + modification) % 1; | ||
| } | ||
| // Combination Functions | ||
| // --------------------- | ||
| // Thanks to jQuery xColor for some of the ideas behind these | ||
| // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js> | ||
| return ret; | ||
| } | ||
| function complement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.h = (hsl.h + 180) % 360; | ||
| return tinycolor(hsl); | ||
| } | ||
| // Utility Functions | ||
| // --------------------- | ||
| function triad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) | ||
| ]; | ||
| } | ||
| tinycolor.mix = function (color1, color2, amount) { | ||
| amount = amount === 0 ? 0 : amount || 50; | ||
| function tetrad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) | ||
| ]; | ||
| } | ||
| var rgb1 = tinycolor(color1).toRgb(); | ||
| var rgb2 = tinycolor(color2).toRgb(); | ||
| function splitcomplement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), | ||
| tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) | ||
| ]; | ||
| } | ||
| var p = amount / 100; | ||
| function analogous(color, results, slices) { | ||
| results = results || 6; | ||
| slices = slices || 30; | ||
| 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, | ||
| }; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var part = 360 / slices; | ||
| var ret = [tinycolor(color)]; | ||
| return tinycolor(rgba); | ||
| }; | ||
| for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { | ||
| hsl.h = (hsl.h + part) % 360; | ||
| ret.push(tinycolor(hsl)); | ||
| } | ||
| return ret; | ||
| } | ||
| // Readability Functions | ||
| // --------------------- | ||
| // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2) | ||
| function monochromatic(color, results) { | ||
| results = results || 6; | ||
| var hsv = tinycolor(color).toHsv(); | ||
| var h = hsv.h, s = hsv.s, v = hsv.v; | ||
| var ret = []; | ||
| var modification = 1 / results; | ||
| // `contrast` | ||
| // Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2) | ||
| tinycolor.readability = function (color1, color2) { | ||
| var c1 = tinycolor(color1); | ||
| var c2 = tinycolor(color2); | ||
| return ( | ||
| (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / | ||
| (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05) | ||
| ); | ||
| }; | ||
| while (results--) { | ||
| ret.push(tinycolor({ h: h, s: s, v: v})); | ||
| v = (v + modification) % 1; | ||
| } | ||
| // `isReadable` | ||
| // Ensure that foreground and background color combinations meet WCAG2 guidelines. | ||
| // The third argument is an optional Object. | ||
| // the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA'; | ||
| // the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'. | ||
| // If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}. | ||
| return ret; | ||
| } | ||
| // *Example* | ||
| // tinycolor.isReadable("#000", "#111") => false | ||
| // tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false | ||
| tinycolor.isReadable = function (color1, color2, wcag2) { | ||
| var readability = tinycolor.readability(color1, color2); | ||
| var wcag2Parms, out; | ||
| // Utility Functions | ||
| // --------------------- | ||
| out = false; | ||
| tinycolor.mix = function(color1, color2, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 50); | ||
| wcag2Parms = validateWCAG2Parms(wcag2); | ||
| switch (wcag2Parms.level + wcag2Parms.size) { | ||
| case "AAsmall": | ||
| case "AAAlarge": | ||
| out = readability >= 4.5; | ||
| break; | ||
| case "AAlarge": | ||
| out = readability >= 3; | ||
| break; | ||
| case "AAAsmall": | ||
| out = readability >= 7; | ||
| break; | ||
| } | ||
| return out; | ||
| }; | ||
| var rgb1 = tinycolor(color1).toRgb(); | ||
| var rgb2 = tinycolor(color2).toRgb(); | ||
| // `mostReadable` | ||
| // 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. | ||
| // *Example* | ||
| // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" | ||
| // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" | ||
| tinycolor.mostReadable = function (baseColor, colorList, args) { | ||
| var bestColor = null; | ||
| var bestScore = 0; | ||
| var readability; | ||
| var includeFallbackColors, level, size; | ||
| args = args || {}; | ||
| includeFallbackColors = args.includeFallbackColors; | ||
| level = args.level; | ||
| size = args.size; | ||
| var p = amount / 100; | ||
| for (var i = 0; i < colorList.length; i++) { | ||
| readability = tinycolor.readability(baseColor, colorList[i]); | ||
| if (readability > bestScore) { | ||
| bestScore = readability; | ||
| bestColor = tinycolor(colorList[i]); | ||
| } | ||
| } | ||
| 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 | ||
| }; | ||
| if ( | ||
| tinycolor.isReadable(baseColor, bestColor, { | ||
| level: level, | ||
| size: size, | ||
| }) || | ||
| !includeFallbackColors | ||
| ) { | ||
| return bestColor; | ||
| } else { | ||
| args.includeFallbackColors = false; | ||
| return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args); | ||
| } | ||
| }; | ||
| return tinycolor(rgba); | ||
| }; | ||
| // Big List of Colors | ||
| // ------------------ | ||
| // <http://www.w3.org/TR/css3-color/#svg-color> | ||
| var names = (tinycolor.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", | ||
| }); | ||
| // Make it easy to access colors via `hexNames[hex]` | ||
| var hexNames = (tinycolor.hexNames = flip(names)); | ||
| // Readability Functions | ||
| // --------------------- | ||
| // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2) | ||
| // Utilities | ||
| // --------- | ||
| // `contrast` | ||
| // Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2) | ||
| tinycolor.readability = function(color1, color2) { | ||
| var c1 = tinycolor(color1); | ||
| var c2 = tinycolor(color2); | ||
| return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05); | ||
| }; | ||
| // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` | ||
| function flip(o) { | ||
| var flipped = {}; | ||
| for (var i in o) { | ||
| if (o.hasOwnProperty(i)) { | ||
| flipped[o[i]] = i; | ||
| } | ||
| } | ||
| return flipped; | ||
| } | ||
| // `isReadable` | ||
| // Ensure that foreground and background color combinations meet WCAG2 guidelines. | ||
| // The third argument is an optional Object. | ||
| // the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA'; | ||
| // the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'. | ||
| // If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}. | ||
| // Return a valid alpha value [0,1] with all invalid values being set to 1 | ||
| function boundAlpha(a) { | ||
| a = parseFloat(a); | ||
| // *Example* | ||
| // tinycolor.isReadable("#000", "#111") => false | ||
| // tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false | ||
| tinycolor.isReadable = function(color1, color2, wcag2) { | ||
| var readability = tinycolor.readability(color1, color2); | ||
| var wcag2Parms, out; | ||
| if (isNaN(a) || a < 0 || a > 1) { | ||
| a = 1; | ||
| } | ||
| out = false; | ||
| return a; | ||
| } | ||
| wcag2Parms = validateWCAG2Parms(wcag2); | ||
| switch (wcag2Parms.level + wcag2Parms.size) { | ||
| case "AAsmall": | ||
| case "AAAlarge": | ||
| out = readability >= 4.5; | ||
| break; | ||
| case "AAlarge": | ||
| out = readability >= 3; | ||
| break; | ||
| case "AAAsmall": | ||
| out = readability >= 7; | ||
| break; | ||
| } | ||
| return out; | ||
| // Take input from [0, n] and return it as [0, 1] | ||
| function bound01(n, max) { | ||
| if (isOnePointZero(n)) n = "100%"; | ||
| }; | ||
| var processPercent = isPercentage(n); | ||
| n = mathMin(max, mathMax(0, parseFloat(n))); | ||
| // `mostReadable` | ||
| // 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. | ||
| // *Example* | ||
| // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" | ||
| // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" | ||
| tinycolor.mostReadable = function(baseColor, colorList, args) { | ||
| var bestColor = null; | ||
| var bestScore = 0; | ||
| var readability; | ||
| var includeFallbackColors, level, size ; | ||
| args = args || {}; | ||
| includeFallbackColors = args.includeFallbackColors ; | ||
| level = args.level; | ||
| size = args.size; | ||
| // Automatically convert percentage into number | ||
| if (processPercent) { | ||
| n = parseInt(n * max, 10) / 100; | ||
| } | ||
| for (var i= 0; i < colorList.length ; i++) { | ||
| readability = tinycolor.readability(baseColor, colorList[i]); | ||
| if (readability > bestScore) { | ||
| bestScore = readability; | ||
| bestColor = tinycolor(colorList[i]); | ||
| } | ||
| } | ||
| // Handle floating point rounding errors | ||
| if (Math.abs(n - max) < 0.000001) { | ||
| return 1; | ||
| } | ||
| if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { | ||
| return bestColor; | ||
| } | ||
| else { | ||
| args.includeFallbackColors=false; | ||
| return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); | ||
| } | ||
| }; | ||
| // Convert into [0, 1] range if it isn't already | ||
| return (n % max) / parseFloat(max); | ||
| } | ||
| // Force a number between 0 and 1 | ||
| function clamp01(val) { | ||
| return mathMin(1, mathMax(0, val)); | ||
| } | ||
| // Big List of Colors | ||
| // ------------------ | ||
| // <http://www.w3.org/TR/css3-color/#svg-color> | ||
| var names = tinycolor.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" | ||
| }; | ||
| // Parse a base-16 hex value into a base-10 integer | ||
| function parseIntFromHex(val) { | ||
| return parseInt(val, 16); | ||
| } | ||
| // Make it easy to access colors via `hexNames[hex]` | ||
| var hexNames = tinycolor.hexNames = flip(names); | ||
| // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 | ||
| // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0> | ||
| function isOnePointZero(n) { | ||
| return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1; | ||
| } | ||
| // Check to see if string passed in is a percentage | ||
| function isPercentage(n) { | ||
| return typeof n === "string" && n.indexOf("%") != -1; | ||
| } | ||
| // Utilities | ||
| // --------- | ||
| // Force a hex value to have 2 characters | ||
| function pad2(c) { | ||
| return c.length == 1 ? "0" + c : "" + c; | ||
| } | ||
| // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` | ||
| function flip(o) { | ||
| var flipped = { }; | ||
| for (var i in o) { | ||
| if (o.hasOwnProperty(i)) { | ||
| flipped[o[i]] = i; | ||
| } | ||
| } | ||
| return flipped; | ||
| // Replace a decimal with it's percentage value | ||
| function convertToPercentage(n) { | ||
| if (n <= 1) { | ||
| n = n * 100 + "%"; | ||
| } | ||
| // Return a valid alpha value [0,1] with all invalid values being set to 1 | ||
| function boundAlpha(a) { | ||
| a = parseFloat(a); | ||
| return n; | ||
| } | ||
| if (isNaN(a) || a < 0 || a > 1) { | ||
| a = 1; | ||
| } | ||
| // Converts a decimal to a hex value | ||
| function convertDecimalToHex(d) { | ||
| return Math.round(parseFloat(d) * 255).toString(16); | ||
| } | ||
| // Converts a hex value to a decimal | ||
| function convertHexToDecimal(h) { | ||
| return parseIntFromHex(h) / 255; | ||
| } | ||
| return a; | ||
| } | ||
| var matchers = (function () { | ||
| // <http://www.w3.org/TR/css3-values/#integers> | ||
| var CSS_INTEGER = "[-\\+]?\\d+%?"; | ||
| // Take input from [0, n] and return it as [0, 1] | ||
| function bound01(n, max) { | ||
| if (isOnePointZero(n)) { n = "100%"; } | ||
| // <http://www.w3.org/TR/css3-values/#number-value> | ||
| var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; | ||
| var processPercent = isPercentage(n); | ||
| n = mathMin(max, mathMax(0, parseFloat(n))); | ||
| // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. | ||
| var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; | ||
| // Automatically convert percentage into number | ||
| if (processPercent) { | ||
| n = parseInt(n * max, 10) / 100; | ||
| } | ||
| // Actual matching. | ||
| // Parentheses and commas are optional, but not required. | ||
| // Whitespace can take the place of commas or opening paren | ||
| var PERMISSIVE_MATCH3 = | ||
| "[\\s|\\(]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")\\s*\\)?"; | ||
| var PERMISSIVE_MATCH4 = | ||
| "[\\s|\\(]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")\\s*\\)?"; | ||
| // Handle floating point rounding errors | ||
| if ((Math.abs(n - max) < 0.000001)) { | ||
| return 1; | ||
| } | ||
| return { | ||
| CSS_UNIT: new RegExp(CSS_UNIT), | ||
| rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), | ||
| rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), | ||
| hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), | ||
| hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), | ||
| hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), | ||
| hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), | ||
| hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| }; | ||
| })(); | ||
| // Convert into [0, 1] range if it isn't already | ||
| return (n % max) / parseFloat(max); | ||
| } | ||
| // `isValidCSSUnit` | ||
| // Take in a single string / number and check to see if it looks like a CSS unit | ||
| // (see `matchers` above for definition). | ||
| function isValidCSSUnit(color) { | ||
| return !!matchers.CSS_UNIT.exec(color); | ||
| } | ||
| // Force a number between 0 and 1 | ||
| function clamp01(val) { | ||
| return mathMin(1, mathMax(0, val)); | ||
| // `stringInputToObject` | ||
| // Permissive string parsing. Take in a number of formats, and output an object | ||
| // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` | ||
| function stringInputToObject(color) { | ||
| color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase(); | ||
| var named = false; | ||
| if (names[color]) { | ||
| color = names[color]; | ||
| named = true; | ||
| } else if (color == "transparent") { | ||
| return { r: 0, g: 0, b: 0, a: 0, format: "name" }; | ||
| } | ||
| // Parse a base-16 hex value into a base-10 integer | ||
| function parseIntFromHex(val) { | ||
| return parseInt(val, 16); | ||
| // Try to match string input using regular expressions. | ||
| // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] | ||
| // Just return an object and let the conversion functions handle that. | ||
| // This way the result will be the same whether the tinycolor is initialized with string or object. | ||
| var match; | ||
| if ((match = matchers.rgb.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3] }; | ||
| } | ||
| // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 | ||
| // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0> | ||
| function isOnePointZero(n) { | ||
| return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; | ||
| if ((match = matchers.rgba.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3], a: match[4] }; | ||
| } | ||
| // Check to see if string passed in is a percentage | ||
| function isPercentage(n) { | ||
| return typeof n === "string" && n.indexOf('%') != -1; | ||
| if ((match = matchers.hsl.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3] }; | ||
| } | ||
| // Force a hex value to have 2 characters | ||
| function pad2(c) { | ||
| return c.length == 1 ? '0' + c : '' + c; | ||
| if ((match = matchers.hsla.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3], a: match[4] }; | ||
| } | ||
| // Replace a decimal with it's percentage value | ||
| function convertToPercentage(n) { | ||
| if (n <= 1) { | ||
| n = (n * 100) + "%"; | ||
| } | ||
| return n; | ||
| if ((match = matchers.hsv.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3] }; | ||
| } | ||
| // Converts a decimal to a hex value | ||
| function convertDecimalToHex(d) { | ||
| return Math.round(parseFloat(d) * 255).toString(16); | ||
| if ((match = matchers.hsva.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3], a: match[4] }; | ||
| } | ||
| // Converts a hex value to a decimal | ||
| function convertHexToDecimal(h) { | ||
| return (parseIntFromHex(h) / 255); | ||
| if ((match = matchers.hex8.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| a: convertHexToDecimal(match[4]), | ||
| format: named ? "name" : "hex8", | ||
| }; | ||
| } | ||
| var matchers = (function() { | ||
| // <http://www.w3.org/TR/css3-values/#integers> | ||
| var CSS_INTEGER = "[-\\+]?\\d+%?"; | ||
| // <http://www.w3.org/TR/css3-values/#number-value> | ||
| var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; | ||
| // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. | ||
| var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; | ||
| // Actual matching. | ||
| // Parentheses and commas are optional, but not required. | ||
| // Whitespace can take the place of commas or opening paren | ||
| var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; | ||
| var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; | ||
| return { | ||
| CSS_UNIT: new RegExp(CSS_UNIT), | ||
| rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), | ||
| rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), | ||
| hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), | ||
| hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), | ||
| hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), | ||
| hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), | ||
| hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ | ||
| }; | ||
| })(); | ||
| // `isValidCSSUnit` | ||
| // Take in a single string / number and check to see if it looks like a CSS unit | ||
| // (see `matchers` above for definition). | ||
| function isValidCSSUnit(color) { | ||
| return !!matchers.CSS_UNIT.exec(color); | ||
| if ((match = matchers.hex6.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| format: named ? "name" : "hex", | ||
| }; | ||
| } | ||
| if ((match = matchers.hex4.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + "" + match[1]), | ||
| g: parseIntFromHex(match[2] + "" + match[2]), | ||
| b: parseIntFromHex(match[3] + "" + match[3]), | ||
| a: convertHexToDecimal(match[4] + "" + match[4]), | ||
| format: named ? "name" : "hex8", | ||
| }; | ||
| } | ||
| if ((match = matchers.hex3.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + "" + match[1]), | ||
| g: parseIntFromHex(match[2] + "" + match[2]), | ||
| b: parseIntFromHex(match[3] + "" + match[3]), | ||
| format: named ? "name" : "hex", | ||
| }; | ||
| } | ||
| // `stringInputToObject` | ||
| // Permissive string parsing. Take in a number of formats, and output an object | ||
| // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` | ||
| function stringInputToObject(color) { | ||
| return false; | ||
| } | ||
| color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase(); | ||
| var named = false; | ||
| if (names[color]) { | ||
| color = names[color]; | ||
| named = true; | ||
| } | ||
| else if (color == 'transparent') { | ||
| return { r: 0, g: 0, b: 0, a: 0, format: "name" }; | ||
| } | ||
| // Try to match string input using regular expressions. | ||
| // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] | ||
| // Just return an object and let the conversion functions handle that. | ||
| // This way the result will be the same whether the tinycolor is initialized with string or object. | ||
| var match; | ||
| if ((match = matchers.rgb.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3] }; | ||
| } | ||
| if ((match = matchers.rgba.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hsl.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3] }; | ||
| } | ||
| if ((match = matchers.hsla.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hsv.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3] }; | ||
| } | ||
| if ((match = matchers.hsva.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hex8.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| a: convertHexToDecimal(match[4]), | ||
| format: named ? "name" : "hex8" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex6.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| format: named ? "name" : "hex" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex4.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + '' + match[1]), | ||
| g: parseIntFromHex(match[2] + '' + match[2]), | ||
| b: parseIntFromHex(match[3] + '' + match[3]), | ||
| a: convertHexToDecimal(match[4] + '' + match[4]), | ||
| format: named ? "name" : "hex8" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex3.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + '' + match[1]), | ||
| g: parseIntFromHex(match[2] + '' + match[2]), | ||
| b: parseIntFromHex(match[3] + '' + match[3]), | ||
| format: named ? "name" : "hex" | ||
| }; | ||
| } | ||
| return false; | ||
| function validateWCAG2Parms(parms) { | ||
| // return valid WCAG2 parms for isReadable. | ||
| // If input parms are invalid, return {"level":"AA", "size":"small"} | ||
| var level, size; | ||
| parms = parms || { level: "AA", size: "small" }; | ||
| level = (parms.level || "AA").toUpperCase(); | ||
| size = (parms.size || "small").toLowerCase(); | ||
| if (level !== "AA" && level !== "AAA") { | ||
| level = "AA"; | ||
| } | ||
| function validateWCAG2Parms(parms) { | ||
| // return valid WCAG2 parms for isReadable. | ||
| // If input parms are invalid, return {"level":"AA", "size":"small"} | ||
| var level, size; | ||
| parms = parms || {"level":"AA", "size":"small"}; | ||
| level = (parms.level || "AA").toUpperCase(); | ||
| size = (parms.size || "small").toLowerCase(); | ||
| if (level !== "AA" && level !== "AAA") { | ||
| level = "AA"; | ||
| } | ||
| if (size !== "small" && size !== "large") { | ||
| size = "small"; | ||
| } | ||
| return {"level":level, "size":size}; | ||
| if (size !== "small" && size !== "large") { | ||
| size = "small"; | ||
| } | ||
| return { level: level, size: size }; | ||
| } | ||
| return tinycolor; | ||
| return tinycolor; | ||
| })); |
1810
mod.js
@@ -0,1 +1,2 @@ | ||
| // TinyColor v1.4.2 | ||
| // https://github.com/bgrins/TinyColor | ||
@@ -5,259 +6,319 @@ // Brian Grinstead, MIT License | ||
| var trimLeft = /^\s+/, | ||
| trimRight = /\s+$/, | ||
| mathRound = Math.round, | ||
| mathMin = Math.min, | ||
| mathMax = Math.max, | ||
| mathRandom = Math.random; | ||
| trimRight = /\s+$/, | ||
| mathRound = Math.round, | ||
| mathMin = Math.min, | ||
| mathMax = Math.max, | ||
| mathRandom = Math.random; | ||
| export default function tinycolor (color, opts) { | ||
| export default function tinycolor(color, opts) { | ||
| color = color ? color : ""; | ||
| opts = opts || {}; | ||
| color = (color) ? color : ''; | ||
| opts = opts || { }; | ||
| // If input is already a tinycolor, return itself | ||
| if (color instanceof tinycolor) { | ||
| return color; | ||
| } | ||
| // If we are called as a function, call using new instead | ||
| if (!(this instanceof tinycolor)) { | ||
| return new tinycolor(color, opts); | ||
| } | ||
| // If input is already a tinycolor, return itself | ||
| if (color instanceof tinycolor) { | ||
| return color; | ||
| } | ||
| // If we are called as a function, call using new instead | ||
| if (!(this instanceof tinycolor)) { | ||
| return new tinycolor(color, opts); | ||
| } | ||
| 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 = mathRound(100 * this._a) / 100), | ||
| (this._format = opts.format || rgb.format); | ||
| this._gradientType = opts.gradientType; | ||
| 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 = mathRound(100*this._a) / 100, | ||
| this._format = opts.format || 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 = mathRound(this._r); | ||
| if (this._g < 1) this._g = mathRound(this._g); | ||
| if (this._b < 1) this._b = mathRound(this._b); | ||
| // 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 = mathRound(this._r); } | ||
| if (this._g < 1) { this._g = mathRound(this._g); } | ||
| if (this._b < 1) { this._b = mathRound(this._b); } | ||
| this._ok = rgb.ok; | ||
| this._ok = rgb.ok; | ||
| } | ||
| tinycolor.prototype = { | ||
| isDark: function() { | ||
| return this.getBrightness() < 128; | ||
| }, | ||
| isLight: function() { | ||
| return !this.isDark(); | ||
| }, | ||
| isValid: function() { | ||
| return this._ok; | ||
| }, | ||
| getOriginalInput: function() { | ||
| return this._originalInput; | ||
| }, | ||
| getFormat: function() { | ||
| return this._format; | ||
| }, | ||
| getAlpha: function() { | ||
| return this._a; | ||
| }, | ||
| 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; | ||
| }, | ||
| getLuminance: function() { | ||
| //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef | ||
| var rgb = this.toRgb(); | ||
| var RsRGB, GsRGB, BsRGB, R, G, B; | ||
| RsRGB = rgb.r/255; | ||
| GsRGB = rgb.g/255; | ||
| BsRGB = rgb.b/255; | ||
| isDark: function () { | ||
| return this.getBrightness() < 128; | ||
| }, | ||
| isLight: function () { | ||
| return !this.isDark(); | ||
| }, | ||
| isValid: function () { | ||
| return this._ok; | ||
| }, | ||
| getOriginalInput: function () { | ||
| return this._originalInput; | ||
| }, | ||
| getFormat: function () { | ||
| return this._format; | ||
| }, | ||
| getAlpha: function () { | ||
| return this._a; | ||
| }, | ||
| 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; | ||
| }, | ||
| getLuminance: function () { | ||
| //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef | ||
| var rgb = this.toRgb(); | ||
| var RsRGB, GsRGB, BsRGB, R, G, B; | ||
| RsRGB = rgb.r / 255; | ||
| GsRGB = rgb.g / 255; | ||
| BsRGB = rgb.b / 255; | ||
| if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} | ||
| if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} | ||
| if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} | ||
| return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); | ||
| }, | ||
| setAlpha: function(value) { | ||
| this._a = boundAlpha(value); | ||
| this._roundA = mathRound(100*this._a) / 100; | ||
| return this; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHsvString: function() { | ||
| var hsv = rgbToHsv(this._r, this._g, this._b); | ||
| var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); | ||
| return (this._a == 1) ? | ||
| "hsv(" + h + ", " + s + "%, " + v + "%)" : | ||
| "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHslString: function() { | ||
| var hsl = rgbToHsl(this._r, this._g, this._b); | ||
| var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); | ||
| return (this._a == 1) ? | ||
| "hsl(" + h + ", " + s + "%, " + l + "%)" : | ||
| "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; | ||
| }, | ||
| toHex: function(allow3Char) { | ||
| return rgbToHex(this._r, this._g, this._b, allow3Char); | ||
| }, | ||
| toHexString: function(allow3Char) { | ||
| return '#' + this.toHex(allow3Char); | ||
| }, | ||
| toHex8: function(allow4Char) { | ||
| return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); | ||
| }, | ||
| toHex8String: function(allow4Char) { | ||
| return '#' + this.toHex8(allow4Char); | ||
| }, | ||
| toRgb: function() { | ||
| return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; | ||
| }, | ||
| toRgbString: function() { | ||
| return (this._a == 1) ? | ||
| "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : | ||
| "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; | ||
| }, | ||
| toPercentageRgb: function() { | ||
| return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; | ||
| }, | ||
| toPercentageRgbString: function() { | ||
| return (this._a == 1) ? | ||
| "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : | ||
| "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; | ||
| }, | ||
| toName: function() { | ||
| if (this._a === 0) { | ||
| return "transparent"; | ||
| } | ||
| if (RsRGB <= 0.03928) R = RsRGB / 12.92; | ||
| else R = Math.pow((RsRGB + 0.055) / 1.055, 2.4); | ||
| if (GsRGB <= 0.03928) G = GsRGB / 12.92; | ||
| else G = Math.pow((GsRGB + 0.055) / 1.055, 2.4); | ||
| if (BsRGB <= 0.03928) B = BsRGB / 12.92; | ||
| else B = Math.pow((BsRGB + 0.055) / 1.055, 2.4); | ||
| return 0.2126 * R + 0.7152 * G + 0.0722 * B; | ||
| }, | ||
| setAlpha: function (value) { | ||
| this._a = boundAlpha(value); | ||
| this._roundA = mathRound(100 * this._a) / 100; | ||
| return this; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHsvString: function () { | ||
| var hsv = rgbToHsv(this._r, this._g, this._b); | ||
| var h = mathRound(hsv.h * 360), | ||
| s = mathRound(hsv.s * 100), | ||
| v = mathRound(hsv.v * 100); | ||
| return this._a == 1 | ||
| ? "hsv(" + h + ", " + s + "%, " + v + "%)" | ||
| : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")"; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHslString: function () { | ||
| var hsl = rgbToHsl(this._r, this._g, this._b); | ||
| var h = mathRound(hsl.h * 360), | ||
| s = mathRound(hsl.s * 100), | ||
| l = mathRound(hsl.l * 100); | ||
| return this._a == 1 | ||
| ? "hsl(" + h + ", " + s + "%, " + l + "%)" | ||
| : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")"; | ||
| }, | ||
| toHex: function (allow3Char) { | ||
| return rgbToHex(this._r, this._g, this._b, allow3Char); | ||
| }, | ||
| toHexString: function (allow3Char) { | ||
| return "#" + this.toHex(allow3Char); | ||
| }, | ||
| toHex8: function (allow4Char) { | ||
| return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); | ||
| }, | ||
| toHex8String: function (allow4Char) { | ||
| return "#" + this.toHex8(allow4Char); | ||
| }, | ||
| toRgb: function () { | ||
| return { | ||
| r: mathRound(this._r), | ||
| g: mathRound(this._g), | ||
| b: mathRound(this._b), | ||
| a: this._a, | ||
| }; | ||
| }, | ||
| toRgbString: function () { | ||
| return this._a == 1 | ||
| ? "rgb(" + | ||
| mathRound(this._r) + | ||
| ", " + | ||
| mathRound(this._g) + | ||
| ", " + | ||
| mathRound(this._b) + | ||
| ")" | ||
| : "rgba(" + | ||
| mathRound(this._r) + | ||
| ", " + | ||
| mathRound(this._g) + | ||
| ", " + | ||
| mathRound(this._b) + | ||
| ", " + | ||
| this._roundA + | ||
| ")"; | ||
| }, | ||
| toPercentageRgb: function () { | ||
| return { | ||
| r: mathRound(bound01(this._r, 255) * 100) + "%", | ||
| g: mathRound(bound01(this._g, 255) * 100) + "%", | ||
| b: mathRound(bound01(this._b, 255) * 100) + "%", | ||
| a: this._a, | ||
| }; | ||
| }, | ||
| toPercentageRgbString: function () { | ||
| return this._a == 1 | ||
| ? "rgb(" + | ||
| mathRound(bound01(this._r, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._g, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._b, 255) * 100) + | ||
| "%)" | ||
| : "rgba(" + | ||
| mathRound(bound01(this._r, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._g, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._b, 255) * 100) + | ||
| "%, " + | ||
| this._roundA + | ||
| ")"; | ||
| }, | ||
| toName: function () { | ||
| if (this._a === 0) { | ||
| return "transparent"; | ||
| } | ||
| if (this._a < 1) { | ||
| return false; | ||
| } | ||
| if (this._a < 1) { | ||
| return false; | ||
| } | ||
| return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; | ||
| }, | ||
| toFilter: function(secondColor) { | ||
| var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); | ||
| var secondHex8String = hex8String; | ||
| var gradientType = this._gradientType ? "GradientType = 1, " : ""; | ||
| return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; | ||
| }, | ||
| toFilter: function (secondColor) { | ||
| var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a); | ||
| var secondHex8String = hex8String; | ||
| var gradientType = this._gradientType ? "GradientType = 1, " : ""; | ||
| if (secondColor) { | ||
| var s = tinycolor(secondColor); | ||
| secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); | ||
| } | ||
| if (secondColor) { | ||
| var s = tinycolor(secondColor); | ||
| secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a); | ||
| } | ||
| return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; | ||
| }, | ||
| toString: function(format) { | ||
| var formatSet = !!format; | ||
| format = format || this._format; | ||
| return ( | ||
| "progid:DXImageTransform.Microsoft.gradient(" + | ||
| gradientType + | ||
| "startColorstr=" + | ||
| hex8String + | ||
| ",endColorstr=" + | ||
| secondHex8String + | ||
| ")" | ||
| ); | ||
| }, | ||
| toString: function (format) { | ||
| var formatSet = !!format; | ||
| format = format || this._format; | ||
| var formattedString = false; | ||
| var hasAlpha = this._a < 1 && this._a >= 0; | ||
| var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); | ||
| var formattedString = false; | ||
| var hasAlpha = this._a < 1 && this._a >= 0; | ||
| var needsAlphaFormat = | ||
| !formatSet && | ||
| hasAlpha && | ||
| (format === "hex" || | ||
| format === "hex6" || | ||
| format === "hex3" || | ||
| format === "hex4" || | ||
| format === "hex8" || | ||
| 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(); | ||
| } | ||
| 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(); | ||
| }, | ||
| clone: function() { | ||
| return tinycolor(this.toString()); | ||
| }, | ||
| return formattedString || this.toHexString(); | ||
| }, | ||
| clone: function () { | ||
| return tinycolor(this.toString()); | ||
| }, | ||
| _applyModification: function(fn, args) { | ||
| var color = fn.apply(null, [this].concat([].slice.call(args))); | ||
| this._r = color._r; | ||
| this._g = color._g; | ||
| this._b = color._b; | ||
| this.setAlpha(color._a); | ||
| return this; | ||
| }, | ||
| lighten: function() { | ||
| return this._applyModification(lighten, arguments); | ||
| }, | ||
| brighten: function() { | ||
| return this._applyModification(brighten, arguments); | ||
| }, | ||
| darken: function() { | ||
| return this._applyModification(darken, arguments); | ||
| }, | ||
| desaturate: function() { | ||
| return this._applyModification(desaturate, arguments); | ||
| }, | ||
| saturate: function() { | ||
| return this._applyModification(saturate, arguments); | ||
| }, | ||
| greyscale: function() { | ||
| return this._applyModification(greyscale, arguments); | ||
| }, | ||
| spin: function() { | ||
| return this._applyModification(spin, arguments); | ||
| }, | ||
| _applyModification: function (fn, args) { | ||
| var color = fn.apply(null, [this].concat([].slice.call(args))); | ||
| this._r = color._r; | ||
| this._g = color._g; | ||
| this._b = color._b; | ||
| this.setAlpha(color._a); | ||
| return this; | ||
| }, | ||
| lighten: function () { | ||
| return this._applyModification(lighten, arguments); | ||
| }, | ||
| brighten: function () { | ||
| return this._applyModification(brighten, arguments); | ||
| }, | ||
| darken: function () { | ||
| return this._applyModification(darken, arguments); | ||
| }, | ||
| desaturate: function () { | ||
| return this._applyModification(desaturate, arguments); | ||
| }, | ||
| saturate: function () { | ||
| return this._applyModification(saturate, arguments); | ||
| }, | ||
| greyscale: function () { | ||
| return this._applyModification(greyscale, arguments); | ||
| }, | ||
| spin: function () { | ||
| return this._applyModification(spin, arguments); | ||
| }, | ||
| _applyCombination: function(fn, args) { | ||
| return fn.apply(null, [this].concat([].slice.call(args))); | ||
| }, | ||
| analogous: function() { | ||
| return this._applyCombination(analogous, arguments); | ||
| }, | ||
| complement: function() { | ||
| return this._applyCombination(complement, arguments); | ||
| }, | ||
| monochromatic: function() { | ||
| return this._applyCombination(monochromatic, arguments); | ||
| }, | ||
| splitcomplement: function() { | ||
| return this._applyCombination(splitcomplement, arguments); | ||
| }, | ||
| triad: function() { | ||
| return this._applyCombination(triad, arguments); | ||
| }, | ||
| tetrad: function() { | ||
| return this._applyCombination(tetrad, arguments); | ||
| } | ||
| _applyCombination: function (fn, args) { | ||
| return fn.apply(null, [this].concat([].slice.call(args))); | ||
| }, | ||
| analogous: function () { | ||
| return this._applyCombination(analogous, arguments); | ||
| }, | ||
| complement: function () { | ||
| return this._applyCombination(complement, arguments); | ||
| }, | ||
| monochromatic: function () { | ||
| return this._applyCombination(monochromatic, arguments); | ||
| }, | ||
| splitcomplement: function () { | ||
| return this._applyCombination(splitcomplement, arguments); | ||
| }, | ||
| triad: function () { | ||
| return this._applyCombination(triad, arguments); | ||
| }, | ||
| tetrad: function () { | ||
| return this._applyCombination(tetrad, arguments); | ||
| }, | ||
| }; | ||
@@ -267,19 +328,18 @@ | ||
| // String input requires "1.0" as input, so 1 will be treated as 1 | ||
| tinycolor.fromRatio = function(color, opts) { | ||
| if (typeof color == "object") { | ||
| var newColor = {}; | ||
| for (var i in color) { | ||
| if (color.hasOwnProperty(i)) { | ||
| if (i === "a") { | ||
| newColor[i] = color[i]; | ||
| } | ||
| else { | ||
| newColor[i] = convertToPercentage(color[i]); | ||
| } | ||
| } | ||
| tinycolor.fromRatio = function (color, opts) { | ||
| if (typeof color == "object") { | ||
| var newColor = {}; | ||
| for (var i in color) { | ||
| if (color.hasOwnProperty(i)) { | ||
| if (i === "a") { | ||
| newColor[i] = color[i]; | ||
| } else { | ||
| newColor[i] = convertToPercentage(color[i]); | ||
| } | ||
| color = newColor; | ||
| } | ||
| } | ||
| color = newColor; | ||
| } | ||
| return tinycolor(color, opts); | ||
| return tinycolor(color, opts); | ||
| }; | ||
@@ -303,54 +363,62 @@ | ||
| function inputToRGB(color) { | ||
| var rgb = { r: 0, g: 0, b: 0 }; | ||
| var a = 1; | ||
| var s = null; | ||
| var v = null; | ||
| var l = null; | ||
| var ok = false; | ||
| var format = false; | ||
| var rgb = { r: 0, g: 0, b: 0 }; | ||
| var a = 1; | ||
| var s = null; | ||
| var v = null; | ||
| var l = null; | ||
| var ok = false; | ||
| var format = false; | ||
| if (typeof color == "string") { | ||
| color = stringInputToObject(color); | ||
| } | ||
| if (typeof color == "string") { | ||
| color = stringInputToObject(color); | ||
| if (typeof color == "object") { | ||
| if ( | ||
| isValidCSSUnit(color.r) && | ||
| isValidCSSUnit(color.g) && | ||
| isValidCSSUnit(color.b) | ||
| ) { | ||
| rgb = rgbToRgb(color.r, color.g, color.b); | ||
| ok = true; | ||
| format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; | ||
| } else if ( | ||
| isValidCSSUnit(color.h) && | ||
| isValidCSSUnit(color.s) && | ||
| isValidCSSUnit(color.v) | ||
| ) { | ||
| s = convertToPercentage(color.s); | ||
| v = convertToPercentage(color.v); | ||
| rgb = hsvToRgb(color.h, s, v); | ||
| ok = true; | ||
| format = "hsv"; | ||
| } else if ( | ||
| isValidCSSUnit(color.h) && | ||
| isValidCSSUnit(color.s) && | ||
| isValidCSSUnit(color.l) | ||
| ) { | ||
| s = convertToPercentage(color.s); | ||
| l = convertToPercentage(color.l); | ||
| rgb = hslToRgb(color.h, s, l); | ||
| ok = true; | ||
| format = "hsl"; | ||
| } | ||
| if (typeof color == "object") { | ||
| if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { | ||
| rgb = rgbToRgb(color.r, color.g, color.b); | ||
| ok = true; | ||
| format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; | ||
| } | ||
| else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { | ||
| s = convertToPercentage(color.s); | ||
| v = convertToPercentage(color.v); | ||
| rgb = hsvToRgb(color.h, s, v); | ||
| ok = true; | ||
| format = "hsv"; | ||
| } | ||
| else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { | ||
| s = convertToPercentage(color.s); | ||
| l = convertToPercentage(color.l); | ||
| rgb = hslToRgb(color.h, s, l); | ||
| ok = true; | ||
| format = "hsl"; | ||
| } | ||
| if (color.hasOwnProperty("a")) { | ||
| a = color.a; | ||
| } | ||
| if (color.hasOwnProperty("a")) { | ||
| a = color.a; | ||
| } | ||
| } | ||
| a = boundAlpha(a); | ||
| a = boundAlpha(a); | ||
| return { | ||
| ok: ok, | ||
| format: color.format || format, | ||
| r: mathMin(255, mathMax(rgb.r, 0)), | ||
| g: mathMin(255, mathMax(rgb.g, 0)), | ||
| b: mathMin(255, mathMax(rgb.b, 0)), | ||
| a: a | ||
| }; | ||
| return { | ||
| ok: ok, | ||
| format: color.format || format, | ||
| r: mathMin(255, mathMax(rgb.r, 0)), | ||
| g: mathMin(255, mathMax(rgb.g, 0)), | ||
| b: mathMin(255, mathMax(rgb.b, 0)), | ||
| a: a, | ||
| }; | ||
| } | ||
| // Conversion Functions | ||
@@ -367,8 +435,8 @@ // -------------------- | ||
| // *Returns:* { r, g, b } in [0, 255] | ||
| function rgbToRgb(r, g, b){ | ||
| return { | ||
| r: bound01(r, 255) * 255, | ||
| g: bound01(g, 255) * 255, | ||
| b: bound01(b, 255) * 255 | ||
| }; | ||
| function rgbToRgb(r, g, b) { | ||
| return { | ||
| r: bound01(r, 255) * 255, | ||
| g: bound01(g, 255) * 255, | ||
| b: bound01(b, 255) * 255, | ||
| }; | ||
| } | ||
@@ -381,26 +449,33 @@ | ||
| function rgbToHsl(r, g, b) { | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| var max = mathMax(r, g, b), | ||
| min = mathMin(r, g, b); | ||
| var h, | ||
| s, | ||
| l = (max + min) / 2; | ||
| var max = mathMax(r, g, b), min = mathMin(r, g, b); | ||
| var h, s, l = (max + min) / 2; | ||
| if(max == min) { | ||
| h = s = 0; // achromatic | ||
| if (max == min) { | ||
| h = s = 0; // achromatic | ||
| } else { | ||
| var d = max - min; | ||
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | ||
| switch (max) { | ||
| case r: | ||
| h = (g - b) / d + (g < b ? 6 : 0); | ||
| break; | ||
| case g: | ||
| h = (b - r) / d + 2; | ||
| break; | ||
| case b: | ||
| h = (r - g) / d + 4; | ||
| break; | ||
| } | ||
| else { | ||
| var d = max - min; | ||
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | ||
| switch(max) { | ||
| case r: h = (g - b) / d + (g < b ? 6 : 0); break; | ||
| case g: h = (b - r) / d + 2; break; | ||
| case b: h = (r - g) / d + 4; break; | ||
| } | ||
| h /= 6; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, l: l }; | ||
| return { h: h, s: s, l: l }; | ||
| } | ||
@@ -413,29 +488,28 @@ | ||
| function hslToRgb(h, s, l) { | ||
| var r, g, b; | ||
| var r, g, b; | ||
| h = bound01(h, 360); | ||
| s = bound01(s, 100); | ||
| l = bound01(l, 100); | ||
| h = bound01(h, 360); | ||
| s = bound01(s, 100); | ||
| l = bound01(l, 100); | ||
| function hue2rgb(p, q, t) { | ||
| if(t < 0) t += 1; | ||
| if(t > 1) t -= 1; | ||
| if(t < 1/6) return p + (q - p) * 6 * t; | ||
| if(t < 1/2) return q; | ||
| if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; | ||
| return p; | ||
| } | ||
| function hue2rgb(p, q, t) { | ||
| if (t < 0) t += 1; | ||
| if (t > 1) t -= 1; | ||
| if (t < 1 / 6) return p + (q - p) * 6 * t; | ||
| if (t < 1 / 2) return q; | ||
| if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; | ||
| return p; | ||
| } | ||
| if(s === 0) { | ||
| r = g = b = l; // achromatic | ||
| } | ||
| else { | ||
| var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | ||
| var p = 2 * l - q; | ||
| r = hue2rgb(p, q, h + 1/3); | ||
| g = hue2rgb(p, q, h); | ||
| b = hue2rgb(p, q, h - 1/3); | ||
| } | ||
| if (s === 0) { | ||
| r = g = b = l; // achromatic | ||
| } else { | ||
| var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | ||
| var p = 2 * l - q; | ||
| r = hue2rgb(p, q, h + 1 / 3); | ||
| g = hue2rgb(p, q, h); | ||
| b = hue2rgb(p, q, h - 1 / 3); | ||
| } | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| } | ||
@@ -448,25 +522,32 @@ | ||
| function rgbToHsv(r, g, b) { | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| var max = mathMax(r, g, b), | ||
| min = mathMin(r, g, b); | ||
| var h, | ||
| s, | ||
| v = max; | ||
| var max = mathMax(r, g, b), min = mathMin(r, g, b); | ||
| var h, s, v = max; | ||
| var d = max - min; | ||
| s = max === 0 ? 0 : d / max; | ||
| var d = max - min; | ||
| s = max === 0 ? 0 : d / max; | ||
| if(max == min) { | ||
| h = 0; // achromatic | ||
| if (max == min) { | ||
| h = 0; // achromatic | ||
| } else { | ||
| switch (max) { | ||
| case r: | ||
| h = (g - b) / d + (g < b ? 6 : 0); | ||
| break; | ||
| case g: | ||
| h = (b - r) / d + 2; | ||
| break; | ||
| case b: | ||
| h = (r - g) / d + 4; | ||
| break; | ||
| } | ||
| else { | ||
| switch(max) { | ||
| case r: h = (g - b) / d + (g < b ? 6 : 0); break; | ||
| case g: h = (b - r) / d + 2; break; | ||
| case b: h = (r - g) / d + 4; break; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, v: v }; | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, v: v }; | ||
| } | ||
@@ -478,19 +559,18 @@ | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hsvToRgb(h, s, v) { | ||
| function hsvToRgb(h, s, v) { | ||
| h = bound01(h, 360) * 6; | ||
| s = bound01(s, 100); | ||
| v = bound01(v, 100); | ||
| h = bound01(h, 360) * 6; | ||
| s = bound01(s, 100); | ||
| v = bound01(v, 100); | ||
| var i = Math.floor(h), | ||
| f = h - i, | ||
| p = v * (1 - s), | ||
| q = v * (1 - f * s), | ||
| t = v * (1 - (1 - f) * s), | ||
| mod = i % 6, | ||
| r = [v, q, p, p, t, v][mod], | ||
| g = [t, v, v, q, p, p][mod], | ||
| b = [p, p, t, v, v, q][mod]; | ||
| var i = Math.floor(h), | ||
| f = h - i, | ||
| p = v * (1 - s), | ||
| q = v * (1 - f * s), | ||
| t = v * (1 - (1 - f) * s), | ||
| mod = i % 6, | ||
| r = [v, q, p, p, t, v][mod], | ||
| g = [t, v, v, q, p, p][mod], | ||
| b = [p, p, t, v, v, q][mod]; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| } | ||
@@ -503,15 +583,19 @@ | ||
| function rgbToHex(r, g, b, allow3Char) { | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| ]; | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)) | ||
| ]; | ||
| // Return a 3 character hex if possible | ||
| if ( | ||
| allow3Char && | ||
| hex[0].charAt(0) == hex[0].charAt(1) && | ||
| hex[1].charAt(0) == hex[1].charAt(1) && | ||
| hex[2].charAt(0) == hex[2].charAt(1) | ||
| ) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); | ||
| } | ||
| // Return a 3 character hex if possible | ||
| if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); | ||
| } | ||
| return hex.join(""); | ||
| return hex.join(""); | ||
| } | ||
@@ -524,16 +608,23 @@ | ||
| function rgbaToHex(r, g, b, a, allow4Char) { | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| pad2(convertDecimalToHex(a)), | ||
| ]; | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| pad2(convertDecimalToHex(a)) | ||
| ]; | ||
| // Return a 4 character hex if possible | ||
| if ( | ||
| allow4Char && | ||
| hex[0].charAt(0) == hex[0].charAt(1) && | ||
| hex[1].charAt(0) == hex[1].charAt(1) && | ||
| hex[2].charAt(0) == hex[2].charAt(1) && | ||
| hex[3].charAt(0) == hex[3].charAt(1) | ||
| ) { | ||
| return ( | ||
| hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0) | ||
| ); | ||
| } | ||
| // Return a 4 character hex if possible | ||
| if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); | ||
| } | ||
| return hex.join(""); | ||
| return hex.join(""); | ||
| } | ||
@@ -545,11 +636,10 @@ | ||
| function rgbaToArgbHex(r, g, b, a) { | ||
| var hex = [ | ||
| pad2(convertDecimalToHex(a)), | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| ]; | ||
| var hex = [ | ||
| pad2(convertDecimalToHex(a)), | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)) | ||
| ]; | ||
| return hex.join(""); | ||
| return hex.join(""); | ||
| } | ||
@@ -560,15 +650,14 @@ | ||
| tinycolor.equals = function (color1, color2) { | ||
| if (!color1 || !color2) { return false; } | ||
| return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); | ||
| if (!color1 || !color2) return false; | ||
| return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); | ||
| }; | ||
| tinycolor.random = function() { | ||
| return tinycolor.fromRatio({ | ||
| r: mathRandom(), | ||
| g: mathRandom(), | ||
| b: mathRandom() | ||
| }); | ||
| tinycolor.random = function () { | ||
| return tinycolor.fromRatio({ | ||
| r: mathRandom(), | ||
| g: mathRandom(), | ||
| b: mathRandom(), | ||
| }); | ||
| }; | ||
| // Modification Functions | ||
@@ -580,44 +669,44 @@ // ---------------------- | ||
| function desaturate(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s -= amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s -= amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| function saturate(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s += amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s += amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| function greyscale(color) { | ||
| return tinycolor(color).desaturate(100); | ||
| return tinycolor(color).desaturate(100); | ||
| } | ||
| function lighten (color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l += amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| function lighten(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l += amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| } | ||
| function brighten(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var rgb = tinycolor(color).toRgb(); | ||
| rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); | ||
| rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); | ||
| rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); | ||
| return tinycolor(rgb); | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var rgb = tinycolor(color).toRgb(); | ||
| rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * -(amount / 100)))); | ||
| rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * -(amount / 100)))); | ||
| rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * -(amount / 100)))); | ||
| return tinycolor(rgb); | ||
| } | ||
| function darken (color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l -= amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| function darken(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l -= amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| } | ||
@@ -628,6 +717,6 @@ | ||
| function spin(color, amount) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var hue = (hsl.h + amount) % 360; | ||
| hsl.h = hue < 0 ? 360 + hue : hue; | ||
| return tinycolor(hsl); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var hue = (hsl.h + amount) % 360; | ||
| hsl.h = hue < 0 ? 360 + hue : hue; | ||
| return tinycolor(hsl); | ||
| } | ||
@@ -641,66 +730,68 @@ | ||
| function complement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.h = (hsl.h + 180) % 360; | ||
| return tinycolor(hsl); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.h = (hsl.h + 180) % 360; | ||
| return tinycolor(hsl); | ||
| } | ||
| function triad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) | ||
| ]; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function tetrad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) | ||
| ]; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function splitcomplement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), | ||
| tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) | ||
| ]; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function analogous(color, results, slices) { | ||
| results = results || 6; | ||
| slices = slices || 30; | ||
| results = results || 6; | ||
| slices = slices || 30; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var part = 360 / slices; | ||
| var ret = [tinycolor(color)]; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var part = 360 / slices; | ||
| var ret = [tinycolor(color)]; | ||
| for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { | ||
| hsl.h = (hsl.h + part) % 360; | ||
| ret.push(tinycolor(hsl)); | ||
| } | ||
| return ret; | ||
| for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results; ) { | ||
| hsl.h = (hsl.h + part) % 360; | ||
| ret.push(tinycolor(hsl)); | ||
| } | ||
| return ret; | ||
| } | ||
| function monochromatic(color, results) { | ||
| results = results || 6; | ||
| var hsv = tinycolor(color).toHsv(); | ||
| var h = hsv.h, s = hsv.s, v = hsv.v; | ||
| var ret = []; | ||
| var modification = 1 / results; | ||
| results = results || 6; | ||
| var hsv = tinycolor(color).toHsv(); | ||
| var h = hsv.h, | ||
| s = hsv.s, | ||
| v = hsv.v; | ||
| var ret = []; | ||
| var modification = 1 / results; | ||
| while (results--) { | ||
| ret.push(tinycolor({ h: h, s: s, v: v})); | ||
| v = (v + modification) % 1; | ||
| } | ||
| while (results--) { | ||
| ret.push(tinycolor({ h: h, s: s, v: v })); | ||
| v = (v + modification) % 1; | ||
| } | ||
| return ret; | ||
| return ret; | ||
| } | ||
@@ -711,21 +802,20 @@ | ||
| tinycolor.mix = function(color1, color2, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 50); | ||
| tinycolor.mix = function (color1, color2, amount) { | ||
| amount = amount === 0 ? 0 : amount || 50; | ||
| var rgb1 = tinycolor(color1).toRgb(); | ||
| var rgb2 = tinycolor(color2).toRgb(); | ||
| var rgb1 = tinycolor(color1).toRgb(); | ||
| var rgb2 = tinycolor(color2).toRgb(); | ||
| var p = amount / 100; | ||
| 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 | ||
| }; | ||
| 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 tinycolor(rgba); | ||
| return tinycolor(rgba); | ||
| }; | ||
| // Readability Functions | ||
@@ -737,6 +827,9 @@ // --------------------- | ||
| // Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2) | ||
| tinycolor.readability = function(color1, color2) { | ||
| var c1 = tinycolor(color1); | ||
| var c2 = tinycolor(color2); | ||
| return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05); | ||
| tinycolor.readability = function (color1, color2) { | ||
| var c1 = tinycolor(color1); | ||
| var c2 = tinycolor(color2); | ||
| return ( | ||
| (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / | ||
| (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05) | ||
| ); | ||
| }; | ||
@@ -754,23 +847,22 @@ | ||
| // tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false | ||
| tinycolor.isReadable = function(color1, color2, wcag2) { | ||
| var readability = tinycolor.readability(color1, color2); | ||
| var wcag2Parms, out; | ||
| tinycolor.isReadable = function (color1, color2, wcag2) { | ||
| var readability = tinycolor.readability(color1, color2); | ||
| var wcag2Parms, out; | ||
| out = false; | ||
| out = false; | ||
| wcag2Parms = validateWCAG2Parms(wcag2); | ||
| switch (wcag2Parms.level + wcag2Parms.size) { | ||
| case "AAsmall": | ||
| case "AAAlarge": | ||
| out = readability >= 4.5; | ||
| break; | ||
| case "AAlarge": | ||
| out = readability >= 3; | ||
| break; | ||
| case "AAAsmall": | ||
| out = readability >= 7; | ||
| break; | ||
| } | ||
| return out; | ||
| wcag2Parms = validateWCAG2Parms(wcag2); | ||
| switch (wcag2Parms.level + wcag2Parms.size) { | ||
| case "AAsmall": | ||
| case "AAAlarge": | ||
| out = readability >= 4.5; | ||
| break; | ||
| case "AAlarge": | ||
| out = readability >= 3; | ||
| break; | ||
| case "AAAsmall": | ||
| out = readability >= 7; | ||
| break; | ||
| } | ||
| return out; | ||
| }; | ||
@@ -787,189 +879,192 @@ | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" | ||
| tinycolor.mostReadable = function(baseColor, colorList, args) { | ||
| var bestColor = null; | ||
| var bestScore = 0; | ||
| var readability; | ||
| var includeFallbackColors, level, size ; | ||
| args = args || {}; | ||
| includeFallbackColors = args.includeFallbackColors ; | ||
| level = args.level; | ||
| size = args.size; | ||
| tinycolor.mostReadable = function (baseColor, colorList, args) { | ||
| var bestColor = null; | ||
| var bestScore = 0; | ||
| var readability; | ||
| var includeFallbackColors, level, size; | ||
| args = args || {}; | ||
| includeFallbackColors = args.includeFallbackColors; | ||
| level = args.level; | ||
| size = args.size; | ||
| for (var i= 0; i < colorList.length ; i++) { | ||
| readability = tinycolor.readability(baseColor, colorList[i]); | ||
| if (readability > bestScore) { | ||
| bestScore = readability; | ||
| bestColor = tinycolor(colorList[i]); | ||
| } | ||
| for (var i = 0; i < colorList.length; i++) { | ||
| readability = tinycolor.readability(baseColor, colorList[i]); | ||
| if (readability > bestScore) { | ||
| bestScore = readability; | ||
| bestColor = tinycolor(colorList[i]); | ||
| } | ||
| } | ||
| if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { | ||
| return bestColor; | ||
| } | ||
| else { | ||
| args.includeFallbackColors=false; | ||
| return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); | ||
| } | ||
| if ( | ||
| tinycolor.isReadable(baseColor, bestColor, { | ||
| level: level, | ||
| size: size, | ||
| }) || | ||
| !includeFallbackColors | ||
| ) { | ||
| return bestColor; | ||
| } else { | ||
| args.includeFallbackColors = false; | ||
| return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args); | ||
| } | ||
| }; | ||
| // Big List of Colors | ||
| // ------------------ | ||
| // <http://www.w3.org/TR/css3-color/#svg-color> | ||
| var names = tinycolor.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" | ||
| }; | ||
| var names = (tinycolor.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", | ||
| }); | ||
| // Make it easy to access colors via `hexNames[hex]` | ||
| var hexNames = tinycolor.hexNames = flip(names); | ||
| var hexNames = (tinycolor.hexNames = flip(names)); | ||
| // Utilities | ||
@@ -980,9 +1075,9 @@ // --------- | ||
| function flip(o) { | ||
| var flipped = { }; | ||
| for (var i in o) { | ||
| if (o.hasOwnProperty(i)) { | ||
| flipped[o[i]] = i; | ||
| } | ||
| var flipped = {}; | ||
| for (var i in o) { | ||
| if (o.hasOwnProperty(i)) { | ||
| flipped[o[i]] = i; | ||
| } | ||
| return flipped; | ||
| } | ||
| return flipped; | ||
| } | ||
@@ -992,9 +1087,9 @@ | ||
| function boundAlpha(a) { | ||
| a = parseFloat(a); | ||
| a = parseFloat(a); | ||
| if (isNaN(a) || a < 0 || a > 1) { | ||
| a = 1; | ||
| } | ||
| if (isNaN(a) || a < 0 || a > 1) { | ||
| a = 1; | ||
| } | ||
| return a; | ||
| return a; | ||
| } | ||
@@ -1004,19 +1099,19 @@ | ||
| function bound01(n, max) { | ||
| if (isOnePointZero(n)) { n = "100%"; } | ||
| if (isOnePointZero(n)) n = "100%"; | ||
| var processPercent = isPercentage(n); | ||
| n = mathMin(max, mathMax(0, parseFloat(n))); | ||
| var processPercent = isPercentage(n); | ||
| n = mathMin(max, mathMax(0, parseFloat(n))); | ||
| // Automatically convert percentage into number | ||
| if (processPercent) { | ||
| n = parseInt(n * max, 10) / 100; | ||
| } | ||
| // Automatically convert percentage into number | ||
| if (processPercent) { | ||
| n = parseInt(n * max, 10) / 100; | ||
| } | ||
| // Handle floating point rounding errors | ||
| if ((Math.abs(n - max) < 0.000001)) { | ||
| return 1; | ||
| } | ||
| // Handle floating point rounding errors | ||
| if (Math.abs(n - max) < 0.000001) { | ||
| return 1; | ||
| } | ||
| // Convert into [0, 1] range if it isn't already | ||
| return (n % max) / parseFloat(max); | ||
| // Convert into [0, 1] range if it isn't already | ||
| return (n % max) / parseFloat(max); | ||
| } | ||
@@ -1026,3 +1121,3 @@ | ||
| function clamp01(val) { | ||
| return mathMin(1, mathMax(0, val)); | ||
| return mathMin(1, mathMax(0, val)); | ||
| } | ||
@@ -1032,3 +1127,3 @@ | ||
| function parseIntFromHex(val) { | ||
| return parseInt(val, 16); | ||
| return parseInt(val, 16); | ||
| } | ||
@@ -1039,3 +1134,3 @@ | ||
| function isOnePointZero(n) { | ||
| return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; | ||
| return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1; | ||
| } | ||
@@ -1045,3 +1140,3 @@ | ||
| function isPercentage(n) { | ||
| return typeof n === "string" && n.indexOf('%') != -1; | ||
| return typeof n === "string" && n.indexOf("%") != -1; | ||
| } | ||
@@ -1051,3 +1146,3 @@ | ||
| function pad2(c) { | ||
| return c.length == 1 ? '0' + c : '' + c; | ||
| return c.length == 1 ? "0" + c : "" + c; | ||
| } | ||
@@ -1057,7 +1152,7 @@ | ||
| function convertToPercentage(n) { | ||
| if (n <= 1) { | ||
| n = (n * 100) + "%"; | ||
| } | ||
| if (n <= 1) { | ||
| n = n * 100 + "%"; | ||
| } | ||
| return n; | ||
| return n; | ||
| } | ||
@@ -1067,39 +1162,54 @@ | ||
| function convertDecimalToHex(d) { | ||
| return Math.round(parseFloat(d) * 255).toString(16); | ||
| return Math.round(parseFloat(d) * 255).toString(16); | ||
| } | ||
| // Converts a hex value to a decimal | ||
| function convertHexToDecimal(h) { | ||
| return (parseIntFromHex(h) / 255); | ||
| return parseIntFromHex(h) / 255; | ||
| } | ||
| var matchers = (function() { | ||
| var matchers = (function () { | ||
| // <http://www.w3.org/TR/css3-values/#integers> | ||
| var CSS_INTEGER = "[-\\+]?\\d+%?"; | ||
| // <http://www.w3.org/TR/css3-values/#integers> | ||
| var CSS_INTEGER = "[-\\+]?\\d+%?"; | ||
| // <http://www.w3.org/TR/css3-values/#number-value> | ||
| var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; | ||
| // <http://www.w3.org/TR/css3-values/#number-value> | ||
| var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; | ||
| // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. | ||
| var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; | ||
| // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. | ||
| var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; | ||
| // Actual matching. | ||
| // Parentheses and commas are optional, but not required. | ||
| // Whitespace can take the place of commas or opening paren | ||
| var PERMISSIVE_MATCH3 = | ||
| "[\\s|\\(]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")\\s*\\)?"; | ||
| var PERMISSIVE_MATCH4 = | ||
| "[\\s|\\(]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")\\s*\\)?"; | ||
| // Actual matching. | ||
| // Parentheses and commas are optional, but not required. | ||
| // Whitespace can take the place of commas or opening paren | ||
| var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; | ||
| var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; | ||
| return { | ||
| CSS_UNIT: new RegExp(CSS_UNIT), | ||
| rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), | ||
| rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), | ||
| hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), | ||
| hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), | ||
| hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), | ||
| hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), | ||
| hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ | ||
| }; | ||
| return { | ||
| CSS_UNIT: new RegExp(CSS_UNIT), | ||
| rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), | ||
| rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), | ||
| hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), | ||
| hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), | ||
| hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), | ||
| hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), | ||
| hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| }; | ||
| })(); | ||
@@ -1111,3 +1221,3 @@ | ||
| function isValidCSSUnit(color) { | ||
| return !!matchers.CSS_UNIT.exec(color); | ||
| return !!matchers.CSS_UNIT.exec(color); | ||
| } | ||
@@ -1119,88 +1229,86 @@ | ||
| function stringInputToObject(color) { | ||
| color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase(); | ||
| var named = false; | ||
| if (names[color]) { | ||
| color = names[color]; | ||
| named = true; | ||
| } else if (color == "transparent") { | ||
| return { r: 0, g: 0, b: 0, a: 0, format: "name" }; | ||
| } | ||
| color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase(); | ||
| var named = false; | ||
| if (names[color]) { | ||
| color = names[color]; | ||
| named = true; | ||
| } | ||
| else if (color == 'transparent') { | ||
| return { r: 0, g: 0, b: 0, a: 0, format: "name" }; | ||
| } | ||
| // Try to match string input using regular expressions. | ||
| // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] | ||
| // Just return an object and let the conversion functions handle that. | ||
| // This way the result will be the same whether the tinycolor is initialized with string or object. | ||
| var match; | ||
| if ((match = matchers.rgb.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3] }; | ||
| } | ||
| if ((match = matchers.rgba.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hsl.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3] }; | ||
| } | ||
| if ((match = matchers.hsla.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hsv.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3] }; | ||
| } | ||
| if ((match = matchers.hsva.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hex8.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| a: convertHexToDecimal(match[4]), | ||
| format: named ? "name" : "hex8", | ||
| }; | ||
| } | ||
| if ((match = matchers.hex6.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| format: named ? "name" : "hex", | ||
| }; | ||
| } | ||
| if ((match = matchers.hex4.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + "" + match[1]), | ||
| g: parseIntFromHex(match[2] + "" + match[2]), | ||
| b: parseIntFromHex(match[3] + "" + match[3]), | ||
| a: convertHexToDecimal(match[4] + "" + match[4]), | ||
| format: named ? "name" : "hex8", | ||
| }; | ||
| } | ||
| if ((match = matchers.hex3.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + "" + match[1]), | ||
| g: parseIntFromHex(match[2] + "" + match[2]), | ||
| b: parseIntFromHex(match[3] + "" + match[3]), | ||
| format: named ? "name" : "hex", | ||
| }; | ||
| } | ||
| // Try to match string input using regular expressions. | ||
| // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] | ||
| // Just return an object and let the conversion functions handle that. | ||
| // This way the result will be the same whether the tinycolor is initialized with string or object. | ||
| var match; | ||
| if ((match = matchers.rgb.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3] }; | ||
| } | ||
| if ((match = matchers.rgba.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hsl.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3] }; | ||
| } | ||
| if ((match = matchers.hsla.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hsv.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3] }; | ||
| } | ||
| if ((match = matchers.hsva.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hex8.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| a: convertHexToDecimal(match[4]), | ||
| format: named ? "name" : "hex8" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex6.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| format: named ? "name" : "hex" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex4.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + '' + match[1]), | ||
| g: parseIntFromHex(match[2] + '' + match[2]), | ||
| b: parseIntFromHex(match[3] + '' + match[3]), | ||
| a: convertHexToDecimal(match[4] + '' + match[4]), | ||
| format: named ? "name" : "hex8" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex3.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + '' + match[1]), | ||
| g: parseIntFromHex(match[2] + '' + match[2]), | ||
| b: parseIntFromHex(match[3] + '' + match[3]), | ||
| format: named ? "name" : "hex" | ||
| }; | ||
| } | ||
| return false; | ||
| return false; | ||
| } | ||
| function validateWCAG2Parms(parms) { | ||
| // return valid WCAG2 parms for isReadable. | ||
| // If input parms are invalid, return {"level":"AA", "size":"small"} | ||
| var level, size; | ||
| parms = parms || {"level":"AA", "size":"small"}; | ||
| level = (parms.level || "AA").toUpperCase(); | ||
| size = (parms.size || "small").toLowerCase(); | ||
| if (level !== "AA" && level !== "AAA") { | ||
| level = "AA"; | ||
| } | ||
| if (size !== "small" && size !== "large") { | ||
| size = "small"; | ||
| } | ||
| return {"level":level, "size":size}; | ||
| // return valid WCAG2 parms for isReadable. | ||
| // If input parms are invalid, return {"level":"AA", "size":"small"} | ||
| var level, size; | ||
| parms = parms || { level: "AA", size: "small" }; | ||
| level = (parms.level || "AA").toUpperCase(); | ||
| size = (parms.size || "small").toLowerCase(); | ||
| if (level !== "AA" && level !== "AAA") { | ||
| level = "AA"; | ||
| } | ||
| if (size !== "small" && size !== "large") { | ||
| size = "small"; | ||
| } | ||
| return { level: level, size: size }; | ||
| } |
| { | ||
| "version": "0.0.6", | ||
| "version": "1.4.2", | ||
| "name": "@bgrins/test-tinycolor-esm", | ||
@@ -32,2 +32,2 @@ "description": "Fast Color Parsing and Manipulation", | ||
| } | ||
| } | ||
| } |
63
test.js
| import { | ||
| assert, | ||
| assertEquals, | ||
| assert, | ||
| } from "https://deno.land/std@0.168.0/testing/asserts.ts"; | ||
@@ -10,3 +10,3 @@ import tinycolor from "./mod.js"; | ||
| Deno.test("url test", () => { | ||
| Deno.test("TinyColor initialization", function () { | ||
| assert( | ||
@@ -49,17 +49,2 @@ typeof tinycolor != "undefined", | ||
| // Deno.test("TinyColor initialization", function() { | ||
| // assert(typeof tinycolor != "undefined", "tinycolor is initialized on the page"); | ||
| // assert(typeof tinycolor("red") == "object", "tinycolor is able to be instantiated"); | ||
| // var r = tinycolor("red"); | ||
| // assert(tinycolor(r) === r, "when given a tinycolor instance, tinycolor() returns it"); | ||
| // assert(new tinycolor(r) === r, "when given a tinycolor instance, new tinycolor() returns it"); | ||
| // assertEquals(tinycolor("red", { format: "hex" }).toString(), "#ff0000", "tinycolor options are being parsed"); | ||
| // assertEquals(tinycolor.fromRatio({r: 1, g: 0, b: 0 }, { format: "hex" }).toString(), "#ff0000", "tinycolor options are being parsed"); | ||
| // var obj = {h: 180, s: 0.5, l: 0.5}; | ||
| // var color = tinycolor(obj); | ||
| // assert(obj.s === 0.5, "when given an object, the original object is not modified"); | ||
| // }); | ||
| Deno.test("Original input", function () { | ||
@@ -347,3 +332,8 @@ var colorRgbUp = "RGB(39, 39, 39)"; | ||
| tinycolor({ r: 255, g: 0, b: 0 }).toRgb(), | ||
| { r: 255, g: 0, b: 0, a: 1 }, | ||
| { | ||
| r: 255, | ||
| g: 0, | ||
| b: 0, | ||
| a: 1, | ||
| }, | ||
| "object input and compare" | ||
@@ -398,3 +388,8 @@ ); | ||
| tinycolor({ r: "100%", g: "0%", b: "0%" }).toRgb(), | ||
| { r: 255, g: 0, b: 0, a: 1 }, | ||
| { | ||
| r: 255, | ||
| g: 0, | ||
| b: 0, | ||
| a: 1, | ||
| }, | ||
| "object input and compare" | ||
@@ -745,11 +740,17 @@ ); | ||
| { r: 255, g: 0, b: 0, a: 0.6 }, | ||
| { format: "name" } | ||
| { | ||
| format: "name", | ||
| } | ||
| ); | ||
| var transparentNamed = tinycolor.fromRatio( | ||
| { r: 255, g: 0, b: 0, a: 0 }, | ||
| { format: "name" } | ||
| { | ||
| format: "name", | ||
| } | ||
| ); | ||
| var redHex = tinycolor.fromRatio( | ||
| { r: 255, g: 0, b: 0, a: 0.4 }, | ||
| { format: "hex" } | ||
| { | ||
| format: "hex", | ||
| } | ||
| ); | ||
@@ -1261,3 +1262,5 @@ | ||
| tinycolor | ||
| .mostReadable("#fff", ["#fff", "#fff"], { includeFallbackColors: true }) | ||
| .mostReadable("#fff", ["#fff", "#fff"], { | ||
| includeFallbackColors: true, | ||
| }) | ||
| .toHexString(), | ||
@@ -1269,3 +1272,5 @@ "#000000", | ||
| tinycolor | ||
| .mostReadable("#123", ["#124", "#125"], { includeFallbackColors: false }) | ||
| .mostReadable("#123", ["#124", "#125"], { | ||
| includeFallbackColors: false, | ||
| }) | ||
| .toHexString(), | ||
@@ -1277,3 +1282,5 @@ "#112255", | ||
| tinycolor | ||
| .mostReadable("#123", ["#000", "#fff"], { includeFallbackColors: false }) | ||
| .mostReadable("#123", ["#000", "#fff"], { | ||
| includeFallbackColors: false, | ||
| }) | ||
| .toHexString(), | ||
@@ -1285,3 +1292,5 @@ "#ffffff", | ||
| tinycolor | ||
| .mostReadable("#123", ["#124", "#125"], { includeFallbackColors: true }) | ||
| .mostReadable("#123", ["#124", "#125"], { | ||
| includeFallbackColors: true, | ||
| }) | ||
| .toHexString(), | ||
@@ -2058,2 +2067,4 @@ "#ffffff", | ||
| // The combination tests need to be expanded furthe | ||
| function colorsToHexString(colors) { | ||
@@ -2060,0 +2071,0 @@ return colors |
2192
tinycolor.js
@@ -5,1185 +5,1293 @@ // This file is autogenerated. | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.tinycolor = factory()); | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.tinycolor = factory()); | ||
| })(this, (function () { 'use strict'; | ||
| // https://github.com/bgrins/TinyColor | ||
| // Brian Grinstead, MIT License | ||
| // TinyColor v1.4.2 | ||
| // https://github.com/bgrins/TinyColor | ||
| // Brian Grinstead, MIT License | ||
| var trimLeft = /^\s+/, | ||
| trimRight = /\s+$/, | ||
| mathRound = Math.round, | ||
| mathMin = Math.min, | ||
| mathMax = Math.max, | ||
| mathRandom = Math.random; | ||
| var trimLeft = /^\s+/, | ||
| trimRight = /\s+$/, | ||
| mathRound = Math.round, | ||
| mathMin = Math.min, | ||
| mathMax = Math.max, | ||
| mathRandom = Math.random; | ||
| function tinycolor (color, opts) { | ||
| function tinycolor(color, opts) { | ||
| color = color ? color : ""; | ||
| opts = opts || {}; | ||
| color = (color) ? color : ''; | ||
| opts = opts || { }; | ||
| // If input is already a tinycolor, return itself | ||
| if (color instanceof tinycolor) { | ||
| return color; | ||
| } | ||
| // If we are called as a function, call using new instead | ||
| if (!(this instanceof tinycolor)) { | ||
| return new tinycolor(color, opts); | ||
| } | ||
| // If input is already a tinycolor, return itself | ||
| if (color instanceof tinycolor) { | ||
| return color; | ||
| } | ||
| // If we are called as a function, call using new instead | ||
| if (!(this instanceof tinycolor)) { | ||
| return new tinycolor(color, opts); | ||
| } | ||
| 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 = mathRound(100 * this._a) / 100), | ||
| (this._format = opts.format || rgb.format); | ||
| this._gradientType = opts.gradientType; | ||
| 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 = mathRound(100*this._a) / 100, | ||
| this._format = opts.format || 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 = mathRound(this._r); | ||
| if (this._g < 1) this._g = mathRound(this._g); | ||
| if (this._b < 1) this._b = mathRound(this._b); | ||
| // 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 = mathRound(this._r); } | ||
| if (this._g < 1) { this._g = mathRound(this._g); } | ||
| if (this._b < 1) { this._b = mathRound(this._b); } | ||
| this._ok = rgb.ok; | ||
| } | ||
| this._ok = rgb.ok; | ||
| } | ||
| tinycolor.prototype = { | ||
| isDark: function () { | ||
| return this.getBrightness() < 128; | ||
| }, | ||
| isLight: function () { | ||
| return !this.isDark(); | ||
| }, | ||
| isValid: function () { | ||
| return this._ok; | ||
| }, | ||
| getOriginalInput: function () { | ||
| return this._originalInput; | ||
| }, | ||
| getFormat: function () { | ||
| return this._format; | ||
| }, | ||
| getAlpha: function () { | ||
| return this._a; | ||
| }, | ||
| 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; | ||
| }, | ||
| getLuminance: function () { | ||
| //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef | ||
| var rgb = this.toRgb(); | ||
| var RsRGB, GsRGB, BsRGB, R, G, B; | ||
| RsRGB = rgb.r / 255; | ||
| GsRGB = rgb.g / 255; | ||
| BsRGB = rgb.b / 255; | ||
| tinycolor.prototype = { | ||
| isDark: function() { | ||
| return this.getBrightness() < 128; | ||
| }, | ||
| isLight: function() { | ||
| return !this.isDark(); | ||
| }, | ||
| isValid: function() { | ||
| return this._ok; | ||
| }, | ||
| getOriginalInput: function() { | ||
| return this._originalInput; | ||
| }, | ||
| getFormat: function() { | ||
| return this._format; | ||
| }, | ||
| getAlpha: function() { | ||
| return this._a; | ||
| }, | ||
| 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; | ||
| }, | ||
| getLuminance: function() { | ||
| //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef | ||
| var rgb = this.toRgb(); | ||
| var RsRGB, GsRGB, BsRGB, R, G, B; | ||
| RsRGB = rgb.r/255; | ||
| GsRGB = rgb.g/255; | ||
| BsRGB = rgb.b/255; | ||
| if (RsRGB <= 0.03928) R = RsRGB / 12.92; | ||
| else R = Math.pow((RsRGB + 0.055) / 1.055, 2.4); | ||
| if (GsRGB <= 0.03928) G = GsRGB / 12.92; | ||
| else G = Math.pow((GsRGB + 0.055) / 1.055, 2.4); | ||
| if (BsRGB <= 0.03928) B = BsRGB / 12.92; | ||
| else B = Math.pow((BsRGB + 0.055) / 1.055, 2.4); | ||
| return 0.2126 * R + 0.7152 * G + 0.0722 * B; | ||
| }, | ||
| setAlpha: function (value) { | ||
| this._a = boundAlpha(value); | ||
| this._roundA = mathRound(100 * this._a) / 100; | ||
| return this; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHsvString: function () { | ||
| var hsv = rgbToHsv(this._r, this._g, this._b); | ||
| var h = mathRound(hsv.h * 360), | ||
| s = mathRound(hsv.s * 100), | ||
| v = mathRound(hsv.v * 100); | ||
| return this._a == 1 | ||
| ? "hsv(" + h + ", " + s + "%, " + v + "%)" | ||
| : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")"; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHslString: function () { | ||
| var hsl = rgbToHsl(this._r, this._g, this._b); | ||
| var h = mathRound(hsl.h * 360), | ||
| s = mathRound(hsl.s * 100), | ||
| l = mathRound(hsl.l * 100); | ||
| return this._a == 1 | ||
| ? "hsl(" + h + ", " + s + "%, " + l + "%)" | ||
| : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")"; | ||
| }, | ||
| toHex: function (allow3Char) { | ||
| return rgbToHex(this._r, this._g, this._b, allow3Char); | ||
| }, | ||
| toHexString: function (allow3Char) { | ||
| return "#" + this.toHex(allow3Char); | ||
| }, | ||
| toHex8: function (allow4Char) { | ||
| return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); | ||
| }, | ||
| toHex8String: function (allow4Char) { | ||
| return "#" + this.toHex8(allow4Char); | ||
| }, | ||
| toRgb: function () { | ||
| return { | ||
| r: mathRound(this._r), | ||
| g: mathRound(this._g), | ||
| b: mathRound(this._b), | ||
| a: this._a, | ||
| }; | ||
| }, | ||
| toRgbString: function () { | ||
| return this._a == 1 | ||
| ? "rgb(" + | ||
| mathRound(this._r) + | ||
| ", " + | ||
| mathRound(this._g) + | ||
| ", " + | ||
| mathRound(this._b) + | ||
| ")" | ||
| : "rgba(" + | ||
| mathRound(this._r) + | ||
| ", " + | ||
| mathRound(this._g) + | ||
| ", " + | ||
| mathRound(this._b) + | ||
| ", " + | ||
| this._roundA + | ||
| ")"; | ||
| }, | ||
| toPercentageRgb: function () { | ||
| return { | ||
| r: mathRound(bound01(this._r, 255) * 100) + "%", | ||
| g: mathRound(bound01(this._g, 255) * 100) + "%", | ||
| b: mathRound(bound01(this._b, 255) * 100) + "%", | ||
| a: this._a, | ||
| }; | ||
| }, | ||
| toPercentageRgbString: function () { | ||
| return this._a == 1 | ||
| ? "rgb(" + | ||
| mathRound(bound01(this._r, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._g, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._b, 255) * 100) + | ||
| "%)" | ||
| : "rgba(" + | ||
| mathRound(bound01(this._r, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._g, 255) * 100) + | ||
| "%, " + | ||
| mathRound(bound01(this._b, 255) * 100) + | ||
| "%, " + | ||
| this._roundA + | ||
| ")"; | ||
| }, | ||
| toName: function () { | ||
| if (this._a === 0) { | ||
| return "transparent"; | ||
| } | ||
| if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} | ||
| if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} | ||
| if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} | ||
| return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); | ||
| }, | ||
| setAlpha: function(value) { | ||
| this._a = boundAlpha(value); | ||
| this._roundA = mathRound(100*this._a) / 100; | ||
| return this; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHsvString: function() { | ||
| var hsv = rgbToHsv(this._r, this._g, this._b); | ||
| var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); | ||
| return (this._a == 1) ? | ||
| "hsv(" + h + ", " + s + "%, " + v + "%)" : | ||
| "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; | ||
| }, | ||
| 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 }; | ||
| }, | ||
| toHslString: function() { | ||
| var hsl = rgbToHsl(this._r, this._g, this._b); | ||
| var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); | ||
| return (this._a == 1) ? | ||
| "hsl(" + h + ", " + s + "%, " + l + "%)" : | ||
| "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; | ||
| }, | ||
| toHex: function(allow3Char) { | ||
| return rgbToHex(this._r, this._g, this._b, allow3Char); | ||
| }, | ||
| toHexString: function(allow3Char) { | ||
| return '#' + this.toHex(allow3Char); | ||
| }, | ||
| toHex8: function(allow4Char) { | ||
| return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); | ||
| }, | ||
| toHex8String: function(allow4Char) { | ||
| return '#' + this.toHex8(allow4Char); | ||
| }, | ||
| toRgb: function() { | ||
| return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; | ||
| }, | ||
| toRgbString: function() { | ||
| return (this._a == 1) ? | ||
| "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : | ||
| "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; | ||
| }, | ||
| toPercentageRgb: function() { | ||
| return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; | ||
| }, | ||
| toPercentageRgbString: function() { | ||
| return (this._a == 1) ? | ||
| "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : | ||
| "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; | ||
| }, | ||
| toName: function() { | ||
| if (this._a === 0) { | ||
| return "transparent"; | ||
| } | ||
| if (this._a < 1) { | ||
| return false; | ||
| } | ||
| if (this._a < 1) { | ||
| return false; | ||
| } | ||
| return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; | ||
| }, | ||
| toFilter: function (secondColor) { | ||
| var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a); | ||
| var secondHex8String = hex8String; | ||
| var gradientType = this._gradientType ? "GradientType = 1, " : ""; | ||
| return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; | ||
| }, | ||
| toFilter: function(secondColor) { | ||
| var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); | ||
| var secondHex8String = hex8String; | ||
| var gradientType = this._gradientType ? "GradientType = 1, " : ""; | ||
| if (secondColor) { | ||
| var s = tinycolor(secondColor); | ||
| secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a); | ||
| } | ||
| if (secondColor) { | ||
| var s = tinycolor(secondColor); | ||
| secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); | ||
| } | ||
| return ( | ||
| "progid:DXImageTransform.Microsoft.gradient(" + | ||
| gradientType + | ||
| "startColorstr=" + | ||
| hex8String + | ||
| ",endColorstr=" + | ||
| secondHex8String + | ||
| ")" | ||
| ); | ||
| }, | ||
| toString: function (format) { | ||
| var formatSet = !!format; | ||
| format = format || this._format; | ||
| return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; | ||
| }, | ||
| toString: function(format) { | ||
| var formatSet = !!format; | ||
| format = format || this._format; | ||
| var formattedString = false; | ||
| var hasAlpha = this._a < 1 && this._a >= 0; | ||
| var needsAlphaFormat = | ||
| !formatSet && | ||
| hasAlpha && | ||
| (format === "hex" || | ||
| format === "hex6" || | ||
| format === "hex3" || | ||
| format === "hex4" || | ||
| format === "hex8" || | ||
| format === "name"); | ||
| var formattedString = false; | ||
| var hasAlpha = this._a < 1 && this._a >= 0; | ||
| var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || 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(); | ||
| } | ||
| 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(); | ||
| }, | ||
| clone: function () { | ||
| return tinycolor(this.toString()); | ||
| }, | ||
| return formattedString || this.toHexString(); | ||
| }, | ||
| clone: function() { | ||
| return tinycolor(this.toString()); | ||
| }, | ||
| _applyModification: function (fn, args) { | ||
| var color = fn.apply(null, [this].concat([].slice.call(args))); | ||
| this._r = color._r; | ||
| this._g = color._g; | ||
| this._b = color._b; | ||
| this.setAlpha(color._a); | ||
| return this; | ||
| }, | ||
| lighten: function () { | ||
| return this._applyModification(lighten, arguments); | ||
| }, | ||
| brighten: function () { | ||
| return this._applyModification(brighten, arguments); | ||
| }, | ||
| darken: function () { | ||
| return this._applyModification(darken, arguments); | ||
| }, | ||
| desaturate: function () { | ||
| return this._applyModification(desaturate, arguments); | ||
| }, | ||
| saturate: function () { | ||
| return this._applyModification(saturate, arguments); | ||
| }, | ||
| greyscale: function () { | ||
| return this._applyModification(greyscale, arguments); | ||
| }, | ||
| spin: function () { | ||
| return this._applyModification(spin, arguments); | ||
| }, | ||
| _applyModification: function(fn, args) { | ||
| var color = fn.apply(null, [this].concat([].slice.call(args))); | ||
| this._r = color._r; | ||
| this._g = color._g; | ||
| this._b = color._b; | ||
| this.setAlpha(color._a); | ||
| return this; | ||
| }, | ||
| lighten: function() { | ||
| return this._applyModification(lighten, arguments); | ||
| }, | ||
| brighten: function() { | ||
| return this._applyModification(brighten, arguments); | ||
| }, | ||
| darken: function() { | ||
| return this._applyModification(darken, arguments); | ||
| }, | ||
| desaturate: function() { | ||
| return this._applyModification(desaturate, arguments); | ||
| }, | ||
| saturate: function() { | ||
| return this._applyModification(saturate, arguments); | ||
| }, | ||
| greyscale: function() { | ||
| return this._applyModification(greyscale, arguments); | ||
| }, | ||
| spin: function() { | ||
| return this._applyModification(spin, arguments); | ||
| }, | ||
| _applyCombination: function (fn, args) { | ||
| return fn.apply(null, [this].concat([].slice.call(args))); | ||
| }, | ||
| analogous: function () { | ||
| return this._applyCombination(analogous, arguments); | ||
| }, | ||
| complement: function () { | ||
| return this._applyCombination(complement, arguments); | ||
| }, | ||
| monochromatic: function () { | ||
| return this._applyCombination(monochromatic, arguments); | ||
| }, | ||
| splitcomplement: function () { | ||
| return this._applyCombination(splitcomplement, arguments); | ||
| }, | ||
| triad: function () { | ||
| return this._applyCombination(triad, arguments); | ||
| }, | ||
| tetrad: function () { | ||
| return this._applyCombination(tetrad, arguments); | ||
| }, | ||
| }; | ||
| _applyCombination: function(fn, args) { | ||
| return fn.apply(null, [this].concat([].slice.call(args))); | ||
| }, | ||
| analogous: function() { | ||
| return this._applyCombination(analogous, arguments); | ||
| }, | ||
| complement: function() { | ||
| return this._applyCombination(complement, arguments); | ||
| }, | ||
| monochromatic: function() { | ||
| return this._applyCombination(monochromatic, arguments); | ||
| }, | ||
| splitcomplement: function() { | ||
| return this._applyCombination(splitcomplement, arguments); | ||
| }, | ||
| triad: function() { | ||
| return this._applyCombination(triad, arguments); | ||
| }, | ||
| tetrad: function() { | ||
| return this._applyCombination(tetrad, arguments); | ||
| // If input is an object, force 1 into "1.0" to handle ratios properly | ||
| // String input requires "1.0" as input, so 1 will be treated as 1 | ||
| tinycolor.fromRatio = function (color, opts) { | ||
| if (typeof color == "object") { | ||
| var newColor = {}; | ||
| for (var i in color) { | ||
| if (color.hasOwnProperty(i)) { | ||
| if (i === "a") { | ||
| newColor[i] = color[i]; | ||
| } else { | ||
| newColor[i] = convertToPercentage(color[i]); | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| color = newColor; | ||
| } | ||
| // If input is an object, force 1 into "1.0" to handle ratios properly | ||
| // String input requires "1.0" as input, so 1 will be treated as 1 | ||
| tinycolor.fromRatio = function(color, opts) { | ||
| if (typeof color == "object") { | ||
| var newColor = {}; | ||
| for (var i in color) { | ||
| if (color.hasOwnProperty(i)) { | ||
| if (i === "a") { | ||
| newColor[i] = color[i]; | ||
| } | ||
| else { | ||
| newColor[i] = convertToPercentage(color[i]); | ||
| } | ||
| } | ||
| } | ||
| color = newColor; | ||
| } | ||
| return tinycolor(color, opts); | ||
| }; | ||
| return tinycolor(color, opts); | ||
| }; | ||
| // Given a string or object, convert that input to RGB | ||
| // Possible string inputs: | ||
| // | ||
| // "red" | ||
| // "#f00" or "f00" | ||
| // "#ff0000" or "ff0000" | ||
| // "#ff000000" or "ff000000" | ||
| // "rgb 255 0 0" or "rgb (255, 0, 0)" | ||
| // "rgb 1.0 0 0" or "rgb (1, 0, 0)" | ||
| // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" | ||
| // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" | ||
| // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" | ||
| // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" | ||
| // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" | ||
| // | ||
| function inputToRGB(color) { | ||
| var rgb = { r: 0, g: 0, b: 0 }; | ||
| var a = 1; | ||
| var s = null; | ||
| var v = null; | ||
| var l = null; | ||
| var ok = false; | ||
| var format = false; | ||
| // Given a string or object, convert that input to RGB | ||
| // Possible string inputs: | ||
| // | ||
| // "red" | ||
| // "#f00" or "f00" | ||
| // "#ff0000" or "ff0000" | ||
| // "#ff000000" or "ff000000" | ||
| // "rgb 255 0 0" or "rgb (255, 0, 0)" | ||
| // "rgb 1.0 0 0" or "rgb (1, 0, 0)" | ||
| // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" | ||
| // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" | ||
| // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" | ||
| // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" | ||
| // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" | ||
| // | ||
| function inputToRGB(color) { | ||
| if (typeof color == "string") { | ||
| color = stringInputToObject(color); | ||
| } | ||
| var rgb = { r: 0, g: 0, b: 0 }; | ||
| var a = 1; | ||
| var s = null; | ||
| var v = null; | ||
| var l = null; | ||
| var ok = false; | ||
| var format = false; | ||
| if (typeof color == "object") { | ||
| if ( | ||
| isValidCSSUnit(color.r) && | ||
| isValidCSSUnit(color.g) && | ||
| isValidCSSUnit(color.b) | ||
| ) { | ||
| rgb = rgbToRgb(color.r, color.g, color.b); | ||
| ok = true; | ||
| format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; | ||
| } else if ( | ||
| isValidCSSUnit(color.h) && | ||
| isValidCSSUnit(color.s) && | ||
| isValidCSSUnit(color.v) | ||
| ) { | ||
| s = convertToPercentage(color.s); | ||
| v = convertToPercentage(color.v); | ||
| rgb = hsvToRgb(color.h, s, v); | ||
| ok = true; | ||
| format = "hsv"; | ||
| } else if ( | ||
| isValidCSSUnit(color.h) && | ||
| isValidCSSUnit(color.s) && | ||
| isValidCSSUnit(color.l) | ||
| ) { | ||
| s = convertToPercentage(color.s); | ||
| l = convertToPercentage(color.l); | ||
| rgb = hslToRgb(color.h, s, l); | ||
| ok = true; | ||
| format = "hsl"; | ||
| } | ||
| if (typeof color == "string") { | ||
| color = stringInputToObject(color); | ||
| } | ||
| if (color.hasOwnProperty("a")) { | ||
| a = color.a; | ||
| } | ||
| } | ||
| if (typeof color == "object") { | ||
| if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { | ||
| rgb = rgbToRgb(color.r, color.g, color.b); | ||
| ok = true; | ||
| format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; | ||
| } | ||
| else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { | ||
| s = convertToPercentage(color.s); | ||
| v = convertToPercentage(color.v); | ||
| rgb = hsvToRgb(color.h, s, v); | ||
| ok = true; | ||
| format = "hsv"; | ||
| } | ||
| else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { | ||
| s = convertToPercentage(color.s); | ||
| l = convertToPercentage(color.l); | ||
| rgb = hslToRgb(color.h, s, l); | ||
| ok = true; | ||
| format = "hsl"; | ||
| } | ||
| a = boundAlpha(a); | ||
| if (color.hasOwnProperty("a")) { | ||
| a = color.a; | ||
| } | ||
| } | ||
| return { | ||
| ok: ok, | ||
| format: color.format || format, | ||
| r: mathMin(255, mathMax(rgb.r, 0)), | ||
| g: mathMin(255, mathMax(rgb.g, 0)), | ||
| b: mathMin(255, mathMax(rgb.b, 0)), | ||
| a: a, | ||
| }; | ||
| } | ||
| a = boundAlpha(a); | ||
| // Conversion Functions | ||
| // -------------------- | ||
| return { | ||
| ok: ok, | ||
| format: color.format || format, | ||
| r: mathMin(255, mathMax(rgb.r, 0)), | ||
| g: mathMin(255, mathMax(rgb.g, 0)), | ||
| b: mathMin(255, mathMax(rgb.b, 0)), | ||
| a: a | ||
| }; | ||
| } | ||
| // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: | ||
| // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript> | ||
| // `rgbToRgb` | ||
| // Handle bounds / percentage checking to conform to CSS color spec | ||
| // <http://www.w3.org/TR/css3-color/> | ||
| // *Assumes:* r, g, b in [0, 255] or [0, 1] | ||
| // *Returns:* { r, g, b } in [0, 255] | ||
| function rgbToRgb(r, g, b) { | ||
| return { | ||
| r: bound01(r, 255) * 255, | ||
| g: bound01(g, 255) * 255, | ||
| b: bound01(b, 255) * 255, | ||
| }; | ||
| } | ||
| // Conversion Functions | ||
| // -------------------- | ||
| // `rgbToHsl` | ||
| // Converts an RGB color value to HSL. | ||
| // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] | ||
| // *Returns:* { h, s, l } in [0,1] | ||
| function rgbToHsl(r, g, b) { | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: | ||
| // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript> | ||
| var max = mathMax(r, g, b), | ||
| min = mathMin(r, g, b); | ||
| var h, | ||
| s, | ||
| l = (max + min) / 2; | ||
| // `rgbToRgb` | ||
| // Handle bounds / percentage checking to conform to CSS color spec | ||
| // <http://www.w3.org/TR/css3-color/> | ||
| // *Assumes:* r, g, b in [0, 255] or [0, 1] | ||
| // *Returns:* { r, g, b } in [0, 255] | ||
| function rgbToRgb(r, g, b){ | ||
| return { | ||
| r: bound01(r, 255) * 255, | ||
| g: bound01(g, 255) * 255, | ||
| b: bound01(b, 255) * 255 | ||
| }; | ||
| if (max == min) { | ||
| h = s = 0; // achromatic | ||
| } else { | ||
| var d = max - min; | ||
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | ||
| switch (max) { | ||
| case r: | ||
| h = (g - b) / d + (g < b ? 6 : 0); | ||
| break; | ||
| case g: | ||
| h = (b - r) / d + 2; | ||
| break; | ||
| case b: | ||
| h = (r - g) / d + 4; | ||
| break; | ||
| } | ||
| h /= 6; | ||
| } | ||
| // `rgbToHsl` | ||
| // Converts an RGB color value to HSL. | ||
| // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] | ||
| // *Returns:* { h, s, l } in [0,1] | ||
| function rgbToHsl(r, g, b) { | ||
| return { h: h, s: s, l: l }; | ||
| } | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| // `hslToRgb` | ||
| // Converts an HSL color value to RGB. | ||
| // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hslToRgb(h, s, l) { | ||
| var r, g, b; | ||
| var max = mathMax(r, g, b), min = mathMin(r, g, b); | ||
| var h, s, l = (max + min) / 2; | ||
| h = bound01(h, 360); | ||
| s = bound01(s, 100); | ||
| l = bound01(l, 100); | ||
| if(max == min) { | ||
| h = s = 0; // achromatic | ||
| } | ||
| else { | ||
| var d = max - min; | ||
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | ||
| switch(max) { | ||
| case r: h = (g - b) / d + (g < b ? 6 : 0); break; | ||
| case g: h = (b - r) / d + 2; break; | ||
| case b: h = (r - g) / d + 4; break; | ||
| } | ||
| function hue2rgb(p, q, t) { | ||
| if (t < 0) t += 1; | ||
| if (t > 1) t -= 1; | ||
| if (t < 1 / 6) return p + (q - p) * 6 * t; | ||
| if (t < 1 / 2) return q; | ||
| if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; | ||
| return p; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, l: l }; | ||
| if (s === 0) { | ||
| r = g = b = l; // achromatic | ||
| } else { | ||
| var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | ||
| var p = 2 * l - q; | ||
| r = hue2rgb(p, q, h + 1 / 3); | ||
| g = hue2rgb(p, q, h); | ||
| b = hue2rgb(p, q, h - 1 / 3); | ||
| } | ||
| // `hslToRgb` | ||
| // Converts an HSL color value to RGB. | ||
| // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hslToRgb(h, s, l) { | ||
| var r, g, b; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| } | ||
| h = bound01(h, 360); | ||
| s = bound01(s, 100); | ||
| l = bound01(l, 100); | ||
| // `rgbToHsv` | ||
| // Converts an RGB color value to HSV | ||
| // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] | ||
| // *Returns:* { h, s, v } in [0,1] | ||
| function rgbToHsv(r, g, b) { | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| function hue2rgb(p, q, t) { | ||
| if(t < 0) t += 1; | ||
| if(t > 1) t -= 1; | ||
| if(t < 1/6) return p + (q - p) * 6 * t; | ||
| if(t < 1/2) return q; | ||
| if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; | ||
| return p; | ||
| } | ||
| var max = mathMax(r, g, b), | ||
| min = mathMin(r, g, b); | ||
| var h, | ||
| s, | ||
| v = max; | ||
| if(s === 0) { | ||
| r = g = b = l; // achromatic | ||
| } | ||
| else { | ||
| var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | ||
| var p = 2 * l - q; | ||
| r = hue2rgb(p, q, h + 1/3); | ||
| g = hue2rgb(p, q, h); | ||
| b = hue2rgb(p, q, h - 1/3); | ||
| } | ||
| var d = max - min; | ||
| s = max === 0 ? 0 : d / max; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| if (max == min) { | ||
| h = 0; // achromatic | ||
| } else { | ||
| switch (max) { | ||
| case r: | ||
| h = (g - b) / d + (g < b ? 6 : 0); | ||
| break; | ||
| case g: | ||
| h = (b - r) / d + 2; | ||
| break; | ||
| case b: | ||
| h = (r - g) / d + 4; | ||
| break; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, v: v }; | ||
| } | ||
| // `rgbToHsv` | ||
| // Converts an RGB color value to HSV | ||
| // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] | ||
| // *Returns:* { h, s, v } in [0,1] | ||
| function rgbToHsv(r, g, b) { | ||
| // `hsvToRgb` | ||
| // Converts an HSV color value to RGB. | ||
| // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hsvToRgb(h, s, v) { | ||
| h = bound01(h, 360) * 6; | ||
| s = bound01(s, 100); | ||
| v = bound01(v, 100); | ||
| r = bound01(r, 255); | ||
| g = bound01(g, 255); | ||
| b = bound01(b, 255); | ||
| var i = Math.floor(h), | ||
| f = h - i, | ||
| p = v * (1 - s), | ||
| q = v * (1 - f * s), | ||
| t = v * (1 - (1 - f) * s), | ||
| mod = i % 6, | ||
| r = [v, q, p, p, t, v][mod], | ||
| g = [t, v, v, q, p, p][mod], | ||
| b = [p, p, t, v, v, q][mod]; | ||
| var max = mathMax(r, g, b), min = mathMin(r, g, b); | ||
| var h, s, v = max; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| } | ||
| var d = max - min; | ||
| s = max === 0 ? 0 : d / max; | ||
| // `rgbToHex` | ||
| // Converts an RGB color to hex | ||
| // Assumes r, g, and b are contained in the set [0, 255] | ||
| // Returns a 3 or 6 character hex | ||
| function rgbToHex(r, g, b, allow3Char) { | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| ]; | ||
| if(max == min) { | ||
| h = 0; // achromatic | ||
| } | ||
| else { | ||
| switch(max) { | ||
| case r: h = (g - b) / d + (g < b ? 6 : 0); break; | ||
| case g: h = (b - r) / d + 2; break; | ||
| case b: h = (r - g) / d + 4; break; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { h: h, s: s, v: v }; | ||
| // Return a 3 character hex if possible | ||
| if ( | ||
| allow3Char && | ||
| hex[0].charAt(0) == hex[0].charAt(1) && | ||
| hex[1].charAt(0) == hex[1].charAt(1) && | ||
| hex[2].charAt(0) == hex[2].charAt(1) | ||
| ) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); | ||
| } | ||
| // `hsvToRgb` | ||
| // Converts an HSV color value to RGB. | ||
| // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] | ||
| // *Returns:* { r, g, b } in the set [0, 255] | ||
| function hsvToRgb(h, s, v) { | ||
| return hex.join(""); | ||
| } | ||
| h = bound01(h, 360) * 6; | ||
| s = bound01(s, 100); | ||
| v = bound01(v, 100); | ||
| // `rgbaToHex` | ||
| // Converts an RGBA color plus alpha transparency to hex | ||
| // Assumes r, g, b are contained in the set [0, 255] and | ||
| // a in [0, 1]. Returns a 4 or 8 character rgba hex | ||
| function rgbaToHex(r, g, b, a, allow4Char) { | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| pad2(convertDecimalToHex(a)), | ||
| ]; | ||
| var i = Math.floor(h), | ||
| f = h - i, | ||
| p = v * (1 - s), | ||
| q = v * (1 - f * s), | ||
| t = v * (1 - (1 - f) * s), | ||
| mod = i % 6, | ||
| r = [v, q, p, p, t, v][mod], | ||
| g = [t, v, v, q, p, p][mod], | ||
| b = [p, p, t, v, v, q][mod]; | ||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| // Return a 4 character hex if possible | ||
| if ( | ||
| allow4Char && | ||
| hex[0].charAt(0) == hex[0].charAt(1) && | ||
| hex[1].charAt(0) == hex[1].charAt(1) && | ||
| hex[2].charAt(0) == hex[2].charAt(1) && | ||
| hex[3].charAt(0) == hex[3].charAt(1) | ||
| ) { | ||
| return ( | ||
| hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0) | ||
| ); | ||
| } | ||
| // `rgbToHex` | ||
| // Converts an RGB color to hex | ||
| // Assumes r, g, and b are contained in the set [0, 255] | ||
| // Returns a 3 or 6 character hex | ||
| function rgbToHex(r, g, b, allow3Char) { | ||
| return hex.join(""); | ||
| } | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)) | ||
| ]; | ||
| // `rgbaToArgbHex` | ||
| // Converts an RGBA color to an ARGB Hex8 string | ||
| // Rarely used, but required for "toFilter()" | ||
| function rgbaToArgbHex(r, g, b, a) { | ||
| var hex = [ | ||
| pad2(convertDecimalToHex(a)), | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| ]; | ||
| // Return a 3 character hex if possible | ||
| if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); | ||
| } | ||
| return hex.join(""); | ||
| } | ||
| return hex.join(""); | ||
| } | ||
| // `equals` | ||
| // Can be called with any tinycolor input | ||
| tinycolor.equals = function (color1, color2) { | ||
| if (!color1 || !color2) return false; | ||
| return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); | ||
| }; | ||
| // `rgbaToHex` | ||
| // Converts an RGBA color plus alpha transparency to hex | ||
| // Assumes r, g, b are contained in the set [0, 255] and | ||
| // a in [0, 1]. Returns a 4 or 8 character rgba hex | ||
| function rgbaToHex(r, g, b, a, allow4Char) { | ||
| tinycolor.random = function () { | ||
| return tinycolor.fromRatio({ | ||
| r: mathRandom(), | ||
| g: mathRandom(), | ||
| b: mathRandom(), | ||
| }); | ||
| }; | ||
| var hex = [ | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)), | ||
| pad2(convertDecimalToHex(a)) | ||
| ]; | ||
| // Modification Functions | ||
| // ---------------------- | ||
| // Thanks to less.js for some of the basics here | ||
| // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js> | ||
| // Return a 4 character hex if possible | ||
| if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { | ||
| return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); | ||
| } | ||
| function desaturate(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s -= amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| return hex.join(""); | ||
| } | ||
| function saturate(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s += amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| // `rgbaToArgbHex` | ||
| // Converts an RGBA color to an ARGB Hex8 string | ||
| // Rarely used, but required for "toFilter()" | ||
| function rgbaToArgbHex(r, g, b, a) { | ||
| function greyscale(color) { | ||
| return tinycolor(color).desaturate(100); | ||
| } | ||
| var hex = [ | ||
| pad2(convertDecimalToHex(a)), | ||
| pad2(mathRound(r).toString(16)), | ||
| pad2(mathRound(g).toString(16)), | ||
| pad2(mathRound(b).toString(16)) | ||
| ]; | ||
| function lighten(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l += amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| } | ||
| return hex.join(""); | ||
| } | ||
| function brighten(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var rgb = tinycolor(color).toRgb(); | ||
| rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * -(amount / 100)))); | ||
| rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * -(amount / 100)))); | ||
| rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * -(amount / 100)))); | ||
| return tinycolor(rgb); | ||
| } | ||
| // `equals` | ||
| // Can be called with any tinycolor input | ||
| tinycolor.equals = function (color1, color2) { | ||
| if (!color1 || !color2) { return false; } | ||
| return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); | ||
| }; | ||
| function darken(color, amount) { | ||
| amount = amount === 0 ? 0 : amount || 10; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l -= amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| } | ||
| tinycolor.random = function() { | ||
| return tinycolor.fromRatio({ | ||
| r: mathRandom(), | ||
| g: mathRandom(), | ||
| b: mathRandom() | ||
| }); | ||
| }; | ||
| // 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. | ||
| function spin(color, amount) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var hue = (hsl.h + amount) % 360; | ||
| hsl.h = hue < 0 ? 360 + hue : hue; | ||
| return tinycolor(hsl); | ||
| } | ||
| // Combination Functions | ||
| // --------------------- | ||
| // Thanks to jQuery xColor for some of the ideas behind these | ||
| // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js> | ||
| // Modification Functions | ||
| // ---------------------- | ||
| // Thanks to less.js for some of the basics here | ||
| // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js> | ||
| function complement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.h = (hsl.h + 180) % 360; | ||
| return tinycolor(hsl); | ||
| } | ||
| function desaturate(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s -= amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| function triad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function saturate(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.s += amount / 100; | ||
| hsl.s = clamp01(hsl.s); | ||
| return tinycolor(hsl); | ||
| } | ||
| function tetrad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function greyscale(color) { | ||
| return tinycolor(color).desaturate(100); | ||
| } | ||
| function splitcomplement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }), | ||
| ]; | ||
| } | ||
| function lighten (color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l += amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| } | ||
| function analogous(color, results, slices) { | ||
| results = results || 6; | ||
| slices = slices || 30; | ||
| function brighten(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var rgb = tinycolor(color).toRgb(); | ||
| rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); | ||
| rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); | ||
| rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); | ||
| return tinycolor(rgb); | ||
| } | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var part = 360 / slices; | ||
| var ret = [tinycolor(color)]; | ||
| function darken (color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.l -= amount / 100; | ||
| hsl.l = clamp01(hsl.l); | ||
| return tinycolor(hsl); | ||
| for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results; ) { | ||
| hsl.h = (hsl.h + part) % 360; | ||
| ret.push(tinycolor(hsl)); | ||
| } | ||
| return ret; | ||
| } | ||
| // 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. | ||
| function spin(color, amount) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var hue = (hsl.h + amount) % 360; | ||
| hsl.h = hue < 0 ? 360 + hue : hue; | ||
| return tinycolor(hsl); | ||
| function monochromatic(color, results) { | ||
| results = results || 6; | ||
| var hsv = tinycolor(color).toHsv(); | ||
| var h = hsv.h, | ||
| s = hsv.s, | ||
| v = hsv.v; | ||
| var ret = []; | ||
| var modification = 1 / results; | ||
| while (results--) { | ||
| ret.push(tinycolor({ h: h, s: s, v: v })); | ||
| v = (v + modification) % 1; | ||
| } | ||
| // Combination Functions | ||
| // --------------------- | ||
| // Thanks to jQuery xColor for some of the ideas behind these | ||
| // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js> | ||
| return ret; | ||
| } | ||
| function complement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.h = (hsl.h + 180) % 360; | ||
| return tinycolor(hsl); | ||
| } | ||
| // Utility Functions | ||
| // --------------------- | ||
| function triad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) | ||
| ]; | ||
| } | ||
| tinycolor.mix = function (color1, color2, amount) { | ||
| amount = amount === 0 ? 0 : amount || 50; | ||
| function tetrad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), | ||
| tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) | ||
| ]; | ||
| } | ||
| var rgb1 = tinycolor(color1).toRgb(); | ||
| var rgb2 = tinycolor(color2).toRgb(); | ||
| function splitcomplement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
| return [ | ||
| tinycolor(color), | ||
| tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), | ||
| tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) | ||
| ]; | ||
| } | ||
| var p = amount / 100; | ||
| function analogous(color, results, slices) { | ||
| results = results || 6; | ||
| slices = slices || 30; | ||
| 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, | ||
| }; | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var part = 360 / slices; | ||
| var ret = [tinycolor(color)]; | ||
| return tinycolor(rgba); | ||
| }; | ||
| for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { | ||
| hsl.h = (hsl.h + part) % 360; | ||
| ret.push(tinycolor(hsl)); | ||
| } | ||
| return ret; | ||
| } | ||
| // Readability Functions | ||
| // --------------------- | ||
| // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2) | ||
| function monochromatic(color, results) { | ||
| results = results || 6; | ||
| var hsv = tinycolor(color).toHsv(); | ||
| var h = hsv.h, s = hsv.s, v = hsv.v; | ||
| var ret = []; | ||
| var modification = 1 / results; | ||
| // `contrast` | ||
| // Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2) | ||
| tinycolor.readability = function (color1, color2) { | ||
| var c1 = tinycolor(color1); | ||
| var c2 = tinycolor(color2); | ||
| return ( | ||
| (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / | ||
| (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05) | ||
| ); | ||
| }; | ||
| while (results--) { | ||
| ret.push(tinycolor({ h: h, s: s, v: v})); | ||
| v = (v + modification) % 1; | ||
| } | ||
| // `isReadable` | ||
| // Ensure that foreground and background color combinations meet WCAG2 guidelines. | ||
| // The third argument is an optional Object. | ||
| // the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA'; | ||
| // the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'. | ||
| // If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}. | ||
| return ret; | ||
| } | ||
| // *Example* | ||
| // tinycolor.isReadable("#000", "#111") => false | ||
| // tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false | ||
| tinycolor.isReadable = function (color1, color2, wcag2) { | ||
| var readability = tinycolor.readability(color1, color2); | ||
| var wcag2Parms, out; | ||
| // Utility Functions | ||
| // --------------------- | ||
| out = false; | ||
| tinycolor.mix = function(color1, color2, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 50); | ||
| wcag2Parms = validateWCAG2Parms(wcag2); | ||
| switch (wcag2Parms.level + wcag2Parms.size) { | ||
| case "AAsmall": | ||
| case "AAAlarge": | ||
| out = readability >= 4.5; | ||
| break; | ||
| case "AAlarge": | ||
| out = readability >= 3; | ||
| break; | ||
| case "AAAsmall": | ||
| out = readability >= 7; | ||
| break; | ||
| } | ||
| return out; | ||
| }; | ||
| var rgb1 = tinycolor(color1).toRgb(); | ||
| var rgb2 = tinycolor(color2).toRgb(); | ||
| // `mostReadable` | ||
| // 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. | ||
| // *Example* | ||
| // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" | ||
| // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" | ||
| tinycolor.mostReadable = function (baseColor, colorList, args) { | ||
| var bestColor = null; | ||
| var bestScore = 0; | ||
| var readability; | ||
| var includeFallbackColors, level, size; | ||
| args = args || {}; | ||
| includeFallbackColors = args.includeFallbackColors; | ||
| level = args.level; | ||
| size = args.size; | ||
| var p = amount / 100; | ||
| for (var i = 0; i < colorList.length; i++) { | ||
| readability = tinycolor.readability(baseColor, colorList[i]); | ||
| if (readability > bestScore) { | ||
| bestScore = readability; | ||
| bestColor = tinycolor(colorList[i]); | ||
| } | ||
| } | ||
| 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 | ||
| }; | ||
| if ( | ||
| tinycolor.isReadable(baseColor, bestColor, { | ||
| level: level, | ||
| size: size, | ||
| }) || | ||
| !includeFallbackColors | ||
| ) { | ||
| return bestColor; | ||
| } else { | ||
| args.includeFallbackColors = false; | ||
| return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args); | ||
| } | ||
| }; | ||
| return tinycolor(rgba); | ||
| }; | ||
| // Big List of Colors | ||
| // ------------------ | ||
| // <http://www.w3.org/TR/css3-color/#svg-color> | ||
| var names = (tinycolor.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", | ||
| }); | ||
| // Make it easy to access colors via `hexNames[hex]` | ||
| var hexNames = (tinycolor.hexNames = flip(names)); | ||
| // Readability Functions | ||
| // --------------------- | ||
| // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2) | ||
| // Utilities | ||
| // --------- | ||
| // `contrast` | ||
| // Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2) | ||
| tinycolor.readability = function(color1, color2) { | ||
| var c1 = tinycolor(color1); | ||
| var c2 = tinycolor(color2); | ||
| return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05); | ||
| }; | ||
| // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` | ||
| function flip(o) { | ||
| var flipped = {}; | ||
| for (var i in o) { | ||
| if (o.hasOwnProperty(i)) { | ||
| flipped[o[i]] = i; | ||
| } | ||
| } | ||
| return flipped; | ||
| } | ||
| // `isReadable` | ||
| // Ensure that foreground and background color combinations meet WCAG2 guidelines. | ||
| // The third argument is an optional Object. | ||
| // the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA'; | ||
| // the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'. | ||
| // If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}. | ||
| // Return a valid alpha value [0,1] with all invalid values being set to 1 | ||
| function boundAlpha(a) { | ||
| a = parseFloat(a); | ||
| // *Example* | ||
| // tinycolor.isReadable("#000", "#111") => false | ||
| // tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false | ||
| tinycolor.isReadable = function(color1, color2, wcag2) { | ||
| var readability = tinycolor.readability(color1, color2); | ||
| var wcag2Parms, out; | ||
| if (isNaN(a) || a < 0 || a > 1) { | ||
| a = 1; | ||
| } | ||
| out = false; | ||
| return a; | ||
| } | ||
| wcag2Parms = validateWCAG2Parms(wcag2); | ||
| switch (wcag2Parms.level + wcag2Parms.size) { | ||
| case "AAsmall": | ||
| case "AAAlarge": | ||
| out = readability >= 4.5; | ||
| break; | ||
| case "AAlarge": | ||
| out = readability >= 3; | ||
| break; | ||
| case "AAAsmall": | ||
| out = readability >= 7; | ||
| break; | ||
| } | ||
| return out; | ||
| // Take input from [0, n] and return it as [0, 1] | ||
| function bound01(n, max) { | ||
| if (isOnePointZero(n)) n = "100%"; | ||
| }; | ||
| var processPercent = isPercentage(n); | ||
| n = mathMin(max, mathMax(0, parseFloat(n))); | ||
| // `mostReadable` | ||
| // 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. | ||
| // *Example* | ||
| // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" | ||
| // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" | ||
| // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" | ||
| tinycolor.mostReadable = function(baseColor, colorList, args) { | ||
| var bestColor = null; | ||
| var bestScore = 0; | ||
| var readability; | ||
| var includeFallbackColors, level, size ; | ||
| args = args || {}; | ||
| includeFallbackColors = args.includeFallbackColors ; | ||
| level = args.level; | ||
| size = args.size; | ||
| // Automatically convert percentage into number | ||
| if (processPercent) { | ||
| n = parseInt(n * max, 10) / 100; | ||
| } | ||
| for (var i= 0; i < colorList.length ; i++) { | ||
| readability = tinycolor.readability(baseColor, colorList[i]); | ||
| if (readability > bestScore) { | ||
| bestScore = readability; | ||
| bestColor = tinycolor(colorList[i]); | ||
| } | ||
| } | ||
| // Handle floating point rounding errors | ||
| if (Math.abs(n - max) < 0.000001) { | ||
| return 1; | ||
| } | ||
| if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { | ||
| return bestColor; | ||
| } | ||
| else { | ||
| args.includeFallbackColors=false; | ||
| return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); | ||
| } | ||
| }; | ||
| // Convert into [0, 1] range if it isn't already | ||
| return (n % max) / parseFloat(max); | ||
| } | ||
| // Force a number between 0 and 1 | ||
| function clamp01(val) { | ||
| return mathMin(1, mathMax(0, val)); | ||
| } | ||
| // Big List of Colors | ||
| // ------------------ | ||
| // <http://www.w3.org/TR/css3-color/#svg-color> | ||
| var names = tinycolor.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" | ||
| }; | ||
| // Parse a base-16 hex value into a base-10 integer | ||
| function parseIntFromHex(val) { | ||
| return parseInt(val, 16); | ||
| } | ||
| // Make it easy to access colors via `hexNames[hex]` | ||
| var hexNames = tinycolor.hexNames = flip(names); | ||
| // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 | ||
| // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0> | ||
| function isOnePointZero(n) { | ||
| return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1; | ||
| } | ||
| // Check to see if string passed in is a percentage | ||
| function isPercentage(n) { | ||
| return typeof n === "string" && n.indexOf("%") != -1; | ||
| } | ||
| // Utilities | ||
| // --------- | ||
| // Force a hex value to have 2 characters | ||
| function pad2(c) { | ||
| return c.length == 1 ? "0" + c : "" + c; | ||
| } | ||
| // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` | ||
| function flip(o) { | ||
| var flipped = { }; | ||
| for (var i in o) { | ||
| if (o.hasOwnProperty(i)) { | ||
| flipped[o[i]] = i; | ||
| } | ||
| } | ||
| return flipped; | ||
| // Replace a decimal with it's percentage value | ||
| function convertToPercentage(n) { | ||
| if (n <= 1) { | ||
| n = n * 100 + "%"; | ||
| } | ||
| // Return a valid alpha value [0,1] with all invalid values being set to 1 | ||
| function boundAlpha(a) { | ||
| a = parseFloat(a); | ||
| return n; | ||
| } | ||
| if (isNaN(a) || a < 0 || a > 1) { | ||
| a = 1; | ||
| } | ||
| // Converts a decimal to a hex value | ||
| function convertDecimalToHex(d) { | ||
| return Math.round(parseFloat(d) * 255).toString(16); | ||
| } | ||
| // Converts a hex value to a decimal | ||
| function convertHexToDecimal(h) { | ||
| return parseIntFromHex(h) / 255; | ||
| } | ||
| return a; | ||
| } | ||
| var matchers = (function () { | ||
| // <http://www.w3.org/TR/css3-values/#integers> | ||
| var CSS_INTEGER = "[-\\+]?\\d+%?"; | ||
| // Take input from [0, n] and return it as [0, 1] | ||
| function bound01(n, max) { | ||
| if (isOnePointZero(n)) { n = "100%"; } | ||
| // <http://www.w3.org/TR/css3-values/#number-value> | ||
| var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; | ||
| var processPercent = isPercentage(n); | ||
| n = mathMin(max, mathMax(0, parseFloat(n))); | ||
| // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. | ||
| var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; | ||
| // Automatically convert percentage into number | ||
| if (processPercent) { | ||
| n = parseInt(n * max, 10) / 100; | ||
| } | ||
| // Actual matching. | ||
| // Parentheses and commas are optional, but not required. | ||
| // Whitespace can take the place of commas or opening paren | ||
| var PERMISSIVE_MATCH3 = | ||
| "[\\s|\\(]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")\\s*\\)?"; | ||
| var PERMISSIVE_MATCH4 = | ||
| "[\\s|\\(]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")[,|\\s]+(" + | ||
| CSS_UNIT + | ||
| ")\\s*\\)?"; | ||
| // Handle floating point rounding errors | ||
| if ((Math.abs(n - max) < 0.000001)) { | ||
| return 1; | ||
| } | ||
| return { | ||
| CSS_UNIT: new RegExp(CSS_UNIT), | ||
| rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), | ||
| rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), | ||
| hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), | ||
| hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), | ||
| hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), | ||
| hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), | ||
| hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| }; | ||
| })(); | ||
| // Convert into [0, 1] range if it isn't already | ||
| return (n % max) / parseFloat(max); | ||
| } | ||
| // `isValidCSSUnit` | ||
| // Take in a single string / number and check to see if it looks like a CSS unit | ||
| // (see `matchers` above for definition). | ||
| function isValidCSSUnit(color) { | ||
| return !!matchers.CSS_UNIT.exec(color); | ||
| } | ||
| // Force a number between 0 and 1 | ||
| function clamp01(val) { | ||
| return mathMin(1, mathMax(0, val)); | ||
| // `stringInputToObject` | ||
| // Permissive string parsing. Take in a number of formats, and output an object | ||
| // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` | ||
| function stringInputToObject(color) { | ||
| color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase(); | ||
| var named = false; | ||
| if (names[color]) { | ||
| color = names[color]; | ||
| named = true; | ||
| } else if (color == "transparent") { | ||
| return { r: 0, g: 0, b: 0, a: 0, format: "name" }; | ||
| } | ||
| // Parse a base-16 hex value into a base-10 integer | ||
| function parseIntFromHex(val) { | ||
| return parseInt(val, 16); | ||
| // Try to match string input using regular expressions. | ||
| // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] | ||
| // Just return an object and let the conversion functions handle that. | ||
| // This way the result will be the same whether the tinycolor is initialized with string or object. | ||
| var match; | ||
| if ((match = matchers.rgb.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3] }; | ||
| } | ||
| // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 | ||
| // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0> | ||
| function isOnePointZero(n) { | ||
| return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; | ||
| if ((match = matchers.rgba.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3], a: match[4] }; | ||
| } | ||
| // Check to see if string passed in is a percentage | ||
| function isPercentage(n) { | ||
| return typeof n === "string" && n.indexOf('%') != -1; | ||
| if ((match = matchers.hsl.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3] }; | ||
| } | ||
| // Force a hex value to have 2 characters | ||
| function pad2(c) { | ||
| return c.length == 1 ? '0' + c : '' + c; | ||
| if ((match = matchers.hsla.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3], a: match[4] }; | ||
| } | ||
| // Replace a decimal with it's percentage value | ||
| function convertToPercentage(n) { | ||
| if (n <= 1) { | ||
| n = (n * 100) + "%"; | ||
| } | ||
| return n; | ||
| if ((match = matchers.hsv.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3] }; | ||
| } | ||
| // Converts a decimal to a hex value | ||
| function convertDecimalToHex(d) { | ||
| return Math.round(parseFloat(d) * 255).toString(16); | ||
| if ((match = matchers.hsva.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3], a: match[4] }; | ||
| } | ||
| // Converts a hex value to a decimal | ||
| function convertHexToDecimal(h) { | ||
| return (parseIntFromHex(h) / 255); | ||
| if ((match = matchers.hex8.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| a: convertHexToDecimal(match[4]), | ||
| format: named ? "name" : "hex8", | ||
| }; | ||
| } | ||
| var matchers = (function() { | ||
| // <http://www.w3.org/TR/css3-values/#integers> | ||
| var CSS_INTEGER = "[-\\+]?\\d+%?"; | ||
| // <http://www.w3.org/TR/css3-values/#number-value> | ||
| var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; | ||
| // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. | ||
| var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; | ||
| // Actual matching. | ||
| // Parentheses and commas are optional, but not required. | ||
| // Whitespace can take the place of commas or opening paren | ||
| var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; | ||
| var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; | ||
| return { | ||
| CSS_UNIT: new RegExp(CSS_UNIT), | ||
| rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), | ||
| rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), | ||
| hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), | ||
| hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), | ||
| hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), | ||
| hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), | ||
| hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ | ||
| }; | ||
| })(); | ||
| // `isValidCSSUnit` | ||
| // Take in a single string / number and check to see if it looks like a CSS unit | ||
| // (see `matchers` above for definition). | ||
| function isValidCSSUnit(color) { | ||
| return !!matchers.CSS_UNIT.exec(color); | ||
| if ((match = matchers.hex6.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| format: named ? "name" : "hex", | ||
| }; | ||
| } | ||
| if ((match = matchers.hex4.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + "" + match[1]), | ||
| g: parseIntFromHex(match[2] + "" + match[2]), | ||
| b: parseIntFromHex(match[3] + "" + match[3]), | ||
| a: convertHexToDecimal(match[4] + "" + match[4]), | ||
| format: named ? "name" : "hex8", | ||
| }; | ||
| } | ||
| if ((match = matchers.hex3.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + "" + match[1]), | ||
| g: parseIntFromHex(match[2] + "" + match[2]), | ||
| b: parseIntFromHex(match[3] + "" + match[3]), | ||
| format: named ? "name" : "hex", | ||
| }; | ||
| } | ||
| // `stringInputToObject` | ||
| // Permissive string parsing. Take in a number of formats, and output an object | ||
| // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` | ||
| function stringInputToObject(color) { | ||
| return false; | ||
| } | ||
| color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase(); | ||
| var named = false; | ||
| if (names[color]) { | ||
| color = names[color]; | ||
| named = true; | ||
| } | ||
| else if (color == 'transparent') { | ||
| return { r: 0, g: 0, b: 0, a: 0, format: "name" }; | ||
| } | ||
| // Try to match string input using regular expressions. | ||
| // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] | ||
| // Just return an object and let the conversion functions handle that. | ||
| // This way the result will be the same whether the tinycolor is initialized with string or object. | ||
| var match; | ||
| if ((match = matchers.rgb.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3] }; | ||
| } | ||
| if ((match = matchers.rgba.exec(color))) { | ||
| return { r: match[1], g: match[2], b: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hsl.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3] }; | ||
| } | ||
| if ((match = matchers.hsla.exec(color))) { | ||
| return { h: match[1], s: match[2], l: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hsv.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3] }; | ||
| } | ||
| if ((match = matchers.hsva.exec(color))) { | ||
| return { h: match[1], s: match[2], v: match[3], a: match[4] }; | ||
| } | ||
| if ((match = matchers.hex8.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| a: convertHexToDecimal(match[4]), | ||
| format: named ? "name" : "hex8" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex6.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1]), | ||
| g: parseIntFromHex(match[2]), | ||
| b: parseIntFromHex(match[3]), | ||
| format: named ? "name" : "hex" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex4.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + '' + match[1]), | ||
| g: parseIntFromHex(match[2] + '' + match[2]), | ||
| b: parseIntFromHex(match[3] + '' + match[3]), | ||
| a: convertHexToDecimal(match[4] + '' + match[4]), | ||
| format: named ? "name" : "hex8" | ||
| }; | ||
| } | ||
| if ((match = matchers.hex3.exec(color))) { | ||
| return { | ||
| r: parseIntFromHex(match[1] + '' + match[1]), | ||
| g: parseIntFromHex(match[2] + '' + match[2]), | ||
| b: parseIntFromHex(match[3] + '' + match[3]), | ||
| format: named ? "name" : "hex" | ||
| }; | ||
| } | ||
| return false; | ||
| function validateWCAG2Parms(parms) { | ||
| // return valid WCAG2 parms for isReadable. | ||
| // If input parms are invalid, return {"level":"AA", "size":"small"} | ||
| var level, size; | ||
| parms = parms || { level: "AA", size: "small" }; | ||
| level = (parms.level || "AA").toUpperCase(); | ||
| size = (parms.size || "small").toLowerCase(); | ||
| if (level !== "AA" && level !== "AAA") { | ||
| level = "AA"; | ||
| } | ||
| function validateWCAG2Parms(parms) { | ||
| // return valid WCAG2 parms for isReadable. | ||
| // If input parms are invalid, return {"level":"AA", "size":"small"} | ||
| var level, size; | ||
| parms = parms || {"level":"AA", "size":"small"}; | ||
| level = (parms.level || "AA").toUpperCase(); | ||
| size = (parms.size || "small").toLowerCase(); | ||
| if (level !== "AA" && level !== "AAA") { | ||
| level = "AA"; | ||
| } | ||
| if (size !== "small" && size !== "large") { | ||
| size = "small"; | ||
| } | ||
| return {"level":level, "size":size}; | ||
| if (size !== "small" && size !== "large") { | ||
| size = "small"; | ||
| } | ||
| return { level: level, size: size }; | ||
| } | ||
| return tinycolor; | ||
| return tinycolor; | ||
| })); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by120.16%
607980
- Number of package files
- increased by64.71%
28
- Lines of code
- increased by47.21%
10771
- Number of low quality alerts
- decreased by-50%
1
No dependency changes