<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>TinyColor - Fast, small color manipulation in JavaScript</title> <link rel="stylesheet" href="demo/demo.css" type="text/css" media="screen" /> <script type='text/javascript' src='demo/jquery-1.9.1.js'></script> <script type='text/javascript' src='tinycolor.js'></script> <script type='text/javascript'> function colorChange(color) { var tiny = tinycolor(color); var output = [ "hex:\t" + tiny.toHexString(), "hex8:\t" + tiny.toHex8String(), "rgb:\t" + tiny.toRgbString(), "hsl:\t" + tiny.toHslString(), "hsv:\t" + tiny.toHsvString(), "name:\t" + (tiny.toName() || "none"), "format:\t" + (tiny.getFormat()), "format string:\t" + tiny.toString(), ].join("\n"); $("#code-output").text(output).css("border-color", tiny.toHexString()); var filters = $("#filter-output").toggleClass("invisible", !tiny.isValid()); filters.find(".lighten").css("background-color", tinycolor(color).lighten(20).toHexString() ); filters.find(".darken").css("background-color", tinycolor(color).darken(20).toHexString() ); filters.find(".saturate").css("background-color", tinycolor(color).saturate(20).toHexString() ); filters.find(".desaturate").css("background-color", tinycolor(color).desaturate(20).toHexString() ); filters.find(".greyscale").css("background-color", tinycolor(color).greyscale().toHexString() ); filters.find(".brighten").css("background-color", tinycolor(color).brighten(20).toHexString() ); var allColors = []; for (var i in tinycolor.names) { allColors.push(i); } var mostReadable = tinycolor.mostReadable(color, allColors); $("#mostReadable").css("background-color", mostReadable.toHexString() ); var combines = $("#combine-output").toggleClass("invisible", !tiny.isValid()); function colorArrayToHTML(arr) { return $.map(arr, function(e) { return '<span style="background:'+e.toHexString()+'"></span>' }).join(''); } var triad = tiny.triad(); combines.find(".triad").html(colorArrayToHTML(triad)); console.log(triad.map(function(f) {return f.toHexString();})); var tetrad = tiny.tetrad(); combines.find(".tetrad").html(colorArrayToHTML(tetrad)); var mono = tiny.monochromatic(); combines.find(".mono").html(colorArrayToHTML(mono)); var analogous = tiny.analogous(); combines.find(".analogous").html(colorArrayToHTML(analogous)); var splitcomplement = tiny.splitcomplement(); combines.find(".sc").html(colorArrayToHTML(splitcomplement)); } $(function() { $("#color").bind("keyup change", function() { colorChange($(this).val()); }); colorChange({r: 150, g: 0, b: 100}); $("#inputter a").click(function() { $("#color").val($(this).text()).trigger("change"); return false; }); }); </script> </head> <body> <div id="container"> <h1>TinyColor</h1> <h2>Fast, small color manipulation and conversion for JavaScript</h2> <p> <a href="https://github.com/bgrins/TinyColor">TinyColor</a> is a micro framework for inputting colors and outputting colors as different formats. Input is meant to be as permissive as possible. </p> <h3>Usage Documentation</h3> <p>Read all the documentation on the <a href='https://github.com/bgrins/TinyColor'>TinyColor project page</a> on github.</p> <h3>Code</h3> <p><a href='docs/tinycolor.html'>View the annotated source code</a> or <a href='https://github.com/bgrins/TinyColor/blob/master/tinycolor.js'>see the full source on github</a>.</p> <h3>Tests</h3> <p><a href='test/'>View the QUnit Tests</a>.</p> <h3>Demo</h3> <div id='demo'> <div id='inputter'> <p> Enter a color: <input type="text" placeholder="any color." id='color' /> </p> <p> Or try these: <a href="#">red</a> <a href="#">0f0</a> <a href="#">rgb 255 128 128</a> <a href='#'>hsl(0, 100%, 50%)</a> <a href='#'>hsv 0, 100%, 50%</a> </p> <p>And I'll tell you what I know about it:</p> </div> <pre id='code-output'></pre> <div id='filter-output'> <table> <tr> <th>Lighten</th> <td><div class='lighten'></div></td> </tr> <tr> <th>Darken</th> <td><div class='darken'></div></td> </tr> <tr> <th>Saturate</th> <td><div class='saturate'></div></td> </tr> <tr> <th>Desaturate</th> <td><div class='desaturate'></div></td> </tr> <tr> <th>Greyscale</th> <td><div class='greyscale'></div></td> </tr> <tr> <th>Brighten</th> <td><div class='brighten'></div></td> </tr> <tr> <th>Most Readable</th> <td><div id='mostReadable'></div></td> </tr> </table> </div> <div id='combine-output'> <table> <tr> <th>Triad</th> <td><div class='triad'></div></td> </tr> <tr> <th>Tetrad</th> <td><div class='tetrad'></div></td> </tr> <tr> <th>Monochromatic</th> <td><div class='mono'></div></td> </tr> <tr> <th>Analogous</th> <td><div class='analogous'></div></td> </tr> <tr> <th>Split Complements</th> <td><div class='sc'></div></td> </tr> </table> </div> </div> <h3>Credit</h3> <p> Developed by <a href='http://briangrinstead.com'>Brian Grinstead</a>. Big thanks to the following places: </p> <ul> <li><a href='https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js'>less.js</a> for some of the modification functions</li> <li><a href='https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js'>jQuery xColor</a> for some of the combination functions</li> <li><a href='http://www.w3.org/TR/css3-color/#svg-color'>w3.org</a> for the color list and parsing rules</li> <li><a href='http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript'>mjijackson.com</a> for the first stab at RGB / HSL / HSV converters</li> </ul> </div> </body> </html>