tinycolor2

<!DOCTYPE html> <html> <head> <title>tinycolor.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> tinycolor.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> TinyColor v0.9.17 https://github.com/bgrins/TinyColor 2013-08-10, Brian Grinstead, MIT License </td> <td class="code"> <div class="highlight"><pre>(function() { var trimLeft = /^[\s,#]+/, trimRight = /\s+$/, tinyCounter = 0, math = Math, mathRound = math.round, mathMin = math.min, mathMax = math.max, mathRandom = math.random; function tinycolor (color, opts) { color = (color) ? color : ''; opts = opts || { };</pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> If input is already a tinycolor, return itself </td> <td class="code"> <div class="highlight"><pre> if (typeof color == "object" && color.hasOwnProperty("_tc_id")) { return color; } var rgb = inputToRGB(color); var r = rgb.r, g = rgb.g, b = rgb.b, a = rgb.a, roundA = mathRound(100*a) / 100, format = opts.format || rgb.format;</pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> 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 <code>inputToRgb</code> </td> <td class="code"> <div class="highlight"><pre> if (r < 1) { r = mathRound(r); } if (g < 1) { g = mathRound(g); } if (b < 1) { b = mathRound(b); } return { ok: rgb.ok, format: format, _tc_id: tinyCounter++, alpha: a, getAlpha: function() { return a; }, setAlpha: function(value) { a = boundAlpha(value); roundA = mathRound(100*a) / 100; }, toHsv: function() { var hsv = rgbToHsv(r, g, b); return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: a }; }, toHsvString: function() { var hsv = rgbToHsv(r, g, b); var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); return (a == 1) ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, "+ roundA + ")"; }, toHsl: function() { var hsl = rgbToHsl(r, g, b); return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: a }; }, toHslString: function() { var hsl = rgbToHsl(r, g, b); var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); return (a == 1) ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, "+ roundA + ")"; }, toHex: function(allow3Char) { return rgbToHex(r, g, b, allow3Char); }, toHexString: function(allow3Char) { return '#' + this.toHex(allow3Char); }, toHex8: function() { return rgbaToHex(r, g, b, a); }, toHex8String: function() { return '#' + this.toHex8(); }, toRgb: function() { return { r: mathRound(r), g: mathRound(g), b: mathRound(b), a: a }; }, toRgbString: function() { return (a == 1) ? "rgb(" + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ")" : "rgba(" + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ", " + roundA + ")"; }, toPercentageRgb: function() { return { r: mathRound(bound01(r, 255) * 100) + "%", g: mathRound(bound01(g, 255) * 100) + "%", b: mathRound(bound01(b, 255) * 100) + "%", a: a }; }, toPercentageRgbString: function() { return (a == 1) ? "rgb(" + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%)" : "rgba(" + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%, " + roundA + ")"; }, toName: function() { if (a === 0) { return "transparent"; } return hexNames[rgbToHex(r, g, b, true)] || false; }, toFilter: function(secondColor) { var hex8String = '#' + rgbaToHex(r, g, b, a); var secondHex8String = hex8String; var gradientType = opts && opts.gradientType ? "GradientType = 1, " : ""; if (secondColor) { var s = tinycolor(secondColor); secondHex8String = s.toHex8String(); } return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; }, toString: function(format) { var formatSet = !!format; format = format || this.format; var formattedString = false; var hasAlphaAndFormatNotSet = !formatSet && a < 1 && a > 0; var formatWithAlpha = hasAlphaAndFormatNotSet && (format === "hex" || format === "hex6" || format === "hex3" || format === "name"); 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 === "hex8") { formattedString = this.toHex8String(); } if (format === "name") { formattedString = this.toName(); } if (format === "hsl") { formattedString = this.toHslString(); } if (format === "hsv") { formattedString = this.toHsvString(); } if (formatWithAlpha) { return this.toRgbString(); } return formattedString || this.toHexString(); } }; }</pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> 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 </td> <td class="code"> <div class="highlight"><pre>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); };</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> Given a string or object, convert that input to RGB Possible string inputs: <pre><code>"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%" </code></pre> </td> <td class="code"> <div class="highlight"><pre>function inputToRGB(color) { var rgb = { r: 0, g: 0, b: 0 }; var a = 1; var ok = false; var format = false; if (typeof color == "string") { color = stringInputToObject(color); } if (typeof color == "object") { if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) { rgb = rgbToRgb(color.r, color.g, color.b); ok = true; format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; } else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) { color.s = convertToPercentage(color.s); color.v = convertToPercentage(color.v); rgb = hsvToRgb(color.h, color.s, color.v); ok = true; format = "hsv"; } else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) { color.s = convertToPercentage(color.s); color.l = convertToPercentage(color.l); rgb = hslToRgb(color.h, color.s, color.l); ok = true; format = "hsl"; } if (color.hasOwnProperty("a")) { a = color.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 }; }</pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h2>Conversion Functions</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <code>rgbToHsl</code>, <code>rgbToHsv</code>, <code>hslToRgb</code>, <code>hsvToRgb</code> modified from: <a href="http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript">http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript</a> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <code>rgbToRgb</code> Handle bounds / percentage checking to conform to CSS color spec <a href="http://www.w3.org/TR/css3-color/">http://www.w3.org/TR/css3-color/</a> Assumes: r, g, b in [0, 255] or [0, 1] Returns: { r, g, b } in [0, 255] </td> <td class="code"> <div class="highlight"><pre>function