index.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='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");

			let codeOutput = document.querySelector("#code-output");
			codeOutput.textContent = output;
			codeOutput.style.borderColor = tiny.toHexString();

			var filters = document.querySelector("#filter-output");
			filters.classList.toggle("invisible", !tiny.isValid());

			filters.querySelector(".lighten").style.backgroundColor =
				tinycolor(color).lighten(20).toHexString();
			filters.querySelector(".darken").style.backgroundColor =
				tinycolor(color).darken(20).toHexString();
			filters.querySelector(".saturate").style.backgroundColor =
				tinycolor(color).saturate(20).toHexString();
			filters.querySelector(".desaturate").style.backgroundColor =
				tinycolor(color).desaturate(20).toHexString();
			filters.querySelector(".greyscale").style.backgroundColor =
				tinycolor(color).greyscale().toHexString();
			filters.querySelector(".brighten").style.backgroundColor =
				tinycolor(color).brighten(20).toHexString();

			var allColors = [];
			for (var i in tinycolor.names) {
				allColors.push(i);
			}
			var mostReadable = tinycolor.mostReadable(color, allColors);

			document.querySelector("#mostReadable").style.backgroundColor =
				mostReadable.toHexString();

			var combines = document.querySelector("#combine-output");
			combines.classList.toggle("invisible", !tiny.isValid());

			function colorArrayToHTML(arr) {
				return arr.map(function (e) {
					return '<span style="background:' + e.toHexString() + '"></span>'
				}).join('');
			}

			var triad = tiny.triad();
			combines.querySelector(".triad").innerHTML = colorArrayToHTML(triad);
			console.log(triad.map(function (f) { return f.toHexString(); }));

			var tetrad = tiny.tetrad();
			combines.querySelector(".tetrad").innerHTML = colorArrayToHTML(tetrad);

			var mono = tiny.monochromatic();
			combines.querySelector(".mono").innerHTML = colorArrayToHTML(mono);

			var analogous = tiny.analogous();
			combines.querySelector(".analogous").innerHTML = colorArrayToHTML(analogous);

			var splitcomplement = tiny.splitcomplement();
			combines.querySelector(".sc").innerHTML = colorArrayToHTML(splitcomplement);
		}

		document.addEventListener("DOMContentLoaded", function () {
			var color = document.querySelector("#color");
			color.addEventListener("keyup", onchange);
			color.addEventListener("change", onchange);

			function onchange() {
				colorChange(color.value);
			}
			colorChange({ r: 150, g: 0, b: 100 });

			document.querySelector("#inputter").addEventListener("click", function (e) {
				if (e.target.matches("a")) {
					color.value = e.target.textContent;
					onchange();
					e.preventDefault();
				}
			});
		});

	</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>Tests</h3>
		<p><a href='test.js'>View the 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='https://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='https://www.w3.org/TR/css3-color/#svg-color'>w3.org</a> for the color list and parsing rules</li>
			<li><a
					href='https://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>