207 lines
6.3 KiB
HTML
207 lines
6.3 KiB
HTML
<!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> |