tinycolor2
Version:
Fast Color Parsing and Manipulation
385 lines (379 loc) • 10.8 kB
HTML
<html>
<head>
<script type='text/javascript' src='../demo/jquery-1.6.1.js'></script>
</head>
<body>
<table class="wikitable" style="text-align:right;" cellpadding="6">
<tbody><tr style="text-align:center;" valign="baseline">
<th>Color</th>
<th style="min-width:3.2em;"><i>R</i></th>
<th style="min-width:3.2em;"><i>G</i></th>
<th style="min-width:3.2em;"><i>B</i></th>
<th style="min-width:3.2em;"><i>H</i></th>
<th style="min-width:3.2em;"><i>H</i><sub>2</sub></th>
<th style="min-width:3.2em;"><i>C</i></th>
<th style="min-width:3.2em;"><i>C</i><sub>2</sub></th>
<th style="min-width:3.2em;"><i>V</i></th>
<th style="min-width:3.2em;"><i>L</i></th>
<th style="min-width:3.2em;"><i>I</i></th>
<th style="min-width:3.2em;"><i>Y?</i><sub>601</sub></th>
<th style="min-width:3.2em;"><i>S</i><sub><i>HSV</i></sub></th>
<th style="min-width:3.2em;"><i>S</i><sub><i>HSL</i></sub></th>
<th style="min-width:3.2em;"><i>S</i><sub><i>HSI</i></sub></th>
</tr>
<tr>
<td style="background-color:#FFFFFF; color:#FFFFFF" title="#FFFFFF"><span style="display:none">&10000000000000000000000</span><tt>#FFFFFF</tt></td>
<td>1.000</td>
<td>1.000</td>
<td>1.000</td>
<td style="padding-right:.5em;">n/a</td>
<td style="padding-right:.5em;">n/a</td>
<td>0.000</td>
<td>0.000</td>
<td>1.000</td>
<td>1.000</td>
<td>1.000</td>
<td>1.000</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
</tr>
<tr>
<td style="background-color:#808080; color:#808080" title="#808080"><span style="display:none">&10000000000000001000000</span><tt>#808080</tt></td>
<td>0.500</td>
<td>0.500</td>
<td>0.500</td>
<td style="padding-right:.5em;">n/a</td>
<td style="padding-right:.5em;">n/a</td>
<td>0.000</td>
<td>0.000</td>
<td>0.500</td>
<td>0.500</td>
<td>0.500</td>
<td>0.500</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
</tr>
<tr>
<td style="background-color:#000000; color:#000000" title="#000000"><span style="display:none">&10000000000000002000000</span><tt>#000000</tt></td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
<td style="padding-right:.5em;">n/a</td>
<td style="padding-right:.5em;">n/a</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
<td>0.000</td>
</tr>
<tr>
<td style="background-color:#FF0000; color:#FF0000" title="#FF0000"><span style="display:none">&10000000000000003000000</span><tt>#FF0000</tt></td>
<td>1.000</td>
<td>0.000</td>
<td>0.000</td>
<td><span style="display:none">&10000000000000000000000</span>0.0�</td>
<td><span style="display:none">&10000000000000000000000</span>0.0�</td>
<td>1.000</td>
<td>1.000</td>
<td>1.000</td>
<td>0.500</td>
<td>0.333</td>
<td>0.299</td>
<td>1.000</td>
<td>1.000</td>
<td>1.000</td>
</tr>
<tr>
<td style="background-color:#BFBF00; color:#BFBF00" title="#BFBF00"><span style="display:none">&10000000000000004000000</span><tt>#BFBF00</tt></td>
<td>0.750</td>
<td>0.750</td>
<td>0.000</td>
<td><span style="display:none">&10000000000000060000000</span>60.0�</td>
<td><span style="display:none">&10000000000000060000000</span>60.0�</td>
<td>0.750</td>
<td>0.750</td>
<td>0.750</td>
<td>0.375</td>
<td>0.500</td>
<td>0.664</td>
<td>1.000</td>
<td>1.000</td>
<td>1.000</td>
</tr>
<tr>
<td style="background-color:#008000; color:#008000" title="#008000"><span style="display:none">&10000000000000005000000</span><tt>#008000</tt></td>
<td>0.000</td>
<td>0.500</td>
<td>0.000</td>
<td><span style="display:none">&10000000000000120000000</span>120.0�</td>
<td><span style="display:none">&10000000000000120000000</span>120.0�</td>
<td>0.500</td>
<td>0.500</td>
<td>0.500</td>
<td>0.250</td>
<td>0.167</td>
<td>0.293</td>
<td>1.000</td>
<td>1.000</td>
<td>1.000</td>
</tr>
<tr>
<td style="background-color:#80FFFF; color:#80FFFF" title="#80FFFF"><span style="display:none">&10000000000000006000000</span><tt>#80FFFF</tt></td>
<td>0.500</td>
<td>1.000</td>
<td>1.000</td>
<td><span style="display:none">&10000000000000180000000</span>180.0�</td>
<td><span style="display:none">&10000000000000180000000</span>180.0�</td>
<td>0.500</td>
<td>0.500</td>
<td>1.000</td>
<td>0.750</td>
<td>0.833</td>
<td>0.850</td>
<td>0.500</td>
<td>1.000</td>
<td>0.400</td>
</tr>
<tr>
<td style="background-color:#8080FF; color:#8080FF" title="#8080FF"><span style="display:none">&10000000000000007000000</span><tt>#8080FF</tt></td>
<td>0.500</td>
<td>0.500</td>
<td>1.000</td>
<td><span style="display:none">&10000000000000240000000</span>240.0�</td>
<td><span style="display:none">&10000000000000240000000</span>240.0�</td>
<td>0.500</td>
<td>0.500</td>
<td>1.000</td>
<td>0.750</td>
<td>0.667</td>
<td>0.557</td>
<td>0.500</td>
<td>1.000</td>
<td>0.250</td>
</tr>
<tr>
<td style="background-color:#BF40BF; color:#BF40BF" title="#BF40BF"><span style="display:none">&10000000000000008000000</span><tt>#BF40BF</tt></td>
<td>0.750</td>
<td>0.250</td>
<td>0.750</td>
<td><span style="display:none">&10000000000000300000000</span>300.0�</td>
<td><span style="display:none">&10000000000000300000000</span>300.0�</td>
<td>0.500</td>
<td>0.500</td>
<td>0.750</td>
<td>0.500</td>
<td>0.583</td>
<td>0.457</td>
<td>0.667</td>
<td>0.500</td>
<td>0.571</td>
</tr>
<tr>
<td style="background-color:#A0A424; color:#A0A424" title="#A0A424"><span style="display:none">&10000000000000009000000</span><tt>#A0A424</tt></td>
<td>0.628</td>
<td>0.643</td>
<td>0.142</td>
<td><span style="display:none">&10000000000000061799999</span>61.8�</td>
<td><span style="display:none">&10000000000000061500000</span>61.5�</td>
<td>0.501</td>
<td>0.494</td>
<td>0.643</td>
<td>0.393</td>
<td>0.471</td>
<td>0.581</td>
<td>0.779</td>
<td>0.638</td>
<td>0.699</td>
</tr>
<tr>
<td style="background-color:#411BEA; color:#411BEA" title="#411BEA"><span style="display:none">&10000000000000010000000</span><tt>#411BEA</tt></td>
<td>0.255</td>
<td>0.104</td>
<td>0.918</td>
<td><span style="display:none">&10000000000000251099999</span>251.1�</td>
<td><span style="display:none">&10000000000000250000000</span>250.0�</td>
<td>0.814</td>
<td>0.750</td>
<td>0.918</td>
<td>0.511</td>
<td>0.426</td>
<td>0.242</td>
<td>0.887</td>
<td>0.832</td>
<td>0.756</td>
</tr>
<tr>
<td style="background-color:#1EAC41; color:#1EAC41" title="#1EAC41"><span style="display:none">&10000000000000011000000</span><tt>#1EAC41</tt></td>
<td>0.116</td>
<td>0.675</td>
<td>0.255</td>
<td><span style="display:none">&10000000000000134900000</span>134.9�</td>
<td><span style="display:none">&10000000000000133800000</span>133.8�</td>
<td>0.559</td>
<td>0.504</td>
<td>0.675</td>
<td>0.396</td>
<td>0.349</td>
<td>0.460</td>
<td>0.828</td>
<td>0.707</td>
<td>0.667</td>
</tr>
<tr>
<td style="background-color:#F0C80E; color:#F0C80E" title="#F0C80E"><span style="display:none">&10000000000000012000000</span><tt>#F0C80E</tt></td>
<td>0.941</td>
<td>0.785</td>
<td>0.053</td>
<td><span style="display:none">&10000000000000049500000</span>49.5�</td>
<td><span style="display:none">&10000000000000050500000</span>50.5�</td>
<td>0.888</td>
<td>0.821</td>
<td>0.941</td>
<td>0.497</td>
<td>0.593</td>
<td>0.748</td>
<td>0.944</td>
<td>0.893</td>
<td>0.911</td>
</tr>
<tr>
<td style="background-color:#B430E5; color:#B430E5" title="#B430E5"><span style="display:none">&10000000000000013000000</span><tt>#B430E5</tt></td>
<td>0.704</td>
<td>0.187</td>
<td>0.897</td>
<td><span style="display:none">&10000000000000283699999</span>283.7�</td>
<td><span style="display:none">&10000000000000284800000</span>284.8�</td>
<td>0.710</td>
<td>0.636</td>
<td>0.897</td>
<td>0.542</td>
<td>0.596</td>
<td>0.423</td>
<td>0.792</td>
<td>0.775</td>
<td>0.686</td>
</tr>
<tr>
<td style="background-color:#ED7651; color:#ED7651" title="#ED7651"><span style="display:none">&10000000000000014000000</span><tt>#ED7651</tt></td>
<td>0.931</td>
<td>0.463</td>
<td>0.316</td>
<td><span style="display:none">&10000000000000014300000</span>14.3�</td>
<td><span style="display:none">&10000000000000013199999</span>13.2�</td>
<td>0.615</td>
<td>0.556</td>
<td>0.931</td>
<td>0.624</td>
<td>0.570</td>
<td>0.586</td>
<td>0.661</td>
<td>0.817</td>
<td>0.446</td>
</tr>
<tr>
<td style="background-color:#FEF888; color:#FEF888" title="#FEF888"><span style="display:none">&10000000000000015000000</span><tt>#FEF888</tt></td>
<td>0.998</td>
<td>0.974</td>
<td>0.532</td>
<td><span style="display:none">&10000000000000056899999</span>56.9�</td>
<td><span style="display:none">&10000000000000057399999</span>57.4�</td>
<td>0.466</td>
<td>0.454</td>
<td>0.998</td>
<td>0.765</td>
<td>0.835</td>
<td>0.931</td>
<td>0.467</td>
<td>0.991</td>
<td>0.363</td>
</tr>
<tr>
<td style="background-color:#19CB97; color:#19CB97" title="#19CB97"><span style="display:none">&10000000000000016000000</span><tt>#19CB97</tt></td>
<td>0.099</td>
<td>0.795</td>
<td>0.591</td>
<td><span style="display:none">&10000000000000162400000</span>162.4�</td>
<td><span style="display:none">&10000000000000163400000</span>163.4�</td>
<td>0.696</td>
<td>0.620</td>
<td>0.795</td>
<td>0.447</td>
<td>0.495</td>
<td>0.564</td>
<td>0.875</td>
<td>0.779</td>
<td>0.800</td>
</tr>
<tr>
<td style="background-color:#362698; color:#362698" title="#362698"><span style="display:none">&10000000000000017000000</span><tt>#362698</tt></td>
<td>0.211</td>
<td>0.149</td>
<td>0.597</td>
<td><span style="display:none">&10000000000000248300000</span>248.3�</td>
<td><span style="display:none">&10000000000000247300000</span>247.3�</td>
<td>0.448</td>
<td>0.420</td>
<td>0.597</td>
<td>0.373</td>
<td>0.319</td>
<td>0.219</td>
<td>0.750</td>
<td>0.601</td>
<td>0.533</td>
</tr>
<tr>
<td style="background-color:#7E7EB8; color:#7E7EB8" title="#7E7EB8"><span style="display:none">&10000000000000018000000</span><tt>#7E7EB8</tt></td>
<td>0.495</td>
<td>0.493</td>
<td>0.721</td>
<td><span style="display:none">&10000000000000240500000</span>240.5�</td>
<td><span style="display:none">&10000000000000240400000</span>240.4�</td>
<td>0.228</td>
<td>0.227</td>
<td>0.721</td>
<td>0.607</td>
<td>0.570</td>
<td>0.520</td>
<td>0.316</td>
<td>0.290</td>
<td>0.135</td>
</tr>
</tbody></table>
<script>
var trs = $("tr:not(:first)");
trs.find("span").remove();
var all = trs.map(function() {
var tds = $(this).find("td");
var c = { };
c.hex = tds.eq(0).attr("title");
c.rgb = {
r: tds.eq(1).text(),
g: tds.eq(2).text(),
b: tds.eq(3).text()
};
var h = tds.eq(4).text().replace(/�/g, '');
h = (isNaN(parseFloat(h))) ? "0" : h;
c.hsv = {
h: h,
s: tds.eq(12).text(),
v: tds.eq(8).text()
};
c.hsl = {
h: h,
s: tds.eq(13).text(),
l: tds.eq(9).text()
};
return c;
}).toArray();
console.log(all);
console.log(JSON.stringify(all, "\n"));
</script>
</body>
</html>