cmy
/
ddcAdmin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!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>