d2-ui
Version:
1,023 lines • 222 kB
HTML
<!DOCTYPE html> <html> <head> <title>tinycolor.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> tinycolor.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <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">''</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">¶</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">¶</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">¶</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"><</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"><</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"><</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"><</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">¶</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">¶</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"><=</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"><=</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"><=</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">"hsv("</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">v</span> <span class="o">+</span> <span class="s2">"%)"</span> <span class="o">:</span>
<span class="s2">"hsva("</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">v</span> <span class="o">+</span> <span class="s2">"%, "</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">")"</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">"hsl("</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">l</span> <span class="o">+</span> <span class="s2">"%)"</span> <span class="o">:</span>
<span class="s2">"hsla("</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">l</span> <span class="o">+</span> <span class="s2">"%, "</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">")"</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">'#'</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">'#'</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">"rgb("</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">", "</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">", "</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">")"</span> <span class="o">:</span>
<span class="s2">"rgba("</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">", "</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">", "</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">", "</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">")"</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">"%"</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">"%"</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">"%"</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">"rgb("</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">"%, "</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">"%, "</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">"%)"</span> <span class="o">:</span>
<span class="s2">"rgba("</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">"%, "</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">"%, "</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">"%, "</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">")"</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">"transparent"</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">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">'#'</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">"GradientType = 1, "</span> <span class="o">:</span> <span class="s2">""</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">'#'</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">"progid:DXImageTransform.Microsoft.gradient("</span><span class="o">+</span><span class="nx">gradientType</span><span class="o">+</span><span class="s2">"startColorstr="</span><span class="o">+</span><span class="nx">hex8String</span><span class="o">+</span><span class="s2">",endColorstr="</span><span class="o">+</span><span class="nx">secondHex8String</span><span class="o">+</span><span class="s2">")"</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"><</span> <span class="mi">1</span> <span class="o">&&</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="kd">var</span> <span class="nx">needsAlphaFormat</span> <span class="o">=</span> <span class="o">!</span><span class="nx">formatSet</span> <span class="o">&&</span> <span class="nx">hasAlpha</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex"</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex6"</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex3"</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex4"</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex8"</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">"name"</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">¶</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">"name"</span> <span class="o">&&</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">"rgb"</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">"prgb"</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">"hex"</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex6"</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">"hex3"</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">"hex4"</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">"hex8"</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">"name"</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">"hsl"</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">"hsv"</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">¶</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">"object"</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">"a"</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">¶</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">"string"</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">"object"</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">&&</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">&&</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">"%"</span> <span class="o">?</span> <span class="s2">"prgb"</span> <span class="o">:</span> <span class="s2">"rgb"</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">&&</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">&&</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">"hsv"</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">&&</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">&&</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">"hsl"</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">"a"</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">¶</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">¶</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">¶</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">¶</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">></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"><</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">¶</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"><</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">></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"><</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"><</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"><</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"><</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">¶</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"><</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">¶</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">¶</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">¶</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">&&</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">&&</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">&&</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">""</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">¶</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">¶</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">&&</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">&&</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">&&</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">&&</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">""</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">¶</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">""</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">¶</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">¶</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">¶</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"><</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">¶</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">>></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">¶</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">¶</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">¶</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">¶</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">¶</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">"AAsmall"</span><span class="o">:</span>
<span class="k">case</span> <span class="s2">"AAAlarge"</span><span class="o">:</span>
<span class="nx">out</span> <span class="o">=</span> <span class="nx">readability</span> <span class="o">>=</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">"AAlarge"</span><span class="o">:</span>
<span class="nx">out</span> <span class="o">=</span> <span class="nx">readability</span> <span class="o">>=</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">"AAAsmall"</span><span class="o">:</span>
<span class="nx">out</span> <span class="o">=</span> <span class="nx">readability</span> <span class="o">>=</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">¶</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"><</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">></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">"level"</span><span class="o">:</span><span class="nx">level</span><span class="p">,</span><span class="s2">"size"</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">"#fff"</span><span class="p">,</span> <span class="s2">"#000"</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">¶</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">"f0f8ff"</span><span class="p">,</span>
<span class="nx">antiquewhite</span><span class="o">:</span> <span class="s2">"faebd7"</span><span class="p">,</span>
<span class="nx">aqua</span><span class="o">:</span> <span class="s2">"0ff"</span><span class="p">,</span>
<span class="nx">aquamarine</span><span class="o">:</span> <span class="s2">"7fffd4"</span><span class="p">,</span>
<span class="nx">azure</span><span class="o">:</span> <span class="s2">"f0ffff"</span><span class="p">,</span>
<span class="nx">beige</span><span class="o">:</span> <span class="s2">"f5f5dc"</span><span class="p">,</span>
<span class="nx">bisque</span><span class="o">:</span> <span class="s2">"ffe4c4"</span><span class="p">,</span>
<span class="nx">black</span><span class="o">:</span> <span class="s2">"000"</span><span class="p">,</span>
<span class="nx">blanchedalmond</span><span class="o">:</span> <span class="s2">"ffebcd"</span><span class="p">,</span>
<span class="nx">blue</span><span class="o">:</span> <span class="s2">"00f"</span><span class="p">,</span>
<span class="nx">blueviolet</span><span class="o">:</span> <span class="s2">"8a2be2"</span><span class="p">,</span>
<span class="nx">brown</span><span class="o">:</span> <span class="s2">"a52a2a"</span><span class="p">,</span>
<span class="nx">burlywood</span><span class="o">:</span> <span class="s2">"deb887"</span><span class="p">,</span>
<span class="nx">burntsienna</span><span class="o">:</span> <span class="s2">"ea7e5d"</span><span class="p">,</span>
<span class="nx">cadetblue</span><span class="o">:</span> <span class="s2">"5f9ea0"</span><span class="p">,</span>
<span class="nx">chartreuse</span><span class="o">:</span> <span class="s2">"7fff00"</span><span class="p">,</span>
<span class="nx">chocolate</span><span class="o">:</span> <span class="s2">"d2691e"</span><span class="p">,</span>
<span class="nx">coral</span><span class="o">:</span> <span class="s2">"ff7f50"</span><span class="p">,</span>
<span class="nx">cornflowerblue</span><span class="o">:</span> <span class="s2">"6495ed"</span><span class="p">,</span>
<span class="nx">cornsilk</span><span class="o">:</span> <span class="s2">"fff8dc"</span><span class="p">,</span>
<span class="nx">crimson</span><span class="o">:</span> <span class="s2">"dc143c"</span><span class="p">,</span>
<span class="nx">cyan</span><span class="o">:</span> <span class="s2">"0ff"</span><span class="p">,</span>
<span class="nx">darkblue</span><span class="o">:</span> <span class="s2">"00008b"</span><span class="p">,</span>
<span class="nx">darkcyan</span><span class="o">:</span> <span class="s2">"008b8b"</span><span class="p">,</span>
<span class="nx">darkgoldenrod</span><span class="o">:</span> <span class="s2">"b8860b"</span><span class="p">,</span>
<span class="nx">darkgray</span><span class="o">:</span> <span class="s2">"a9a9a9"</span><span class="p">,</span>
<span class="nx">darkgreen</span><span class="o">:</span> <span class="s2">"006400"</span><span class="p">,</span>
<span class="nx">darkgrey</span><span class="o">:</span> <span class="s2">"a9a9a9"</span><span class="p">,</span>
<span class="nx">darkkhaki</span><span class="o">:</span> <span class="s2">"bdb76b"</span><span class="p">,</span>
<span class="nx">darkmagenta</span><span class="o">:</span> <span class="s2">"8b008b"</span><span class="p">,</span>
<span class="nx">darkolivegreen</span><span class="o">:</span> <span class="s2">"556b2f"</span><span class="p">,</span>
<span class="nx">darkorange</span><span class="o">:</span> <span class="s2">"ff8c00"</span><span class="p">,</span>
<span class="nx">darkorchid</span><span class="o">:</span> <span class="s2">"9932cc"</span><span class="p">,</span>
<span class="nx">darkred</span><span class="o">:</span> <span class="s2">"8b0000"</span><span class="p">,</span>
<span class="nx">darksalmon</span><span class="o">:</span> <span class="s2">"e9967a"</span><span class="p">,</span>
<span class="nx">darkseagreen</span><span class="o">:</span> <span class="s2">"8fbc8f"</span><span class="p">,</span>
<span class="nx">darkslateblue</span><span class="o">:</span> <span class="s2">"483d8b"</span><span class="p">,</span>
<span class="nx">darkslategray</span><span class="o">:</span> <span class="s2">"2f4f4f"</span><span class="p">,</span>
<span class="nx">darkslategrey</span><span class="o">:</span> <span class="s2">"2f4f4f"</span><span class="p">,</span>
<span class="nx">darkturquoise</span><span class="o">:</span> <span class="s2">"00ced1"</span><span class="p">,</span>
<span class="nx">darkviolet</span><span class="o">:</span> <span class="s2">"9400d3"</span><span class="p">,</span>
<span class="nx">deeppink</span><span class="o">:</span> <span class="s2">"ff1493"</span><span class="p">,</span>
<span class="nx">deepskyblue</span><span class="o">:</span> <span class="s2">"00bfff"</span><span class="p">,</span>
<span class="nx">dimgray</span><span class="o">:</span> <span class="s2">"696969"</span><span class="p">,</span>
<span class="nx">dimgrey</span><span class="o">:</span> <span class="s2">"696969"</span><span class="p">,</span>
<span class="nx">dodgerblue</span><span class="o">:</span> <span class="s2">"1e90ff"</span><span class="p">,</span>
<span class="nx">firebrick</span><span class="o">:</span> <span class="s2">"b22222"</span><span class="p">,</span>
<span class="nx">floralwhite</span><span class="o">:</span> <span class="s2">"fffaf0"</span><span class="p">,</span>
<span class="nx">forestgreen</span><span class="o">:</span> <span class="s2">"228b22"</span><span class="p">,</span>
<span class="nx">fuchsia</span><span class="o">:</span> <span class="s2">"f0f"</span><span class="p">,</span>
<span class="nx">gainsboro</span><span class="o">:</span> <span class="s2">"dcdcdc"</span><span class="p">,</span>
<span class="nx">ghostwhite</span><span class="o">:</span> <span class="s2">"f8f8ff"</span><span class="p">,</span>
<span class="nx">gold</span><span class="o">:</span> <span class="s2">"ffd700"</span><span class="p">,</span>
<span class="nx">goldenrod</span><span class="o">:</span> <span class="s2">"daa520"</span><span class="p">,</span>
<span class="nx">gray</span><span class="o">:</span> <span class="s2">"808080"</span><span class="p">,</span>
<span class="nx">green</span><span class="o">:</span> <span class="s2">"008000"</span><span class="p">,</span>
<span class="nx">greenyellow</span><span class="o">:</span> <span class="s2">"adff2f"</span><span class="p">,</span>
<span class="nx">grey</span><span class="o">:</span> <span class="s2">"808080"</span><span class="p">,</span>
<span class="nx">honeydew</span><span class="o">:</span> <span class="s2">"f0fff0"</span><span class="p">,</span>
<span class="nx">hotpink</span><span class="o">:</span> <span class="s2">"ff69b4"</span><span class="p">,</span>
<span class="nx">indianred</span><span class="o">:</span> <span class="s2">"cd5c5c"</span><span class="p">,</span>
<span class="nx">indigo</span><span class="o">:</span> <span class="s2">"4b0082"</span><span class="p">,</span>
<span class="nx">ivory</span><span class="o">:</span> <span class="s2">"fffff0"</span><span class="p">,</span>
<span class="nx">khaki</span><span class="o">:</span> <span class="s2">"f0e68c"</span><span class="p">,</span>
<span class="nx">lavender</span><span class="o">:</span> <span class="s2">"e6e6fa"</span><span class="p">,</span>
<span class="nx">lavenderblush</span><span class="o">:</span> <span class="s2">"fff0f5"</span><span class="p">,</span>
<span class="nx">lawngreen</span><span class="o">:</span> <span class="s2">"7cfc00"</span><span class="p">,</span>
<span class="nx">lemonchiffon</span><span class="o">:</span> <span class="s2">"fffacd"</span><span class="p">,</span>
<span class="nx">lightblue</span><span class="o">:</span> <span class="s2">"add8e6"</span><span class="p">,</span>
<span class="nx">lightcoral</span><span class="o">:</span> <span class="s2">"f08080"</span><span class="p">,</span>
<span class="nx">lightcyan</span><span class="o">:</span> <span class="s2">"e0ffff"</span><span class="p">,</span>
<span class="nx">lightgoldenrodyellow</span><span class="o">:</span> <span class="s2">"fafad2"</span><span class="p">,</span>
<span class="nx">lightgray</span><span class="o">:</span> <span class="s2">"d3d3d3"</span><span class="p">,</span>
<span class="nx">lightgreen</span><span class="o">:</span> <span class="s2">"90ee90"</span><span class="p">,</span>
<span class="nx">lightgrey</span><span class="o">:</span> <span class="s2">"d3d3d3"</span><span class="p">,</span>
<span class="nx">lightpink</span><span class="o">:</span> <span class="s2">"ffb6c1"</span><span class="p">,</span>
<span class="nx">lightsalmon</span><span class="o">:</span> <span class="s2">"ffa07a"</span><span class="p">,</span>
<span class="nx">lightseagreen</span><span class="o">:</span> <span class="s2">"20b2aa"</span><span class="p">,</span>
<span class="nx">lightskyblue</span><span class="o">:</span> <span class="s2">"87cefa"</span><span class="p">,</span>
<span class="nx">lightslategray</span><span class="o">:</span> <span class="s2">"789"</span><span class="p">,</span>
<span class="nx">lightslategrey</span><span class="o">:</span> <span class="s2">"789"</span><span class="p">,</span>
<span class="nx">lightsteelblue</span><span class="o">:</span> <span class="s2">"b0c4de"</span><span class="p">,</span>
<span class="nx">lightyellow</span><span class="o">:</span> <span class="s2">"ffffe0"</span><span class="p">,</span>
<span class="nx">lime</span><span class="o">:</span> <span class="s2">"0f0"</span><span class="p">,</span>
<span class="nx">limegreen</span><span class="o">:</span> <span class="s2">"32cd32"</span><span class="p">,</span>
<span class="nx">linen</span><span class="o">:</span> <span class="s2">"faf0e6"</span><span class="p">,</span>
<span class="nx">magenta</span><span class="o">:</span> <span class="s2">"f0f"</span><span class="p">,</span>
<span class="nx">maroon</span><span class="o">:</span> <span class="s2">"800000"</span><span class="p">,</span>
<span class="nx">mediumaquamarine</span><span class="o">:</span> <span class="s2">"66cdaa"</span><span class="p">,</span>
<span class="nx">mediumblue</span><span class="o">:</span> <span class="s2">"0000cd"</span><span class="p">,</span>
<span class="nx">mediumorchid</span><span class="o">:</span> <span class="s2">"ba55d3"</span><span class="p">,</span>
<span class="nx">mediumpurple</span><span class="o">:</span> <span class="s2">"9370db"</span><span class="p">,</span>
<span class="nx">mediumseagreen</span><span class="o">:</span> <span class="s2">"3cb371"</span><span class="p">,</span>
<span class="nx">mediumslateblue</span><span class="o">:</span> <span class="s2">"7b68ee"</span><span class="p">,</span>
<span class="nx">mediumspringgreen</span><span class="o">:</span> <span class="s2">"00fa9a"</span><span class="p">,</span>
<span class="nx">mediumturquoise</span><span class="o">:</span> <span class="s2">"48d1cc"</span><span class="p">,</span>
<span class="nx">mediumvioletred</span><span class="o">:</span> <span class="s2">"c71585"</span><span class="p">,</span>
<span class="nx">midnightblue</span><span class="o">:</span> <span class="s2">"191970"</span><span class="p">,</span>
<span class="nx">mintcream</span><span class="o">:</span> <span class="s2">"f5fffa"</span><span class="p">,</span>
<span class="nx">mistyrose</span><span class="o">:</span> <span class="s2">"ffe4e1"</span><span class="p">,</span>
<span class="nx">moccasin</span><span class="o">:</span> <span class="s2">"ffe4b5"</span><span class="p">,</span>
<span class="nx">navajowhite</span><span class="o">:</span> <span class="s2">"ffdead"</span><span class="p">,</span>
<span class="nx">navy</span><span class="o">:</span> <span class="s2">"000080"</span><span class="p">,</span>
<span class="nx">oldlace</span><span class="o">:</span> <span class="s2">"fdf5e6"</span><span class="p">,</span>
<span class="nx">olive</span><span class="o">:</span> <span class="s2">"808000"</span><span class="p">,</span>
<span class="nx">olivedrab</span><span class="o">:</span> <span class="s2">"6b8e23"</span><span class="p">,</span>
<span class="nx">orange</span><span class="o">:</span> <span class="s2">"ffa500"</span><span class="p">,</span>
<span class="nx">orangered</span><span class="o">:</span> <span class="s2">"ff4500"</span><span class="p">,</span>
<span class="nx">orchid</span><span class="o">:</span> <span class="s2">"da70d6"</span><span class="p">,</span>
<span class="nx">palegoldenrod</span><span class="o">:</span> <span class="s2">"eee8aa"</span><span class="p">,</span>
<span class="nx">palegreen</span><span class="o">:</span> <span class="s2">"98fb98"</span><span class="p">,</span>
<span class="nx">paleturquoise</span><span class="o">:</span> <span class="s2">"afeeee"</span><span class="p">,</span>
<span class="nx">palevioletred</span><span class="o">:</span> <span class="s2">"db7093"</span><span class="p">,</span>
<span class="nx">papayawhip</span><span class="o">:</span> <span class="s2">"ffefd5"</span><span class="p">,</span>
<span class="nx">peachpuff</span><span class="o">:</span> <span class="s2">"ffdab9"</span><span class="p">,</span>
<span class="nx">peru</span><span class="o">:</span> <span class="s2">"cd853f"</span><span class="p">,</span>
<span class="nx">pink</span><span class="o">:</span> <span class="s2">"ffc0cb"</span><span class="p">,</span>
<span class="nx">plum</span><span class="o">:</span> <span class="s2">"dda0dd"</span><span class="p">,</span>
<span class="nx">powderblue</span><span class="o">:</span> <span class="s2">"b0e0e6"</span><span class="p">,</span>
<span class="nx">purple</span><span class="o">:</span> <span class="s2">"800080"</span><span class="p">,</span>
<span class="nx">rebeccapurple</span><span class="o">:</span> <span class="s2">"663399"</span><span class="p">,</span>
<span class="nx">red</span><span class="o">:</span> <span class="s2">"f00"</span><span class="p">,</span>
<span class="nx">rosybrown</span><span class="o">:</span> <span class="s2">"bc8f8f"</span><span class="p">,</span>
<span class="nx">royalblue</span><span class="o">:</span> <span class="s2">"4169e1"</span><span class="p">,</span>
<span class="nx">saddlebrown</span><span class="o">:</span> <span class="s2">"8b4513"</span><span class="p">,</span>
<span class="nx">salmon</span><span class="o">:</span> <span class="s2">"fa8072"</span><span class="p">,</span>
<span class="nx">sandybrown</span><span class="o">:</span> <span class="s2">"f4a460"</span><span class="p">,</span>
<span class="nx">seagreen</span><span class="o">:</span> <span class="s2">"2e8b57"</span><span class="p">,</span>
<span class="nx">seashell</span><span class="o">:</span> <span class="s2">"fff5ee"</span><span class="p">,</span>
<span class="nx">sienna</span><span class="o">:</span> <span class="s2">"a0522d"</span><span class="p">,</span>
<span class="nx">silver</span><span class="o">:</span> <span class="s2">"c0c0c0"</span><span class="p">,</span>
<span class="nx">skyblue</span><span class="o">:</span> <span class="s2">"87ceeb"</span><span class="p">,</span>
<span class="nx">slateblue</span><span class="o">:</span> <span class="s2">"6a5acd"</span><span class="p">,</span>
<span class="nx">slategray</span><span class="o">:</span> <span class="s2">"708090"</span><span class="p">,</span>
<span class="nx">slategrey</span><span class="o">:</span> <span class="s2">"708090"</span><span class="p">,</span>
<span class="nx">snow</span><span class="o">:</span> <span class="s2">"fffafa"</span><span class="p">,</span>
<span class="nx">springgreen</span><span class="o">:</span> <span class="s2">"00ff7f"</span><span class="p">,</span>
<span class="nx">steelblue</span><span class="o">:</span> <span class="s2">"4682b4"</span><span class="p">,</span>
<span class="nx">tan</span><span class="o">:</span> <span class="s2">"d2b48c"</span><span class="p">,</span>
<span class="nx">teal</span><span class="o">:</span> <span class="s2">"008080"</span><span class="p">,</span>
<span class="nx">thistle</span><span class="o">:</span> <span class="s2">"d8bfd8"</span><span class="p">,</span>
<span class="nx">tomato</span><span class="o">:</span> <span class="s2">"ff6347"</span><span class="p">,</span>
<span class="nx">turquoise</span><span class="o">:</span> <span class="s2">"40e0d0"</span><span class="p">,</span>
<span class="nx">violet</span><span class="o">:</span> <span class="s2">"ee82ee"</span><span class="p">,</span>
<span class="nx">wheat</span><span class="o">:</span> <span class="s2">"f5deb3"</span><span class="p">,</span>
<span class="nx">white</span><span class="o">:</span> <span class="s2">"fff"</span><span class="p">,</span>
<span class="nx">whitesmoke</span><span class="o">:</span> <span class="s2">"f5f5f5"</span><span class="p">,</span>
<span class="nx">yellow</span><span class="o">:</span> <span class="s2">"ff0"</span><span class="p">,</span>
<span class="nx">yellowgreen</span><span class="o">:</span> <span class="s2">"9acd32"</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">¶</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">¶</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">¶</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">¶</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"><</span> <span class="mi">0</span> <span class="o">||</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="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">¶</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">"100%"</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">¶</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">¶</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"><</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">¶</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">¶</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">¶</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">¶</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">"string"</span> <span class="o">&&</span> <span class="nx">n</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'.'</span><span class="p">)</span> <span class="o">!=</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</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">¶</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">"string"</span> <span class="o">&&</span> <span class="nx">n</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'%'</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">¶</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">'0'</span> <span class="o">+</span> <span class="nx">c</span> <span class="o">:</span> <span class="s1">''</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">¶</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"><=</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">"%"</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">¶</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">¶</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">¶</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">"[-\\+]?\\d+%?"</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">¶</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">"[-\\+]?\\d*\\.\\d+%?"</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">¶</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">"(?:"</span> <span class="o">+</span> <span class="nx">CSS_NUMBER</span> <span class="o">+</span> <span class="s2">")|(?:"</span> <span class="o">+</span> <span class="nx">CSS_INTEGER</span> <span class="o">+</span> <span class="s2">")"</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">¶</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">"[\\s|\\(]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")\\s*\\)?"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">PERMISSIVE_MATCH4</span> <span class="o">=</span> <span class="s2">"[\\s|\\(]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")\\s*\\)?"</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">"rgb"</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">"rgba"</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">"hsl"</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">"hsla"</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">"hsv"</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">"hsva"</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">¶</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">¶</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">''</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">''</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">'transparent'</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">"name"</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">¶</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">"name"</span> <span class="o">:</span> <span class="s2">"hex8"</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">"name"</span> <span class="o">:</span> <span class="s2">"hex"</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">''</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">''</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">''</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">''</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">"name"</span> <span class="o">:</span> <span class="s2">"hex8"</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">''</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">''</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">''</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">"name"</span> <span class="o">:</span> <span class="s2">"hex"</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">¶</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">"level"</span><span class="o">:</span><span class="s2">"AA"</span><span class="p">,</span> <span class="s2">"size"</span><span class="o">:</span><span class="s2">"small"</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">"AA"</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">"small"</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">"AA"</span> <span class="o">&&</span> <span class="nx">level</span> <span class="o">!==</span> <span class="s2">"AAA"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">level</span> <span class="o">=</span> <span class="s2">"AA"</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">"small"</span> <span class="o">&&</span> <span class="nx">size</span> <span class="o">!==</span> <span class="s2">"large"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">size</span> <span class="o">=</span> <span class="s2">"small"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span><span class="s2">"level"</span><span class="o">:</span><span class="nx">level</span><span class="p">,</span> <span class="s2">"size"</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">¶</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">"undefined"</span> <span class="o">&&</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">¶</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">'function'</span> <span class="o">&&</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">¶</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>