tinycolor2
Version:
Fast Color Parsing and Manipulation
290 lines (253 loc) • 8.35 kB
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.format),
"format string:\t" + tiny.toString(),
].join("\n");
$("#code-output").text(output).css("border-color", tiny.toHexString());
var filters = $("#filter-output").toggleClass("invisible", !tiny.ok);
filters.find(".lighten").css("background-color",
tinycolor.lighten(tiny, 20).toHexString()
);
filters.find(".darken").css("background-color",
tinycolor.darken(tiny, 20).toHexString()
);
filters.find(".saturate").css("background-color",
tinycolor.saturate(tiny, 20).toHexString()
);
filters.find(".desaturate").css("background-color",
tinycolor.desaturate(tiny, 20).toHexString()
);
filters.find(".greyscale").css("background-color",
tinycolor.greyscale(tiny).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.ok);
var triad = tinycolor.triad(tiny);
combines.find(".triad").html($.map(triad, function(e) {
return '<span style="background:'+e.toHexString()+'"></span>'
}).join(''));
var tetrad = tinycolor.tetrad(tiny);
combines.find(".tetrad").html($.map(tetrad, function(e) {
return '<span style="background:'+e.toHexString()+'"></span>'
}).join(''));
var mono = tinycolor.monochromatic(tiny);
combines.find(".mono").html($.map(mono, function(e) {
return '<span style="background:'+e.toHexString()+'"></span>'
}).join(''));
var analogous = tinycolor.analogous(tiny);
combines.find(".analogous").html($.map(analogous, function(e) {
return '<span style="background:'+e.toHexString()+'"></span>'
}).join(''));
var sc = tinycolor.splitcomplement(tiny);
combines.find(".sc").html($.map(sc, function(e) {
return '<span style="background:'+e.toHexString()+'"></span>'
}).join(''));
}
$(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>→ A fast JavaScript color manipulation micro framework</h2>
<p>
TinyColor is a micro framework for inputting colors and outputting colors as different formats.
Input is meant to be as permissive as possible.
</p>
<p>The following color types are supported:</p>
<ul>
<li>RGB</li>
<li>HSL</li>
<li>HSV</li>
<li>Hex</li>
<li>Name (from <a href='http://www.w3.org/TR/css3-color/#svg-color'>SVG color codes</a>)</li>
</ul>
<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>Test</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>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>Usage</h3>
<p>
<pre>
<script type='text/javascript' src='tinycolor.js'></script>
</pre>
<pre>
<script type='text/javascript'>
var t = tinycolor("red");
t.toHex() // "f00"
t.toHexString() // "#f00"
t.toHex8() // "ffff0000"
t.toHex8String() // "#ffff0000"
t.toRgb() // { r: 255, g: 0, b:0 }
t.toRgbString() // "rgb(255, 0, 0)"
t.toHsv() // { h: 0, s: 1, v: 1 }
t.toHsvString() // "hsv(0, 100%, 100%)"
t.toHsl() // { h: 0, s:1, l: 0.5 }
t.toHslString() // "hsl(0, 100%, 50%)"
t.toName() // "red"
</script>
</pre>
<h4>Instance Functions</h4>
<ul>
<li>toName()</li>
<li>toHex() / toHexString()</li>
<li>toHex8() / toHex8String()</li>
<li>toHsl() / toHslString()</li>
<li>toRgb() / toRgbString()</li>
<li>toHsv() / toHsvString()</li>
<li>toFilter()</li>
</ul>
<h4>Color Utilities</h4>
<ul>
<li>
tinycolor.equals(color1, color2)
</li>
</ul>
<h4>Color Modification</h4>
<ul>
<li>
tinycolor.lighten(color)
</li>
<li>
tinycolor.darken(color)
</li>
<li>
tinycolor.desaturate(color)
</li>
<li>
tinycolor.saturate(color)
</li>
<li>
tinycolor.greyscale(color)
</li>
</ul>
<h4>Color Combinations</h4>
<ul>
<li>
tinycolor.analogous(color)
</li>
<li>
tinycolor.monochromatic(color)
</li>
<li>
tinycolor.splitcomplements(color)
</li>
<li>
tinycolor.triad(color)
</li>
<li>
tinycolor.tetrad(color)
</li>
</ul>
</p>
<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>
<a href="http://github.com/bgrins/TinyColor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
</div>
</body>
</html>