RubyGems - rails_modular_admin - Versions diffs - 0.3.1 → 0.4.0 - Mend

rails_modular_admin 0.3.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1416) hide show

data/app/assets/node_modules/tinycolor2/docs/tinycolor.html ADDED Viewed

@@ -0,0 +1,1023 @@
+<!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">&#182;</a>               </div>               <p>TinyColor v1.4.1
+https://github.com/bgrins/TinyColor
+Brian Grinstead, MIT License</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nb">Math</span><span class="p">)</span> <span class="p">{</span>
+<span class="kd">var</span> <span class="nx">trimLeft</span> <span class="o">=</span> <span class="sr">/^\s+/</span><span class="p">,</span>
+    <span class="nx">trimRight</span> <span class="o">=</span> <span class="sr">/\s+$/</span><span class="p">,</span>
+    <span class="nx">tinyCounter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
+    <span class="nx">mathRound</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">,</span>
+    <span class="nx">mathMin</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">,</span>
+    <span class="nx">mathMax</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">,</span>
+    <span class="nx">mathRandom</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">;</span>
+<span class="kd">function</span> <span class="nx">tinycolor</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">opts</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">color</span> <span class="o">=</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="o">?</span> <span class="nx">color</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
+    <span class="nx">opts</span> <span class="o">=</span> <span class="nx">opts</span> <span class="o">||</span> <span class="p">{</span> <span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <p>If input is already a tinycolor, return itself</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="p">(</span><span class="nx">color</span> <span class="k">instanceof</span> <span class="nx">tinycolor</span><span class="p">)</span> <span class="p">{</span>
+       <span class="k">return</span> <span class="nx">color</span><span class="p">;</span>
+    <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-3">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-3">&#182;</a>               </div>               <p>If we are called as a function, call using new instead</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="k">this</span> <span class="k">instanceof</span> <span class="nx">tinycolor</span><span class="p">))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">new</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
+    <span class="p">}</span>
+    <span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">inputToRGB</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_originalInput</span> <span class="o">=</span> <span class="nx">color</span><span class="p">,</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_r</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_g</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_b</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">a</span><span class="p">,</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_roundA</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="mi">100</span><span class="o">*</span><span class="k">this</span><span class="p">.</span><span class="nx">_a</span><span class="p">)</span> <span class="o">/</span> <span class="mi">100</span><span class="p">,</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_format</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">format</span> <span class="o">||</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">format</span><span class="p">;</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_gradientType</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">gradientType</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-4">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-4">&#182;</a>               </div>               <p>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></p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span> <span class="o">&lt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">_r</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">);</span> <span class="p">}</span>
+    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_g</span> <span class="o">&lt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">);</span> <span class="p">}</span>
+    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_b</span> <span class="o">&lt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">);</span> <span class="p">}</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_ok</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">ok</span><span class="p">;</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">_tc_id</span> <span class="o">=</span> <span class="nx">tinyCounter</span><span class="o">++</span><span class="p">;</span>
+<span class="p">}</span>
+<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
+    <span class="nx">isDark</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">getBrightness</span><span class="p">()</span> <span class="o">&lt;</span> <span class="mi">128</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">isLight</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">isDark</span><span class="p">();</span>
+    <span class="p">},</span>
+    <span class="nx">isValid</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_ok</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">getOriginalInput</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+      <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_originalInput</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">getFormat</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_format</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">getAlpha</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">getBrightness</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-5">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-5">&#182;</a>               </div>               <p>http://www.w3.org/TR/AERT#color-contrast</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toRgb</span><span class="p">();</span>
+        <span class="k">return</span> <span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span> <span class="o">*</span> <span class="mi">299</span> <span class="o">+</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span> <span class="o">*</span> <span class="mi">587</span> <span class="o">+</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span> <span class="o">*</span> <span class="mi">114</span><span class="p">)</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">getLuminance</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-6">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-6">&#182;</a>               </div>               <p>http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef</p>             </td>             <td class="code">               <div class="highlight"><pre>        <span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toRgb</span><span class="p">();</span>
+        <span class="kd">var</span> <span class="nx">RsRGB</span><span class="p">,</span> <span class="nx">GsRGB</span><span class="p">,</span> <span class="nx">BsRGB</span><span class="p">,</span> <span class="nx">R</span><span class="p">,</span> <span class="nx">G</span><span class="p">,</span> <span class="nx">B</span><span class="p">;</span>
+        <span class="nx">RsRGB</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span><span class="o">/</span><span class="mi">255</span><span class="p">;</span>
+        <span class="nx">GsRGB</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span><span class="o">/</span><span class="mi">255</span><span class="p">;</span>
+        <span class="nx">BsRGB</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span><span class="o">/</span><span class="mi">255</span><span class="p">;</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">RsRGB</span> <span class="o">&lt;=</span> <span class="mf">0.03928</span><span class="p">)</span> <span class="p">{</span><span class="nx">R</span> <span class="o">=</span> <span class="nx">RsRGB</span> <span class="o">/</span> <span class="mf">12.92</span><span class="p">;}</span> <span class="k">else</span> <span class="p">{</span><span class="nx">R</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(((</span><span class="nx">RsRGB</span> <span class="o">+</span> <span class="mf">0.055</span><span class="p">)</span> <span class="o">/</span> <span class="mf">1.055</span><span class="p">),</span> <span class="mf">2.4</span><span class="p">);}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">GsRGB</span> <span class="o">&lt;=</span> <span class="mf">0.03928</span><span class="p">)</span> <span class="p">{</span><span class="nx">G</span> <span class="o">=</span> <span class="nx">GsRGB</span> <span class="o">/</span> <span class="mf">12.92</span><span class="p">;}</span> <span class="k">else</span> <span class="p">{</span><span class="nx">G</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(((</span><span class="nx">GsRGB</span> <span class="o">+</span> <span class="mf">0.055</span><span class="p">)</span> <span class="o">/</span> <span class="mf">1.055</span><span class="p">),</span> <span class="mf">2.4</span><span class="p">);}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">BsRGB</span> <span class="o">&lt;=</span> <span class="mf">0.03928</span><span class="p">)</span> <span class="p">{</span><span class="nx">B</span> <span class="o">=</span> <span class="nx">BsRGB</span> <span class="o">/</span> <span class="mf">12.92</span><span class="p">;}</span> <span class="k">else</span> <span class="p">{</span><span class="nx">B</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(((</span><span class="nx">BsRGB</span> <span class="o">+</span> <span class="mf">0.055</span><span class="p">)</span> <span class="o">/</span> <span class="mf">1.055</span><span class="p">),</span> <span class="mf">2.4</span><span class="p">);}</span>
+        <span class="k">return</span> <span class="p">(</span><span class="mf">0.2126</span> <span class="o">*</span> <span class="nx">R</span><span class="p">)</span> <span class="o">+</span> <span class="p">(</span><span class="mf">0.7152</span> <span class="o">*</span> <span class="nx">G</span><span class="p">)</span> <span class="o">+</span> <span class="p">(</span><span class="mf">0.0722</span> <span class="o">*</span> <span class="nx">B</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">setAlpha</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">=</span> <span class="nx">boundAlpha</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
+        <span class="k">this</span><span class="p">.</span><span class="nx">_roundA</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="mi">100</span><span class="o">*</span><span class="k">this</span><span class="p">.</span><span class="nx">_a</span><span class="p">)</span> <span class="o">/</span> <span class="mi">100</span><span class="p">;</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">toHsv</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="nx">rgbToHsv</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">);</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">v</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="p">};</span>
+    <span class="p">},</span>
+    <span class="nx">toHsvString</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="nx">rgbToHsv</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">);</span>
+        <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsv</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">),</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsv</span><span class="p">.</span><span class="nx">s</span> <span class="o">*</span> <span class="mi">100</span><span class="p">),</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsv</span><span class="p">.</span><span class="nx">v</span> <span class="o">*</span> <span class="mi">100</span><span class="p">);</span>
+        <span class="k">return</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="o">?</span>
+          <span class="s2">&quot;hsv(&quot;</span>  <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="nx">v</span> <span class="o">+</span> <span class="s2">&quot;%)&quot;</span> <span class="o">:</span>
+          <span class="s2">&quot;hsva(&quot;</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="nx">v</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span><span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">_roundA</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">toHsl</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">rgbToHsl</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">);</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="p">};</span>
+    <span class="p">},</span>
+    <span class="nx">toHslString</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">rgbToHsl</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">);</span>
+        <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">),</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">*</span> <span class="mi">100</span><span class="p">),</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">*</span> <span class="mi">100</span><span class="p">);</span>
+        <span class="k">return</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="o">?</span>
+          <span class="s2">&quot;hsl(&quot;</span>  <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="nx">l</span> <span class="o">+</span> <span class="s2">&quot;%)&quot;</span> <span class="o">:</span>
+          <span class="s2">&quot;hsla(&quot;</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="nx">l</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span><span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">_roundA</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">toHex</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">allow3Char</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="nx">rgbToHex</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">,</span> <span class="nx">allow3Char</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">toHexString</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">allow3Char</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHex</span><span class="p">(</span><span class="nx">allow3Char</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">toHex8</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">allow4Char</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="nx">rgbaToHex</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span><span class="p">,</span> <span class="nx">allow4Char</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">toHex8String</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">allow4Char</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHex8</span><span class="p">(</span><span class="nx">allow4Char</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">toRgb</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">),</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">),</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">),</span> <span class="nx">a</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="p">};</span>
+    <span class="p">},</span>
+    <span class="nx">toRgbString</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="o">?</span>
+          <span class="s2">&quot;rgb(&quot;</span>  <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span> <span class="o">:</span>
+          <span class="s2">&quot;rgba(&quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">_roundA</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">toPercentageRgb</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="p">};</span>
+    <span class="p">},</span>
+    <span class="nx">toPercentageRgbString</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="o">?</span>
+          <span class="s2">&quot;rgb(&quot;</span>  <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%)&quot;</span> <span class="o">:</span>
+          <span class="s2">&quot;rgba(&quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">bound01</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%, &quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">_roundA</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">toName</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
+            <span class="k">return</span> <span class="s2">&quot;transparent&quot;</span><span class="p">;</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">&lt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
+            <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
+        <span class="p">}</span>
+        <span class="k">return</span> <span class="nx">hexNames</span><span class="p">[</span><span class="nx">rgbToHex</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">,</span> <span class="kc">true</span><span class="p">)]</span> <span class="o">||</span> <span class="kc">false</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">toFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">secondColor</span><span class="p">)</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">hex8String</span> <span class="o">=</span> <span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="nx">rgbaToArgbHex</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_b</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span><span class="p">);</span>
+        <span class="kd">var</span> <span class="nx">secondHex8String</span> <span class="o">=</span> <span class="nx">hex8String</span><span class="p">;</span>
+        <span class="kd">var</span> <span class="nx">gradientType</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_gradientType</span> <span class="o">?</span> <span class="s2">&quot;GradientType = 1, &quot;</span> <span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">secondColor</span><span class="p">)</span> <span class="p">{</span>
+            <span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">secondColor</span><span class="p">);</span>
+            <span class="nx">secondHex8String</span> <span class="o">=</span> <span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="nx">rgbaToArgbHex</span><span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">_r</span><span class="p">,</span> <span class="nx">s</span><span class="p">.</span><span class="nx">_g</span><span class="p">,</span> <span class="nx">s</span><span class="p">.</span><span class="nx">_b</span><span class="p">,</span> <span class="nx">s</span><span class="p">.</span><span class="nx">_a</span><span class="p">);</span>
+        <span class="p">}</span>
+        <span class="k">return</span> <span class="s2">&quot;progid:DXImageTransform.Microsoft.gradient(&quot;</span><span class="o">+</span><span class="nx">gradientType</span><span class="o">+</span><span class="s2">&quot;startColorstr=&quot;</span><span class="o">+</span><span class="nx">hex8String</span><span class="o">+</span><span class="s2">&quot;,endColorstr=&quot;</span><span class="o">+</span><span class="nx">secondHex8String</span><span class="o">+</span><span class="s2">&quot;)&quot;</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">toString</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">format</span><span class="p">)</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">formatSet</span> <span class="o">=</span> <span class="o">!!</span><span class="nx">format</span><span class="p">;</span>
+        <span class="nx">format</span> <span class="o">=</span> <span class="nx">format</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">_format</span><span class="p">;</span>
+        <span class="kd">var</span> <span class="nx">formattedString</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+        <span class="kd">var</span> <span class="nx">hasAlpha</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">&lt;</span> <span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">;</span>
+        <span class="kd">var</span> <span class="nx">needsAlphaFormat</span> <span class="o">=</span> <span class="o">!</span><span class="nx">formatSet</span> <span class="o">&amp;&amp;</span> <span class="nx">hasAlpha</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex&quot;</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex6&quot;</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex3&quot;</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex4&quot;</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex8&quot;</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;name&quot;</span><span class="p">);</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">needsAlphaFormat</span><span class="p">)</span> <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-7">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-7">&#182;</a>               </div>               <p>Special case for "transparent", all other non-alpha formats
+will return rgba when there is transparency.</p>             </td>             <td class="code">               <div class="highlight"><pre>            <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;name&quot;</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">_a</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
+                <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">toName</span><span class="p">();</span>
+            <span class="p">}</span>
+            <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">toRgbString</span><span class="p">();</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;rgb&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toRgbString</span><span class="p">();</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;prgb&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toPercentageRgbString</span><span class="p">();</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex&quot;</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex6&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHexString</span><span class="p">();</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex3&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHexString</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex4&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHex8String</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hex8&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHex8String</span><span class="p">();</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;name&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toName</span><span class="p">();</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hsl&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHslString</span><span class="p">();</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">&quot;hsv&quot;</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHsvString</span><span class="p">();</span>
+        <span class="p">}</span>
+        <span class="k">return</span> <span class="nx">formattedString</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHexString</span><span class="p">();</span>
+    <span class="p">},</span>
+    <span class="nx">clone</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
+    <span class="p">},</span>
+    <span class="nx">_applyModification</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="p">[</span><span class="k">this</span><span class="p">].</span><span class="nx">concat</span><span class="p">([].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">args</span><span class="p">)));</span>
+        <span class="k">this</span><span class="p">.</span><span class="nx">_r</span> <span class="o">=</span> <span class="nx">color</span><span class="p">.</span><span class="nx">_r</span><span class="p">;</span>
+        <span class="k">this</span><span class="p">.</span><span class="nx">_g</span> <span class="o">=</span> <span class="nx">color</span><span class="p">.</span><span class="nx">_g</span><span class="p">;</span>
+        <span class="k">this</span><span class="p">.</span><span class="nx">_b</span> <span class="o">=</span> <span class="nx">color</span><span class="p">.</span><span class="nx">_b</span><span class="p">;</span>
+        <span class="k">this</span><span class="p">.</span><span class="nx">setAlpha</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">_a</span><span class="p">);</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
+    <span class="p">},</span>
+    <span class="nx">lighten</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyModification</span><span class="p">(</span><span class="nx">lighten</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">brighten</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyModification</span><span class="p">(</span><span class="nx">brighten</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">darken</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyModification</span><span class="p">(</span><span class="nx">darken</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">desaturate</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyModification</span><span class="p">(</span><span class="nx">desaturate</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">saturate</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyModification</span><span class="p">(</span><span class="nx">saturate</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">greyscale</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyModification</span><span class="p">(</span><span class="nx">greyscale</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">spin</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyModification</span><span class="p">(</span><span class="nx">spin</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">_applyCombination</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="p">[</span><span class="k">this</span><span class="p">].</span><span class="nx">concat</span><span class="p">([].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">args</span><span class="p">)));</span>
+    <span class="p">},</span>
+    <span class="nx">analogous</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyCombination</span><span class="p">(</span><span class="nx">analogous</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">complement</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyCombination</span><span class="p">(</span><span class="nx">complement</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">monochromatic</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyCombination</span><span class="p">(</span><span class="nx">monochromatic</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">splitcomplement</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyCombination</span><span class="p">(</span><span class="nx">splitcomplement</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">triad</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyCombination</span><span class="p">(</span><span class="nx">triad</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">},</span>
+    <span class="nx">tetrad</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyCombination</span><span class="p">(</span><span class="nx">tetrad</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
+    <span class="p">}</span>
+<span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-8">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-8">&#182;</a>               </div>               <p>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</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">fromRatio</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">opts</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">color</span> <span class="o">==</span> <span class="s2">&quot;object&quot;</span><span class="p">)</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">newColor</span> <span class="o">=</span> <span class="p">{};</span>
+        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+            <span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">i</span><span class="p">))</span> <span class="p">{</span>
+                <span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="o">===</span> <span class="s2">&quot;a&quot;</span><span class="p">)</span> <span class="p">{</span>
+                    <span class="nx">newColor</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">color</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
+                <span class="p">}</span>
+                <span class="k">else</span> <span class="p">{</span>
+                    <span class="nx">newColor</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">convertToPercentage</span><span class="p">(</span><span class="nx">color</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
+                <span class="p">}</span>
+            <span class="p">}</span>
+        <span class="p">}</span>
+        <span class="nx">color</span> <span class="o">=</span> <span class="nx">newColor</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
+<span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-9">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-9">&#182;</a>               </div>               <p>Given a string or object, convert that input to RGB
+Possible string inputs:</p>
+<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><span class="kd">function</span> <span class="nx">inputToRGB</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
+    <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">v</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">ok</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">format</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">color</span> <span class="o">==</span> <span class="s2">&quot;string&quot;</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">color</span> <span class="o">=</span> <span class="nx">stringInputToObject</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">color</span> <span class="o">==</span> <span class="s2">&quot;object&quot;</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">r</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">g</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">b</span><span class="p">))</span> <span class="p">{</span>
+            <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">rgbToRgb</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span> <span class="nx">color</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span> <span class="nx">color</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span>
+            <span class="nx">ok</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+            <span class="nx">format</span> <span class="o">=</span> <span class="nb">String</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">r</span><span class="p">).</span><span class="nx">substr</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="o">===</span> <span class="s2">&quot;%&quot;</span> <span class="o">?</span> <span class="s2">&quot;prgb&quot;</span> <span class="o">:</span> <span class="s2">&quot;rgb&quot;</span><span class="p">;</span>
+        <span class="p">}</span>
+        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">h</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">s</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">v</span><span class="p">))</span> <span class="p">{</span>
+            <span class="nx">s</span> <span class="o">=</span> <span class="nx">convertToPercentage</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">s</span><span class="p">);</span>
+            <span class="nx">v</span> <span class="o">=</span> <span class="nx">convertToPercentage</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">v</span><span class="p">);</span>
+            <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">hsvToRgb</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="p">);</span>
+            <span class="nx">ok</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+            <span class="nx">format</span> <span class="o">=</span> <span class="s2">&quot;hsv&quot;</span><span class="p">;</span>
+        <span class="p">}</span>
+        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">h</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">s</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">l</span><span class="p">))</span> <span class="p">{</span>
+            <span class="nx">s</span> <span class="o">=</span> <span class="nx">convertToPercentage</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">s</span><span class="p">);</span>
+            <span class="nx">l</span> <span class="o">=</span> <span class="nx">convertToPercentage</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">l</span><span class="p">);</span>
+            <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">hslToRgb</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="p">);</span>
+            <span class="nx">ok</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+            <span class="nx">format</span> <span class="o">=</span> <span class="s2">&quot;hsl&quot;</span><span class="p">;</span>
+        <span class="p">}</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">&quot;a&quot;</span><span class="p">))</span> <span class="p">{</span>
+            <span class="nx">a</span> <span class="o">=</span> <span class="nx">color</span><span class="p">.</span><span class="nx">a</span><span class="p">;</span>
+        <span class="p">}</span>
+    <span class="p">}</span>
+    <span class="nx">a</span> <span class="o">=</span> <span class="nx">boundAlpha</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
+    <span class="k">return</span> <span class="p">{</span>
+        <span class="nx">ok</span><span class="o">:</span> <span class="nx">ok</span><span class="p">,</span>
+        <span class="nx">format</span><span class="o">:</span> <span class="nx">color</span><span class="p">.</span><span class="nx">format</span> <span class="o">||</span> <span class="nx">format</span><span class="p">,</span>
+        <span class="nx">r</span><span class="o">:</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span> <span class="mi">0</span><span class="p">)),</span>
+        <span class="nx">g</span><span class="o">:</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span> <span class="mi">0</span><span class="p">)),</span>
+        <span class="nx">b</span><span class="o">:</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span> <span class="mi">0</span><span class="p">)),</span>
+        <span class="nx">a</span><span class="o">:</span> <span class="nx">a</span>
+    <span class="p">};</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-10">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-10">&#182;</a>               </div>               <h2>Conversion Functions</h2>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-11">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-11">&#182;</a>               </div>               <p><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></p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-12">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-12">&#182;</a>               </div>               <p><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>
+<em>Assumes:</em> r, g, b in [0, 255] or [0, 1]
+<em>Returns:</em> { r, g, b } in [0, 255]</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">rgbToRgb</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">){</span>
+    <span class="k">return</span> <span class="p">{</span>
+        <span class="nx">r</span><span class="o">:</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span>
+        <span class="nx">g</span><span class="o">:</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span>
+        <span class="nx">b</span><span class="o">:</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">b</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span>
+    <span class="p">};</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-13">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-13">&#182;</a>               </div>               <p><code>rgbToHsl</code>
+Converts an RGB color value to HSL.
+<em>Assumes:</em> r, g, and b are contained in [0, 255] or [0, 1]
+<em>Returns:</em> { h, s, l } in [0,1]</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">rgbToHsl</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">r</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
+    <span class="nx">g</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
+    <span class="nx">b</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">b</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">),</span> <span class="nx">min</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">max</span> <span class="o">+</span> <span class="nx">min</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
+    <span class="k">if</span><span class="p">(</span><span class="nx">max</span> <span class="o">==</span> <span class="nx">min</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">h</span> <span class="o">=</span> <span class="nx">s</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// achromatic</span>
+    <span class="p">}</span>
+    <span class="k">else</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="nx">max</span> <span class="o">-</span> <span class="nx">min</span><span class="p">;</span>
+        <span class="nx">s</span> <span class="o">=</span> <span class="nx">l</span> <span class="o">&gt;</span> <span class="mf">0.5</span> <span class="o">?</span> <span class="nx">d</span> <span class="o">/</span> <span class="p">(</span><span class="mi">2</span> <span class="o">-</span> <span class="nx">max</span> <span class="o">-</span> <span class="nx">min</span><span class="p">)</span> <span class="o">:</span> <span class="nx">d</span> <span class="o">/</span> <span class="p">(</span><span class="nx">max</span> <span class="o">+</span> <span class="nx">min</span><span class="p">);</span>
+        <span class="k">switch</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
+            <span class="k">case</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">g</span> <span class="o">-</span> <span class="nx">b</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span> <span class="o">&lt;</span> <span class="nx">b</span> <span class="o">?</span> <span class="mi">6</span> <span class="o">:</span> <span class="mi">0</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
+            <span class="k">case</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">b</span> <span class="o">-</span> <span class="nx">r</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="mi">2</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
+            <span class="k">case</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">r</span> <span class="o">-</span> <span class="nx">g</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="mi">4</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
+        <span class="p">}</span>
+        <span class="nx">h</span> <span class="o">/=</span> <span class="mi">6</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">l</span> <span class="p">};</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-14">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-14">&#182;</a>               </div>               <p><code>hslToRgb</code>
+Converts an HSL color value to RGB.
+<em>Assumes:</em> h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
+<em>Returns:</em> { r, g, b } in the set [0, 255]</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">hslToRgb</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">;</span>
+    <span class="nx">h</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="mi">360</span><span class="p">);</span>
+    <span class="nx">s</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
+    <span class="nx">l</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">l</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
+    <span class="kd">function</span> <span class="nx">hue2rgb</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">t</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">if</span><span class="p">(</span><span class="nx">t</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span> <span class="nx">t</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
+        <span class="k">if</span><span class="p">(</span><span class="nx">t</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="nx">t</span> <span class="o">-=</span> <span class="mi">1</span><span class="p">;</span>
+        <span class="k">if</span><span class="p">(</span><span class="nx">t</span> <span class="o">&lt;</span> <span class="mi">1</span><span class="o">/</span><span class="mi">6</span><span class="p">)</span> <span class="k">return</span> <span class="nx">p</span> <span class="o">+</span> <span class="p">(</span><span class="nx">q</span> <span class="o">-</span> <span class="nx">p</span><span class="p">)</span> <span class="o">*</span> <span class="mi">6</span> <span class="o">*</span> <span class="nx">t</span><span class="p">;</span>
+        <span class="k">if</span><span class="p">(</span><span class="nx">t</span> <span class="o">&lt;</span> <span class="mi">1</span><span class="o">/</span><span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="nx">q</span><span class="p">;</span>
+        <span class="k">if</span><span class="p">(</span><span class="nx">t</span> <span class="o">&lt;</span> <span class="mi">2</span><span class="o">/</span><span class="mi">3</span><span class="p">)</span> <span class="k">return</span> <span class="nx">p</span> <span class="o">+</span> <span class="p">(</span><span class="nx">q</span> <span class="o">-</span> <span class="nx">p</span><span class="p">)</span> <span class="o">*</span> <span class="p">(</span><span class="mi">2</span><span class="o">/</span><span class="mi">3</span> <span class="o">-</span> <span class="nx">t</span><span class="p">)</span> <span class="o">*</span> <span class="mi">6</span><span class="p">;</span>
+        <span class="k">return</span> <span class="nx">p</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">if</span><span class="p">(</span><span class="nx">s</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">r</span> <span class="o">=</span> <span class="nx">g</span> <span class="o">=</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">l</span><span class="p">;</span> <span class="c1">// achromatic</span>
+    <span class="p">}</span>
+    <span class="k">else</span> <span class="p">{</span>
+        <span class="kd">var</span> <span class="nx">q</span> <span class="o">=</span> <span class="nx">l</span> <span class="o">&lt;</span> <span class="mf">0.5</span> <span class="o">?</span> <span class="nx">l</span> <span class="o">*</span> <span class="p">(</span><span class="mi">1</span> <span class="o">+</span> <span class="nx">s</span><span class="p">)</span> <span class="o">:</span> <span class="nx">l</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">-</span> <span class="nx">l</span> <span class="o">*</span> <span class="nx">s</span><span class="p">;</span>
+        <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="mi">2</span> <span class="o">*</span> <span class="nx">l</span> <span class="o">-</span> <span class="nx">q</span><span class="p">;</span>
+        <span class="nx">r</span> <span class="o">=</span> <span class="nx">hue2rgb</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">h</span> <span class="o">+</span> <span class="mi">1</span><span class="o">/</span><span class="mi">3</span><span class="p">);</span>
+        <span class="nx">g</span> <span class="o">=</span> <span class="nx">hue2rgb</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">h</span><span class="p">);</span>
+        <span class="nx">b</span> <span class="o">=</span> <span class="nx">hue2rgb</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">h</span> <span class="o">-</span> <span class="mi">1</span><span class="o">/</span><span class="mi">3</span><span class="p">);</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">r</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">g</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">b</span> <span class="o">*</span> <span class="mi">255</span> <span class="p">};</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-15">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-15">&#182;</a>               </div>               <p><code>rgbToHsv</code>
+Converts an RGB color value to HSV
+<em>Assumes:</em> r, g, and b are contained in the set [0, 255] or [0, 1]
+<em>Returns:</em> { h, s, v } in [0,1]</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">rgbToHsv</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">r</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
+    <span class="nx">g</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
+    <span class="nx">b</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">b</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">),</span> <span class="nx">min</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">max</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="nx">max</span> <span class="o">-</span> <span class="nx">min</span><span class="p">;</span>
+    <span class="nx">s</span> <span class="o">=</span> <span class="nx">max</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="nx">d</span> <span class="o">/</span> <span class="nx">max</span><span class="p">;</span>
+    <span class="k">if</span><span class="p">(</span><span class="nx">max</span> <span class="o">==</span> <span class="nx">min</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">h</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// achromatic</span>
+    <span class="p">}</span>
+    <span class="k">else</span> <span class="p">{</span>
+        <span class="k">switch</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
+            <span class="k">case</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">g</span> <span class="o">-</span> <span class="nx">b</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span> <span class="o">&lt;</span> <span class="nx">b</span> <span class="o">?</span> <span class="mi">6</span> <span class="o">:</span> <span class="mi">0</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
+            <span class="k">case</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">b</span> <span class="o">-</span> <span class="nx">r</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="mi">2</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
+            <span class="k">case</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">r</span> <span class="o">-</span> <span class="nx">g</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="mi">4</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
+        <span class="p">}</span>
+        <span class="nx">h</span> <span class="o">/=</span> <span class="mi">6</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">v</span> <span class="p">};</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-16">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-16">&#182;</a>               </div>               <p><code>hsvToRgb</code>
+Converts an HSV color value to RGB.
+<em>Assumes:</em> h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
+<em>Returns:</em> { r, g, b } in the set [0, 255]</p>             </td>             <td class="code">               <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">hsvToRgb</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">h</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="mi">360</span><span class="p">)</span> <span class="o">*</span> <span class="mi">6</span><span class="p">;</span>
+    <span class="nx">s</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
+    <span class="nx">v</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">h</span><span class="p">),</span>
+        <span class="nx">f</span> <span class="o">=</span> <span class="nx">h</span> <span class="o">-</span> <span class="nx">i</span><span class="p">,</span>
+        <span class="nx">p</span> <span class="o">=</span> <span class="nx">v</span> <span class="o">*</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="nx">s</span><span class="p">),</span>
+        <span class="nx">q</span> <span class="o">=</span> <span class="nx">v</span> <span class="o">*</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="nx">f</span> <span class="o">*</span> <span class="nx">s</span><span class="p">),</span>
+        <span class="nx">t</span> <span class="o">=</span> <span class="nx">v</span> <span class="o">*</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="nx">f</span><span class="p">)</span> <span class="o">*</span> <span class="nx">s</span><span class="p">),</span>
+        <span class="nx">mod</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">%</span> <span class="mi">6</span><span class="p">,</span>
+        <span class="nx">r</span> <span class="o">=</span> <span class="p">[</span><span class="nx">v</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="nx">t</span><span class="p">,</span> <span class="nx">v</span><span class="p">][</span><span class="nx">mod</span><span class="p">],</span>
+        <span class="nx">g</span> <span class="o">=</span> <span class="p">[</span><span class="nx">t</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="nx">p</span><span class="p">][</span><span class="nx">mod</span><span class="p">],</span>
+        <span class="nx">b</span> <span class="o">=</span> <span class="p">[</span><span class="nx">p</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="nx">t</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="nx">q</span><span class="p">][</span><span class="nx">mod</span><span class="p">];</span>
+    <span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">r</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">g</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">b</span> <span class="o">*</span> <span class="mi">255</span> <span class="p">};</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-17">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-17">&#182;</a>               </div>               <p><code>rgbToHex</code>
+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</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">rgbToHex</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">allow3Char</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">hex</span> <span class="o">=</span> <span class="p">[</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">r</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">g</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">b</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">))</span>
+    <span class="p">];</span></pre></div>             </td>           </tr>                               <tr id="section-18">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-18">&#182;</a>               </div>               <p>Return a 3 character hex if possible</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="p">(</span><span class="nx">allow3Char</span> <span class="o">&amp;&amp;</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-19">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-19">&#182;</a>               </div>               <p><code>rgbaToHex</code>
+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</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">rgbaToHex</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">a</span><span class="p">,</span> <span class="nx">allow4Char</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">hex</span> <span class="o">=</span> <span class="p">[</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">r</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">g</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">b</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">convertDecimalToHex</span><span class="p">(</span><span class="nx">a</span><span class="p">))</span>
+    <span class="p">];</span></pre></div>             </td>           </tr>                               <tr id="section-20">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-20">&#182;</a>               </div>               <p>Return a 4 character hex if possible</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="p">(</span><span class="nx">allow4Char</span> <span class="o">&amp;&amp;</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">3</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">3</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">3</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-21">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-21">&#182;</a>               </div>               <p><code>rgbaToArgbHex</code>
+Converts an RGBA color to an ARGB Hex8 string
+Rarely used, but required for "toFilter()"</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">rgbaToArgbHex</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">hex</span> <span class="o">=</span> <span class="p">[</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">convertDecimalToHex</span><span class="p">(</span><span class="nx">a</span><span class="p">)),</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">r</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">g</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
+        <span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">b</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">))</span>
+    <span class="p">];</span>
+    <span class="k">return</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-22">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-22">&#182;</a>               </div>               <p><code>equals</code>
+Can be called with any tinycolor input</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">equals</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color1</span><span class="p">,</span> <span class="nx">color2</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">color1</span> <span class="o">||</span> <span class="o">!</span><span class="nx">color2</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span> <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color1</span><span class="p">).</span><span class="nx">toRgbString</span><span class="p">()</span> <span class="o">==</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color2</span><span class="p">).</span><span class="nx">toRgbString</span><span class="p">();</span>
+<span class="p">};</span>
+<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">random</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">fromRatio</span><span class="p">({</span>
+        <span class="nx">r</span><span class="o">:</span> <span class="nx">mathRandom</span><span class="p">(),</span>
+        <span class="nx">g</span><span class="o">:</span> <span class="nx">mathRandom</span><span class="p">(),</span>
+        <span class="nx">b</span><span class="o">:</span> <span class="nx">mathRandom</span><span class="p">()</span>
+    <span class="p">});</span>
+<span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-23">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-23">&#182;</a>               </div>               <h2>Modification Functions</h2>
+<p>Thanks to less.js for some of the basics here
+<a href="https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js">https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js</a></p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">desaturate</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">amount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">-=</span> <span class="nx">amount</span> <span class="o">/</span> <span class="mi">100</span><span class="p">;</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">=</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">);</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">saturate</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">amount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">+=</span> <span class="nx">amount</span> <span class="o">/</span> <span class="mi">100</span><span class="p">;</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">=</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">);</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">greyscale</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">desaturate</span><span class="p">(</span><span class="mi">100</span><span class="p">);</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">lighten</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">amount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">+=</span> <span class="nx">amount</span> <span class="o">/</span> <span class="mi">100</span><span class="p">;</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">=</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span><span class="p">);</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">brighten</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">amount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toRgb</span><span class="p">();</span>
+    <span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span> <span class="o">=</span> <span class="nx">mathMax</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span> <span class="o">-</span> <span class="nx">mathRound</span><span class="p">(</span><span class="mi">255</span> <span class="o">*</span> <span class="o">-</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">/</span> <span class="mi">100</span><span class="p">))));</span>
+    <span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span> <span class="o">=</span> <span class="nx">mathMax</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span> <span class="o">-</span> <span class="nx">mathRound</span><span class="p">(</span><span class="mi">255</span> <span class="o">*</span> <span class="o">-</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">/</span> <span class="mi">100</span><span class="p">))));</span>
+    <span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span> <span class="o">=</span> <span class="nx">mathMax</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span> <span class="o">-</span> <span class="nx">mathRound</span><span class="p">(</span><span class="mi">255</span> <span class="o">*</span> <span class="o">-</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">/</span> <span class="mi">100</span><span class="p">))));</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">rgb</span><span class="p">);</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">darken</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">amount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">-=</span> <span class="nx">amount</span> <span class="o">/</span> <span class="mi">100</span><span class="p">;</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">=</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span><span class="p">);</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-24">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-24">&#182;</a>               </div>               <p>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.</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">spin</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">hue</span> <span class="o">=</span> <span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">+</span> <span class="nx">amount</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">;</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">=</span> <span class="nx">hue</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="mi">360</span> <span class="o">+</span> <span class="nx">hue</span> <span class="o">:</span> <span class="nx">hue</span><span class="p">;</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-25">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-25">&#182;</a>               </div>               <h2>Combination Functions</h2>
+<p>Thanks to jQuery xColor for some of the ideas behind these
+<a href="https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js">https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js</a></p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">complement</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">180</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">;</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">triad</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span><span class="p">;</span>
+    <span class="k">return</span> <span class="p">[</span>
+        <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">),</span>
+        <span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">120</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">}),</span>
+        <span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">240</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">})</span>
+    <span class="p">];</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">tetrad</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span><span class="p">;</span>
+    <span class="k">return</span> <span class="p">[</span>
+        <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">),</span>
+        <span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">90</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">}),</span>
+        <span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">180</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">}),</span>
+        <span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">270</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">})</span>
+    <span class="p">];</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">splitcomplement</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span><span class="p">;</span>
+    <span class="k">return</span> <span class="p">[</span>
+        <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">),</span>
+        <span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">72</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span><span class="p">}),</span>
+        <span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">216</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span><span class="p">})</span>
+    <span class="p">];</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">analogous</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">results</span><span class="p">,</span> <span class="nx">slices</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">results</span> <span class="o">=</span> <span class="nx">results</span> <span class="o">||</span> <span class="mi">6</span><span class="p">;</span>
+    <span class="nx">slices</span> <span class="o">=</span> <span class="nx">slices</span> <span class="o">||</span> <span class="mi">30</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">part</span> <span class="o">=</span> <span class="mi">360</span> <span class="o">/</span> <span class="nx">slices</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">[</span><span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">)];</span>
+    <span class="k">for</span> <span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">=</span> <span class="p">((</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">-</span> <span class="p">(</span><span class="nx">part</span> <span class="o">*</span> <span class="nx">results</span> <span class="o">&gt;&gt;</span> <span class="mi">1</span><span class="p">))</span> <span class="o">+</span> <span class="mi">720</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">;</span> <span class="o">--</span><span class="nx">results</span><span class="p">;</span> <span class="p">)</span> <span class="p">{</span>
+        <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">+</span> <span class="nx">part</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">;</span>
+        <span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">));</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">monochromatic</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">results</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">results</span> <span class="o">=</span> <span class="nx">results</span> <span class="o">||</span> <span class="mi">6</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsv</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">v</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">[];</span>
+    <span class="kd">var</span> <span class="nx">modification</span> <span class="o">=</span> <span class="mi">1</span> <span class="o">/</span> <span class="nx">results</span><span class="p">;</span>
+    <span class="k">while</span> <span class="p">(</span><span class="nx">results</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">v</span><span class="p">}));</span>
+        <span class="nx">v</span> <span class="o">=</span> <span class="p">(</span><span class="nx">v</span> <span class="o">+</span> <span class="nx">modification</span><span class="p">)</span> <span class="o">%</span> <span class="mi">1</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-26">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-26">&#182;</a>               </div>               <h2>Utility Functions</h2>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">mix</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">color1</span><span class="p">,</span> <span class="nx">color2</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">amount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="p">(</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">50</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">rgb1</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color1</span><span class="p">).</span><span class="nx">toRgb</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">rgb2</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color2</span><span class="p">).</span><span class="nx">toRgb</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nx">amount</span> <span class="o">/</span> <span class="mi">100</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">rgba</span> <span class="o">=</span> <span class="p">{</span>
+        <span class="nx">r</span><span class="o">:</span> <span class="p">((</span><span class="nx">rgb2</span><span class="p">.</span><span class="nx">r</span> <span class="o">-</span> <span class="nx">rgb1</span><span class="p">.</span><span class="nx">r</span><span class="p">)</span> <span class="o">*</span> <span class="nx">p</span><span class="p">)</span> <span class="o">+</span> <span class="nx">rgb1</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span>
+        <span class="nx">g</span><span class="o">:</span> <span class="p">((</span><span class="nx">rgb2</span><span class="p">.</span><span class="nx">g</span> <span class="o">-</span> <span class="nx">rgb1</span><span class="p">.</span><span class="nx">g</span><span class="p">)</span> <span class="o">*</span> <span class="nx">p</span><span class="p">)</span> <span class="o">+</span> <span class="nx">rgb1</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span>
+        <span class="nx">b</span><span class="o">:</span> <span class="p">((</span><span class="nx">rgb2</span><span class="p">.</span><span class="nx">b</span> <span class="o">-</span> <span class="nx">rgb1</span><span class="p">.</span><span class="nx">b</span><span class="p">)</span> <span class="o">*</span> <span class="nx">p</span><span class="p">)</span> <span class="o">+</span> <span class="nx">rgb1</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span>
+        <span class="nx">a</span><span class="o">:</span> <span class="p">((</span><span class="nx">rgb2</span><span class="p">.</span><span class="nx">a</span> <span class="o">-</span> <span class="nx">rgb1</span><span class="p">.</span><span class="nx">a</span><span class="p">)</span> <span class="o">*</span> <span class="nx">p</span><span class="p">)</span> <span class="o">+</span> <span class="nx">rgb1</span><span class="p">.</span><span class="nx">a</span>
+    <span class="p">};</span>
+    <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">rgba</span><span class="p">);</span>
+<span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-27">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-27">&#182;</a>               </div>               <h2>Readability Functions</h2>
+<p><http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)</p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-28">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-28">&#182;</a>               </div>               <p><code>contrast</code>
+Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">readability</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">color1</span><span class="p">,</span> <span class="nx">color2</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">c1</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color1</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">c2</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color2</span><span class="p">);</span>
+    <span class="k">return</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">c1</span><span class="p">.</span><span class="nx">getLuminance</span><span class="p">(),</span><span class="nx">c2</span><span class="p">.</span><span class="nx">getLuminance</span><span class="p">())</span><span class="o">+</span><span class="mf">0.05</span><span class="p">)</span> <span class="o">/</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">c1</span><span class="p">.</span><span class="nx">getLuminance</span><span class="p">(),</span><span class="nx">c2</span><span class="p">.</span><span class="nx">getLuminance</span><span class="p">())</span><span class="o">+</span><span class="mf">0.05</span><span class="p">);</span>
+<span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-29">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-29">&#182;</a>               </div>               <p><code>isReadable</code>
+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"}.</p>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-30">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-30">&#182;</a>               </div>               <p><em>Example</em>
+   tinycolor.isReadable("#000", "#111") => false
+   tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">isReadable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">color1</span><span class="p">,</span> <span class="nx">color2</span><span class="p">,</span> <span class="nx">wcag2</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">readability</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">readability</span><span class="p">(</span><span class="nx">color1</span><span class="p">,</span> <span class="nx">color2</span><span class="p">);</span>
+    <span class="kd">var</span> <span class="nx">wcag2Parms</span><span class="p">,</span> <span class="nx">out</span><span class="p">;</span>
+    <span class="nx">out</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+    <span class="nx">wcag2Parms</span> <span class="o">=</span> <span class="nx">validateWCAG2Parms</span><span class="p">(</span><span class="nx">wcag2</span><span class="p">);</span>
+    <span class="k">switch</span> <span class="p">(</span><span class="nx">wcag2Parms</span><span class="p">.</span><span class="nx">level</span> <span class="o">+</span> <span class="nx">wcag2Parms</span><span class="p">.</span><span class="nx">size</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">case</span> <span class="s2">&quot;AAsmall&quot;</span><span class="o">:</span>
+        <span class="k">case</span> <span class="s2">&quot;AAAlarge&quot;</span><span class="o">:</span>
+            <span class="nx">out</span> <span class="o">=</span> <span class="nx">readability</span> <span class="o">&gt;=</span> <span class="mf">4.5</span><span class="p">;</span>
+            <span class="k">break</span><span class="p">;</span>
+        <span class="k">case</span> <span class="s2">&quot;AAlarge&quot;</span><span class="o">:</span>
+            <span class="nx">out</span> <span class="o">=</span> <span class="nx">readability</span> <span class="o">&gt;=</span> <span class="mi">3</span><span class="p">;</span>
+            <span class="k">break</span><span class="p">;</span>
+        <span class="k">case</span> <span class="s2">&quot;AAAsmall&quot;</span><span class="o">:</span>
+            <span class="nx">out</span> <span class="o">=</span> <span class="nx">readability</span> <span class="o">&gt;=</span> <span class="mi">7</span><span class="p">;</span>
+            <span class="k">break</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">out</span><span class="p">;</span>
+<span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-31">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-31">&#182;</a>               </div>               <p><code>mostReadable</code>
+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.
+<em>Example</em>
+   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"</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">mostReadable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">baseColor</span><span class="p">,</span> <span class="nx">colorList</span><span class="p">,</span> <span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">bestColor</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">bestScore</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">readability</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">includeFallbackColors</span><span class="p">,</span> <span class="nx">level</span><span class="p">,</span> <span class="nx">size</span> <span class="p">;</span>
+    <span class="nx">args</span> <span class="o">=</span> <span class="nx">args</span> <span class="o">||</span> <span class="p">{};</span>
+    <span class="nx">includeFallbackColors</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">includeFallbackColors</span> <span class="p">;</span>
+    <span class="nx">level</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">level</span><span class="p">;</span>
+    <span class="nx">size</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">size</span><span class="p">;</span>
+    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">colorList</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">readability</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">readability</span><span class="p">(</span><span class="nx">baseColor</span><span class="p">,</span> <span class="nx">colorList</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">readability</span> <span class="o">&gt;</span> <span class="nx">bestScore</span><span class="p">)</span> <span class="p">{</span>
+            <span class="nx">bestScore</span> <span class="o">=</span> <span class="nx">readability</span><span class="p">;</span>
+            <span class="nx">bestColor</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">colorList</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
+        <span class="p">}</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">isReadable</span><span class="p">(</span><span class="nx">baseColor</span><span class="p">,</span> <span class="nx">bestColor</span><span class="p">,</span> <span class="p">{</span><span class="s2">&quot;level&quot;</span><span class="o">:</span><span class="nx">level</span><span class="p">,</span><span class="s2">&quot;size&quot;</span><span class="o">:</span><span class="nx">size</span><span class="p">})</span> <span class="o">||</span> <span class="o">!</span><span class="nx">includeFallbackColors</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="nx">bestColor</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">else</span> <span class="p">{</span>
+        <span class="nx">args</span><span class="p">.</span><span class="nx">includeFallbackColors</span><span class="o">=</span><span class="kc">false</span><span class="p">;</span>
+        <span class="k">return</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">mostReadable</span><span class="p">(</span><span class="nx">baseColor</span><span class="p">,[</span><span class="s2">&quot;#fff&quot;</span><span class="p">,</span> <span class="s2">&quot;#000&quot;</span><span class="p">],</span><span class="nx">args</span><span class="p">);</span>
+    <span class="p">}</span>
+<span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-32">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-32">&#182;</a>               </div>               <h2>Big List of Colors</h2>
+<p><a href="http://www.w3.org/TR/css3-color/#svg-color">http://www.w3.org/TR/css3-color/#svg-color</a></p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">var</span> <span class="nx">names</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">names</span> <span class="o">=</span> <span class="p">{</span>
+    <span class="nx">aliceblue</span><span class="o">:</span> <span class="s2">&quot;f0f8ff&quot;</span><span class="p">,</span>
+    <span class="nx">antiquewhite</span><span class="o">:</span> <span class="s2">&quot;faebd7&quot;</span><span class="p">,</span>
+    <span class="nx">aqua</span><span class="o">:</span> <span class="s2">&quot;0ff&quot;</span><span class="p">,</span>
+    <span class="nx">aquamarine</span><span class="o">:</span> <span class="s2">&quot;7fffd4&quot;</span><span class="p">,</span>
+    <span class="nx">azure</span><span class="o">:</span> <span class="s2">&quot;f0ffff&quot;</span><span class="p">,</span>
+    <span class="nx">beige</span><span class="o">:</span> <span class="s2">&quot;f5f5dc&quot;</span><span class="p">,</span>
+    <span class="nx">bisque</span><span class="o">:</span> <span class="s2">&quot;ffe4c4&quot;</span><span class="p">,</span>
+    <span class="nx">black</span><span class="o">:</span> <span class="s2">&quot;000&quot;</span><span class="p">,</span>
+    <span class="nx">blanchedalmond</span><span class="o">:</span> <span class="s2">&quot;ffebcd&quot;</span><span class="p">,</span>
+    <span class="nx">blue</span><span class="o">:</span> <span class="s2">&quot;00f&quot;</span><span class="p">,</span>
+    <span class="nx">blueviolet</span><span class="o">:</span> <span class="s2">&quot;8a2be2&quot;</span><span class="p">,</span>
+    <span class="nx">brown</span><span class="o">:</span> <span class="s2">&quot;a52a2a&quot;</span><span class="p">,</span>
+    <span class="nx">burlywood</span><span class="o">:</span> <span class="s2">&quot;deb887&quot;</span><span class="p">,</span>
+    <span class="nx">burntsienna</span><span class="o">:</span> <span class="s2">&quot;ea7e5d&quot;</span><span class="p">,</span>
+    <span class="nx">cadetblue</span><span class="o">:</span> <span class="s2">&quot;5f9ea0&quot;</span><span class="p">,</span>
+    <span class="nx">chartreuse</span><span class="o">:</span> <span class="s2">&quot;7fff00&quot;</span><span class="p">,</span>
+    <span class="nx">chocolate</span><span class="o">:</span> <span class="s2">&quot;d2691e&quot;</span><span class="p">,</span>
+    <span class="nx">coral</span><span class="o">:</span> <span class="s2">&quot;ff7f50&quot;</span><span class="p">,</span>
+    <span class="nx">cornflowerblue</span><span class="o">:</span> <span class="s2">&quot;6495ed&quot;</span><span class="p">,</span>
+    <span class="nx">cornsilk</span><span class="o">:</span> <span class="s2">&quot;fff8dc&quot;</span><span class="p">,</span>
+    <span class="nx">crimson</span><span class="o">:</span> <span class="s2">&quot;dc143c&quot;</span><span class="p">,</span>
+    <span class="nx">cyan</span><span class="o">:</span> <span class="s2">&quot;0ff&quot;</span><span class="p">,</span>
+    <span class="nx">darkblue</span><span class="o">:</span> <span class="s2">&quot;00008b&quot;</span><span class="p">,</span>
+    <span class="nx">darkcyan</span><span class="o">:</span> <span class="s2">&quot;008b8b&quot;</span><span class="p">,</span>
+    <span class="nx">darkgoldenrod</span><span class="o">:</span> <span class="s2">&quot;b8860b&quot;</span><span class="p">,</span>
+    <span class="nx">darkgray</span><span class="o">:</span> <span class="s2">&quot;a9a9a9&quot;</span><span class="p">,</span>
+    <span class="nx">darkgreen</span><span class="o">:</span> <span class="s2">&quot;006400&quot;</span><span class="p">,</span>
+    <span class="nx">darkgrey</span><span class="o">:</span> <span class="s2">&quot;a9a9a9&quot;</span><span class="p">,</span>
+    <span class="nx">darkkhaki</span><span class="o">:</span> <span class="s2">&quot;bdb76b&quot;</span><span class="p">,</span>
+    <span class="nx">darkmagenta</span><span class="o">:</span> <span class="s2">&quot;8b008b&quot;</span><span class="p">,</span>
+    <span class="nx">darkolivegreen</span><span class="o">:</span> <span class="s2">&quot;556b2f&quot;</span><span class="p">,</span>
+    <span class="nx">darkorange</span><span class="o">:</span> <span class="s2">&quot;ff8c00&quot;</span><span class="p">,</span>
+    <span class="nx">darkorchid</span><span class="o">:</span> <span class="s2">&quot;9932cc&quot;</span><span class="p">,</span>
+    <span class="nx">darkred</span><span class="o">:</span> <span class="s2">&quot;8b0000&quot;</span><span class="p">,</span>
+    <span class="nx">darksalmon</span><span class="o">:</span> <span class="s2">&quot;e9967a&quot;</span><span class="p">,</span>
+    <span class="nx">darkseagreen</span><span class="o">:</span> <span class="s2">&quot;8fbc8f&quot;</span><span class="p">,</span>
+    <span class="nx">darkslateblue</span><span class="o">:</span> <span class="s2">&quot;483d8b&quot;</span><span class="p">,</span>
+    <span class="nx">darkslategray</span><span class="o">:</span> <span class="s2">&quot;2f4f4f&quot;</span><span class="p">,</span>
+    <span class="nx">darkslategrey</span><span class="o">:</span> <span class="s2">&quot;2f4f4f&quot;</span><span class="p">,</span>
+    <span class="nx">darkturquoise</span><span class="o">:</span> <span class="s2">&quot;00ced1&quot;</span><span class="p">,</span>
+    <span class="nx">darkviolet</span><span class="o">:</span> <span class="s2">&quot;9400d3&quot;</span><span class="p">,</span>
+    <span class="nx">deeppink</span><span class="o">:</span> <span class="s2">&quot;ff1493&quot;</span><span class="p">,</span>
+    <span class="nx">deepskyblue</span><span class="o">:</span> <span class="s2">&quot;00bfff&quot;</span><span class="p">,</span>
+    <span class="nx">dimgray</span><span class="o">:</span> <span class="s2">&quot;696969&quot;</span><span class="p">,</span>
+    <span class="nx">dimgrey</span><span class="o">:</span> <span class="s2">&quot;696969&quot;</span><span class="p">,</span>
+    <span class="nx">dodgerblue</span><span class="o">:</span> <span class="s2">&quot;1e90ff&quot;</span><span class="p">,</span>
+    <span class="nx">firebrick</span><span class="o">:</span> <span class="s2">&quot;b22222&quot;</span><span class="p">,</span>
+    <span class="nx">floralwhite</span><span class="o">:</span> <span class="s2">&quot;fffaf0&quot;</span><span class="p">,</span>
+    <span class="nx">forestgreen</span><span class="o">:</span> <span class="s2">&quot;228b22&quot;</span><span class="p">,</span>
+    <span class="nx">fuchsia</span><span class="o">:</span> <span class="s2">&quot;f0f&quot;</span><span class="p">,</span>
+    <span class="nx">gainsboro</span><span class="o">:</span> <span class="s2">&quot;dcdcdc&quot;</span><span class="p">,</span>
+    <span class="nx">ghostwhite</span><span class="o">:</span> <span class="s2">&quot;f8f8ff&quot;</span><span class="p">,</span>
+    <span class="nx">gold</span><span class="o">:</span> <span class="s2">&quot;ffd700&quot;</span><span class="p">,</span>
+    <span class="nx">goldenrod</span><span class="o">:</span> <span class="s2">&quot;daa520&quot;</span><span class="p">,</span>
+    <span class="nx">gray</span><span class="o">:</span> <span class="s2">&quot;808080&quot;</span><span class="p">,</span>
+    <span class="nx">green</span><span class="o">:</span> <span class="s2">&quot;008000&quot;</span><span class="p">,</span>
+    <span class="nx">greenyellow</span><span class="o">:</span> <span class="s2">&quot;adff2f&quot;</span><span class="p">,</span>
+    <span class="nx">grey</span><span class="o">:</span> <span class="s2">&quot;808080&quot;</span><span class="p">,</span>
+    <span class="nx">honeydew</span><span class="o">:</span> <span class="s2">&quot;f0fff0&quot;</span><span class="p">,</span>
+    <span class="nx">hotpink</span><span class="o">:</span> <span class="s2">&quot;ff69b4&quot;</span><span class="p">,</span>
+    <span class="nx">indianred</span><span class="o">:</span> <span class="s2">&quot;cd5c5c&quot;</span><span class="p">,</span>
+    <span class="nx">indigo</span><span class="o">:</span> <span class="s2">&quot;4b0082&quot;</span><span class="p">,</span>
+    <span class="nx">ivory</span><span class="o">:</span> <span class="s2">&quot;fffff0&quot;</span><span class="p">,</span>
+    <span class="nx">khaki</span><span class="o">:</span> <span class="s2">&quot;f0e68c&quot;</span><span class="p">,</span>
+    <span class="nx">lavender</span><span class="o">:</span> <span class="s2">&quot;e6e6fa&quot;</span><span class="p">,</span>
+    <span class="nx">lavenderblush</span><span class="o">:</span> <span class="s2">&quot;fff0f5&quot;</span><span class="p">,</span>
+    <span class="nx">lawngreen</span><span class="o">:</span> <span class="s2">&quot;7cfc00&quot;</span><span class="p">,</span>
+    <span class="nx">lemonchiffon</span><span class="o">:</span> <span class="s2">&quot;fffacd&quot;</span><span class="p">,</span>
+    <span class="nx">lightblue</span><span class="o">:</span> <span class="s2">&quot;add8e6&quot;</span><span class="p">,</span>
+    <span class="nx">lightcoral</span><span class="o">:</span> <span class="s2">&quot;f08080&quot;</span><span class="p">,</span>
+    <span class="nx">lightcyan</span><span class="o">:</span> <span class="s2">&quot;e0ffff&quot;</span><span class="p">,</span>
+    <span class="nx">lightgoldenrodyellow</span><span class="o">:</span> <span class="s2">&quot;fafad2&quot;</span><span class="p">,</span>
+    <span class="nx">lightgray</span><span class="o">:</span> <span class="s2">&quot;d3d3d3&quot;</span><span class="p">,</span>
+    <span class="nx">lightgreen</span><span class="o">:</span> <span class="s2">&quot;90ee90&quot;</span><span class="p">,</span>
+    <span class="nx">lightgrey</span><span class="o">:</span> <span class="s2">&quot;d3d3d3&quot;</span><span class="p">,</span>
+    <span class="nx">lightpink</span><span class="o">:</span> <span class="s2">&quot;ffb6c1&quot;</span><span class="p">,</span>
+    <span class="nx">lightsalmon</span><span class="o">:</span> <span class="s2">&quot;ffa07a&quot;</span><span class="p">,</span>
+    <span class="nx">lightseagreen</span><span class="o">:</span> <span class="s2">&quot;20b2aa&quot;</span><span class="p">,</span>
+    <span class="nx">lightskyblue</span><span class="o">:</span> <span class="s2">&quot;87cefa&quot;</span><span class="p">,</span>
+    <span class="nx">lightslategray</span><span class="o">:</span> <span class="s2">&quot;789&quot;</span><span class="p">,</span>
+    <span class="nx">lightslategrey</span><span class="o">:</span> <span class="s2">&quot;789&quot;</span><span class="p">,</span>
+    <span class="nx">lightsteelblue</span><span class="o">:</span> <span class="s2">&quot;b0c4de&quot;</span><span class="p">,</span>
+    <span class="nx">lightyellow</span><span class="o">:</span> <span class="s2">&quot;ffffe0&quot;</span><span class="p">,</span>
+    <span class="nx">lime</span><span class="o">:</span> <span class="s2">&quot;0f0&quot;</span><span class="p">,</span>
+    <span class="nx">limegreen</span><span class="o">:</span> <span class="s2">&quot;32cd32&quot;</span><span class="p">,</span>
+    <span class="nx">linen</span><span class="o">:</span> <span class="s2">&quot;faf0e6&quot;</span><span class="p">,</span>
+    <span class="nx">magenta</span><span class="o">:</span> <span class="s2">&quot;f0f&quot;</span><span class="p">,</span>
+    <span class="nx">maroon</span><span class="o">:</span> <span class="s2">&quot;800000&quot;</span><span class="p">,</span>
+    <span class="nx">mediumaquamarine</span><span class="o">:</span> <span class="s2">&quot;66cdaa&quot;</span><span class="p">,</span>
+    <span class="nx">mediumblue</span><span class="o">:</span> <span class="s2">&quot;0000cd&quot;</span><span class="p">,</span>
+    <span class="nx">mediumorchid</span><span class="o">:</span> <span class="s2">&quot;ba55d3&quot;</span><span class="p">,</span>
+    <span class="nx">mediumpurple</span><span class="o">:</span> <span class="s2">&quot;9370db&quot;</span><span class="p">,</span>
+    <span class="nx">mediumseagreen</span><span class="o">:</span> <span class="s2">&quot;3cb371&quot;</span><span class="p">,</span>
+    <span class="nx">mediumslateblue</span><span class="o">:</span> <span class="s2">&quot;7b68ee&quot;</span><span class="p">,</span>
+    <span class="nx">mediumspringgreen</span><span class="o">:</span> <span class="s2">&quot;00fa9a&quot;</span><span class="p">,</span>
+    <span class="nx">mediumturquoise</span><span class="o">:</span> <span class="s2">&quot;48d1cc&quot;</span><span class="p">,</span>
+    <span class="nx">mediumvioletred</span><span class="o">:</span> <span class="s2">&quot;c71585&quot;</span><span class="p">,</span>
+    <span class="nx">midnightblue</span><span class="o">:</span> <span class="s2">&quot;191970&quot;</span><span class="p">,</span>
+    <span class="nx">mintcream</span><span class="o">:</span> <span class="s2">&quot;f5fffa&quot;</span><span class="p">,</span>
+    <span class="nx">mistyrose</span><span class="o">:</span> <span class="s2">&quot;ffe4e1&quot;</span><span class="p">,</span>
+    <span class="nx">moccasin</span><span class="o">:</span> <span class="s2">&quot;ffe4b5&quot;</span><span class="p">,</span>
+    <span class="nx">navajowhite</span><span class="o">:</span> <span class="s2">&quot;ffdead&quot;</span><span class="p">,</span>
+    <span class="nx">navy</span><span class="o">:</span> <span class="s2">&quot;000080&quot;</span><span class="p">,</span>
+    <span class="nx">oldlace</span><span class="o">:</span> <span class="s2">&quot;fdf5e6&quot;</span><span class="p">,</span>
+    <span class="nx">olive</span><span class="o">:</span> <span class="s2">&quot;808000&quot;</span><span class="p">,</span>
+    <span class="nx">olivedrab</span><span class="o">:</span> <span class="s2">&quot;6b8e23&quot;</span><span class="p">,</span>
+    <span class="nx">orange</span><span class="o">:</span> <span class="s2">&quot;ffa500&quot;</span><span class="p">,</span>
+    <span class="nx">orangered</span><span class="o">:</span> <span class="s2">&quot;ff4500&quot;</span><span class="p">,</span>
+    <span class="nx">orchid</span><span class="o">:</span> <span class="s2">&quot;da70d6&quot;</span><span class="p">,</span>
+    <span class="nx">palegoldenrod</span><span class="o">:</span> <span class="s2">&quot;eee8aa&quot;</span><span class="p">,</span>
+    <span class="nx">palegreen</span><span class="o">:</span> <span class="s2">&quot;98fb98&quot;</span><span class="p">,</span>
+    <span class="nx">paleturquoise</span><span class="o">:</span> <span class="s2">&quot;afeeee&quot;</span><span class="p">,</span>
+    <span class="nx">palevioletred</span><span class="o">:</span> <span class="s2">&quot;db7093&quot;</span><span class="p">,</span>
+    <span class="nx">papayawhip</span><span class="o">:</span> <span class="s2">&quot;ffefd5&quot;</span><span class="p">,</span>
+    <span class="nx">peachpuff</span><span class="o">:</span> <span class="s2">&quot;ffdab9&quot;</span><span class="p">,</span>
+    <span class="nx">peru</span><span class="o">:</span> <span class="s2">&quot;cd853f&quot;</span><span class="p">,</span>
+    <span class="nx">pink</span><span class="o">:</span> <span class="s2">&quot;ffc0cb&quot;</span><span class="p">,</span>
+    <span class="nx">plum</span><span class="o">:</span> <span class="s2">&quot;dda0dd&quot;</span><span class="p">,</span>
+    <span class="nx">powderblue</span><span class="o">:</span> <span class="s2">&quot;b0e0e6&quot;</span><span class="p">,</span>
+    <span class="nx">purple</span><span class="o">:</span> <span class="s2">&quot;800080&quot;</span><span class="p">,</span>
+    <span class="nx">rebeccapurple</span><span class="o">:</span> <span class="s2">&quot;663399&quot;</span><span class="p">,</span>
+    <span class="nx">red</span><span class="o">:</span> <span class="s2">&quot;f00&quot;</span><span class="p">,</span>
+    <span class="nx">rosybrown</span><span class="o">:</span> <span class="s2">&quot;bc8f8f&quot;</span><span class="p">,</span>
+    <span class="nx">royalblue</span><span class="o">:</span> <span class="s2">&quot;4169e1&quot;</span><span class="p">,</span>
+    <span class="nx">saddlebrown</span><span class="o">:</span> <span class="s2">&quot;8b4513&quot;</span><span class="p">,</span>
+    <span class="nx">salmon</span><span class="o">:</span> <span class="s2">&quot;fa8072&quot;</span><span class="p">,</span>
+    <span class="nx">sandybrown</span><span class="o">:</span> <span class="s2">&quot;f4a460&quot;</span><span class="p">,</span>
+    <span class="nx">seagreen</span><span class="o">:</span> <span class="s2">&quot;2e8b57&quot;</span><span class="p">,</span>
+    <span class="nx">seashell</span><span class="o">:</span> <span class="s2">&quot;fff5ee&quot;</span><span class="p">,</span>
+    <span class="nx">sienna</span><span class="o">:</span> <span class="s2">&quot;a0522d&quot;</span><span class="p">,</span>
+    <span class="nx">silver</span><span class="o">:</span> <span class="s2">&quot;c0c0c0&quot;</span><span class="p">,</span>
+    <span class="nx">skyblue</span><span class="o">:</span> <span class="s2">&quot;87ceeb&quot;</span><span class="p">,</span>
+    <span class="nx">slateblue</span><span class="o">:</span> <span class="s2">&quot;6a5acd&quot;</span><span class="p">,</span>
+    <span class="nx">slategray</span><span class="o">:</span> <span class="s2">&quot;708090&quot;</span><span class="p">,</span>
+    <span class="nx">slategrey</span><span class="o">:</span> <span class="s2">&quot;708090&quot;</span><span class="p">,</span>
+    <span class="nx">snow</span><span class="o">:</span> <span class="s2">&quot;fffafa&quot;</span><span class="p">,</span>
+    <span class="nx">springgreen</span><span class="o">:</span> <span class="s2">&quot;00ff7f&quot;</span><span class="p">,</span>
+    <span class="nx">steelblue</span><span class="o">:</span> <span class="s2">&quot;4682b4&quot;</span><span class="p">,</span>
+    <span class="nx">tan</span><span class="o">:</span> <span class="s2">&quot;d2b48c&quot;</span><span class="p">,</span>
+    <span class="nx">teal</span><span class="o">:</span> <span class="s2">&quot;008080&quot;</span><span class="p">,</span>
+    <span class="nx">thistle</span><span class="o">:</span> <span class="s2">&quot;d8bfd8&quot;</span><span class="p">,</span>
+    <span class="nx">tomato</span><span class="o">:</span> <span class="s2">&quot;ff6347&quot;</span><span class="p">,</span>
+    <span class="nx">turquoise</span><span class="o">:</span> <span class="s2">&quot;40e0d0&quot;</span><span class="p">,</span>
+    <span class="nx">violet</span><span class="o">:</span> <span class="s2">&quot;ee82ee&quot;</span><span class="p">,</span>
+    <span class="nx">wheat</span><span class="o">:</span> <span class="s2">&quot;f5deb3&quot;</span><span class="p">,</span>
+    <span class="nx">white</span><span class="o">:</span> <span class="s2">&quot;fff&quot;</span><span class="p">,</span>
+    <span class="nx">whitesmoke</span><span class="o">:</span> <span class="s2">&quot;f5f5f5&quot;</span><span class="p">,</span>
+    <span class="nx">yellow</span><span class="o">:</span> <span class="s2">&quot;ff0&quot;</span><span class="p">,</span>
+    <span class="nx">yellowgreen</span><span class="o">:</span> <span class="s2">&quot;9acd32&quot;</span>
+<span class="p">};</span></pre></div>             </td>           </tr>                               <tr id="section-33">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-33">&#182;</a>               </div>               <p>Make it easy to access colors via <code>hexNames[hex]</code></p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">var</span> <span class="nx">hexNames</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">hexNames</span> <span class="o">=</span> <span class="nx">flip</span><span class="p">(</span><span class="nx">names</span><span class="p">);</span></pre></div>             </td>           </tr>                               <tr id="section-34">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-34">&#182;</a>               </div>               <h2>Utilities</h2>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-35">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-35">&#182;</a>               </div>               <p><code>{ 'name1': 'val1' }</code> becomes <code>{ 'val1': 'name1' }</code></p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">flip</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">flipped</span> <span class="o">=</span> <span class="p">{</span> <span class="p">};</span>
+    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">i</span><span class="p">))</span> <span class="p">{</span>
+            <span class="nx">flipped</span><span class="p">[</span><span class="nx">o</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
+        <span class="p">}</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">flipped</span><span class="p">;</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-36">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-36">&#182;</a>               </div>               <p>Return a valid alpha value [0,1] with all invalid values being set to 1</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">boundAlpha</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">a</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="o">||</span> <span class="nx">a</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">||</span> <span class="nx">a</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">a</span><span class="p">;</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-37">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-37">&#182;</a>               </div>               <p>Take input from [0, n] and return it as [0, 1]</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">n</span><span class="p">,</span> <span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nx">isOnePointZero</span><span class="p">(</span><span class="nx">n</span><span class="p">))</span> <span class="p">{</span> <span class="nx">n</span> <span class="o">=</span> <span class="s2">&quot;100%&quot;</span><span class="p">;</span> <span class="p">}</span>
+    <span class="kd">var</span> <span class="nx">processPercent</span> <span class="o">=</span> <span class="nx">isPercentage</span><span class="p">(</span><span class="nx">n</span><span class="p">);</span>
+    <span class="nx">n</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="nx">max</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">n</span><span class="p">)));</span></pre></div>             </td>           </tr>                               <tr id="section-38">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-38">&#182;</a>               </div>               <p>Automatically convert percentage into number</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="p">(</span><span class="nx">processPercent</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">n</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">n</span> <span class="o">*</span> <span class="nx">max</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> <span class="o">/</span> <span class="mi">100</span><span class="p">;</span>
+    <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-39">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-39">&#182;</a>               </div>               <p>Handle floating point rounding errors</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="p">((</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="nx">max</span><span class="p">)</span> <span class="o">&lt;</span> <span class="mf">0.000001</span><span class="p">))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
+    <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-40">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-40">&#182;</a>               </div>               <p>Convert into [0, 1] range if it isn't already</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">return</span> <span class="p">(</span><span class="nx">n</span> <span class="o">%</span> <span class="nx">max</span><span class="p">)</span> <span class="o">/</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">max</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-41">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-41">&#182;</a>               </div>               <p>Force a number between 0 and 1</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">val</span><span class="p">));</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-42">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-42">&#182;</a>               </div>               <p>Parse a base-16 hex value into a base-10 integer</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="mi">16</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-43">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-43">&#182;</a>               </div>               <p>Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+<a href="http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0">http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0</a></p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">isOnePointZero</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="k">typeof</span> <span class="nx">n</span> <span class="o">==</span> <span class="s2">&quot;string&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">n</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;.&#39;</span><span class="p">)</span> <span class="o">!=</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="o">===</span> <span class="mi">1</span><span class="p">;</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-44">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-44">&#182;</a>               </div>               <p>Check to see if string passed in is a percentage</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">isPercentage</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="k">typeof</span> <span class="nx">n</span> <span class="o">===</span> <span class="s2">&quot;string&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">n</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;%&#39;</span><span class="p">)</span> <span class="o">!=</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-45">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-45">&#182;</a>               </div>               <p>Force a hex value to have 2 characters</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">pad2</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">1</span> <span class="o">?</span> <span class="s1">&#39;0&#39;</span> <span class="o">+</span> <span class="nx">c</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">c</span><span class="p">;</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-46">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-46">&#182;</a>               </div>               <p>Replace a decimal with it's percentage value</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">convertToPercentage</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">&lt;=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">n</span> <span class="o">=</span> <span class="p">(</span><span class="nx">n</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-47">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-47">&#182;</a>               </div>               <p>Converts a decimal to a hex value</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">convertDecimalToHex</span><span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-48">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-48">&#182;</a>               </div>               <p>Converts a hex value to a decimal</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">convertHexToDecimal</span><span class="p">(</span><span class="nx">h</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="p">(</span><span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">h</span><span class="p">)</span> <span class="o">/</span> <span class="mi">255</span><span class="p">);</span>
+<span class="p">}</span>
+<span class="kd">var</span> <span class="nx">matchers</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-49">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-49">&#182;</a>               </div>               <p><a href="http://www.w3.org/TR/css3-values/#integers">http://www.w3.org/TR/css3-values/#integers</a></p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="kd">var</span> <span class="nx">CSS_INTEGER</span> <span class="o">=</span> <span class="s2">&quot;[-\\+]?\\d+%?&quot;</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-50">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-50">&#182;</a>               </div>               <p><a href="http://www.w3.org/TR/css3-values/#number-value">http://www.w3.org/TR/css3-values/#number-value</a></p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="kd">var</span> <span class="nx">CSS_NUMBER</span> <span class="o">=</span> <span class="s2">&quot;[-\\+]?\\d*\\.\\d+%?&quot;</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-51">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-51">&#182;</a>               </div>               <p>Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="kd">var</span> <span class="nx">CSS_UNIT</span> <span class="o">=</span> <span class="s2">&quot;(?:&quot;</span> <span class="o">+</span> <span class="nx">CSS_NUMBER</span> <span class="o">+</span> <span class="s2">&quot;)|(?:&quot;</span> <span class="o">+</span> <span class="nx">CSS_INTEGER</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">;</span></pre></div>             </td>           </tr>                               <tr id="section-52">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-52">&#182;</a>               </div>               <p>Actual matching.
+Parentheses and commas are optional, but not required.
+Whitespace can take the place of commas or opening paren</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="kd">var</span> <span class="nx">PERMISSIVE_MATCH3</span> <span class="o">=</span> <span class="s2">&quot;[\\s|\\(]+(&quot;</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">&quot;)[,|\\s]+(&quot;</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">&quot;)[,|\\s]+(&quot;</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">&quot;)\\s*\\)?&quot;</span><span class="p">;</span>
+    <span class="kd">var</span> <span class="nx">PERMISSIVE_MATCH4</span> <span class="o">=</span> <span class="s2">&quot;[\\s|\\(]+(&quot;</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">&quot;)[,|\\s]+(&quot;</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">&quot;)[,|\\s]+(&quot;</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">&quot;)[,|\\s]+(&quot;</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">&quot;)\\s*\\)?&quot;</span><span class="p">;</span>
+    <span class="k">return</span> <span class="p">{</span>
+        <span class="nx">CSS_UNIT</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="nx">CSS_UNIT</span><span class="p">),</span>
+        <span class="nx">rgb</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">&quot;rgb&quot;</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH3</span><span class="p">),</span>
+        <span class="nx">rgba</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">&quot;rgba&quot;</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH4</span><span class="p">),</span>
+        <span class="nx">hsl</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">&quot;hsl&quot;</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH3</span><span class="p">),</span>
+        <span class="nx">hsla</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">&quot;hsla&quot;</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH4</span><span class="p">),</span>
+        <span class="nx">hsv</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">&quot;hsv&quot;</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH3</span><span class="p">),</span>
+        <span class="nx">hsva</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">&quot;hsva&quot;</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH4</span><span class="p">),</span>
+        <span class="nx">hex3</span><span class="o">:</span> <span class="sr">/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/</span><span class="p">,</span>
+        <span class="nx">hex6</span><span class="o">:</span> <span class="sr">/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/</span><span class="p">,</span>
+        <span class="nx">hex4</span><span class="o">:</span> <span class="sr">/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/</span><span class="p">,</span>
+        <span class="nx">hex8</span><span class="o">:</span> <span class="sr">/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/</span>
+    <span class="p">};</span>
+<span class="p">})();</span></pre></div>             </td>           </tr>                               <tr id="section-53">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-53">&#182;</a>               </div>               <p><code>isValidCSSUnit</code>
+Take in a single string / number and check to see if it looks like a CSS unit
+(see <code>matchers</code> above for definition).</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">isValidCSSUnit</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="o">!!</span><span class="nx">matchers</span><span class="p">.</span><span class="nx">CSS_UNIT</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-54">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-54">&#182;</a>               </div>               <p><code>stringInputToObject</code>
+Permissive string parsing.  Take in a number of formats, and output an object
+based on detected format.  Returns <code>{ r, g, b }</code> or <code>{ h, s, l }</code> or <code>{ h, s, v}</code></p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">function</span> <span class="nx">stringInputToObject</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">color</span> <span class="o">=</span> <span class="nx">color</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">trimLeft</span><span class="p">,</span><span class="s1">&#39;&#39;</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="nx">trimRight</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">).</span><span class="nx">toLowerCase</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">named</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nx">names</span><span class="p">[</span><span class="nx">color</span><span class="p">])</span> <span class="p">{</span>
+        <span class="nx">color</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="nx">color</span><span class="p">];</span>
+        <span class="nx">named</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">color</span> <span class="o">==</span> <span class="s1">&#39;transparent&#39;</span><span class="p">)</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s2">&quot;name&quot;</span> <span class="p">};</span>
+    <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-55">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-55">&#182;</a>               </div>               <p>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.</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="kd">var</span> <span class="nx">match</span><span class="p">;</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">rgba</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">],</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span> <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hsla</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">],</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span> <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hsv</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hsva</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">],</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span> <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hex8</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span>
+            <span class="nx">r</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]),</span>
+            <span class="nx">g</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]),</span>
+            <span class="nx">b</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]),</span>
+            <span class="nx">a</span><span class="o">:</span> <span class="nx">convertHexToDecimal</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">4</span><span class="p">]),</span>
+            <span class="nx">format</span><span class="o">:</span> <span class="nx">named</span> <span class="o">?</span> <span class="s2">&quot;name&quot;</span> <span class="o">:</span> <span class="s2">&quot;hex8&quot;</span>
+        <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hex6</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span>
+            <span class="nx">r</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]),</span>
+            <span class="nx">g</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]),</span>
+            <span class="nx">b</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]),</span>
+            <span class="nx">format</span><span class="o">:</span> <span class="nx">named</span> <span class="o">?</span> <span class="s2">&quot;name&quot;</span> <span class="o">:</span> <span class="s2">&quot;hex&quot;</span>
+        <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hex4</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span>
+            <span class="nx">r</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]),</span>
+            <span class="nx">g</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]),</span>
+            <span class="nx">b</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]),</span>
+            <span class="nx">a</span><span class="o">:</span> <span class="nx">convertHexToDecimal</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">4</span><span class="p">]),</span>
+            <span class="nx">format</span><span class="o">:</span> <span class="nx">named</span> <span class="o">?</span> <span class="s2">&quot;name&quot;</span> <span class="o">:</span> <span class="s2">&quot;hex8&quot;</span>
+        <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hex3</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
+        <span class="k">return</span> <span class="p">{</span>
+            <span class="nx">r</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]),</span>
+            <span class="nx">g</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]),</span>
+            <span class="nx">b</span><span class="o">:</span> <span class="nx">parseIntFromHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]),</span>
+            <span class="nx">format</span><span class="o">:</span> <span class="nx">named</span> <span class="o">?</span> <span class="s2">&quot;name&quot;</span> <span class="o">:</span> <span class="s2">&quot;hex&quot;</span>
+        <span class="p">};</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
+<span class="p">}</span>
+<span class="kd">function</span> <span class="nx">validateWCAG2Parms</span><span class="p">(</span><span class="nx">parms</span><span class="p">)</span> <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-56">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-56">&#182;</a>               </div>               <p>return valid WCAG2 parms for isReadable.
+If input parms are invalid, return {"level":"AA", "size":"small"}</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="kd">var</span> <span class="nx">level</span><span class="p">,</span> <span class="nx">size</span><span class="p">;</span>
+    <span class="nx">parms</span> <span class="o">=</span> <span class="nx">parms</span> <span class="o">||</span> <span class="p">{</span><span class="s2">&quot;level&quot;</span><span class="o">:</span><span class="s2">&quot;AA&quot;</span><span class="p">,</span> <span class="s2">&quot;size&quot;</span><span class="o">:</span><span class="s2">&quot;small&quot;</span><span class="p">};</span>
+    <span class="nx">level</span> <span class="o">=</span> <span class="p">(</span><span class="nx">parms</span><span class="p">.</span><span class="nx">level</span> <span class="o">||</span> <span class="s2">&quot;AA&quot;</span><span class="p">).</span><span class="nx">toUpperCase</span><span class="p">();</span>
+    <span class="nx">size</span> <span class="o">=</span> <span class="p">(</span><span class="nx">parms</span><span class="p">.</span><span class="nx">size</span> <span class="o">||</span> <span class="s2">&quot;small&quot;</span><span class="p">).</span><span class="nx">toLowerCase</span><span class="p">();</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nx">level</span> <span class="o">!==</span> <span class="s2">&quot;AA&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">level</span> <span class="o">!==</span> <span class="s2">&quot;AAA&quot;</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">level</span> <span class="o">=</span> <span class="s2">&quot;AA&quot;</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nx">size</span> <span class="o">!==</span> <span class="s2">&quot;small&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">size</span> <span class="o">!==</span> <span class="s2">&quot;large&quot;</span><span class="p">)</span> <span class="p">{</span>
+        <span class="nx">size</span> <span class="o">=</span> <span class="s2">&quot;small&quot;</span><span class="p">;</span>
+    <span class="p">}</span>
+    <span class="k">return</span> <span class="p">{</span><span class="s2">&quot;level&quot;</span><span class="o">:</span><span class="nx">level</span><span class="p">,</span> <span class="s2">&quot;size&quot;</span><span class="o">:</span><span class="nx">size</span><span class="p">};</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-57">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-57">&#182;</a>               </div>               <p>Node: Export function</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">module</span> <span class="o">!==</span> <span class="s2">&quot;undefined&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">;</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-58">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-58">&#182;</a>               </div>               <p>AMD/requirejs: Define the module</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">define</span> <span class="o">===</span> <span class="s1">&#39;function&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">define</span><span class="p">.</span><span class="nx">amd</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">define</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span><span class="k">return</span> <span class="nx">tinycolor</span><span class="p">;});</span>
+<span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-59">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-59">&#182;</a>               </div>               <p>Browser: Expose to window</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="k">else</span> <span class="p">{</span>
+    <span class="nb">window</span><span class="p">.</span><span class="nx">tinycolor</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">;</span>
+<span class="p">}</span>
+<span class="p">})(</span><span class="nb">Math</span><span class="p">);</span>
+</pre></div>             </td>           </tr>                </tbody>     </table>   </div> </body> </html>