Advanced Search

Return to Snippet

Revision: 20317
at November 12, 2009 00:17 by draeton
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Palette</title>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {

	hsvToRgb = function (h, s, v) {  		
		var s = s / 100,  
			v = v / 100;  
		
		var hi = Math.floor((h/60) % 6);  
		var f = (h / 60) - hi;  
		var p = v * (1 - s);  
		var q = v * (1 - f * s);  
		var t = v * (1 - (1 - f) * s);  
		
		var rgb = [];  
		
		switch (hi) {  
			case 0: rgb = [v,t,p];break;  
			case 1: rgb = [q,v,p];break;  
			case 2: rgb = [p,v,t];break;  
			case 3: rgb = [p,q,v];break;  
			case 4: rgb = [t,p,v];break;  
			case 5: rgb = [v,p,q];break;  
		}  
		
		var r = Math.min(255, Math.round(rgb[0]*256)),  
			g = Math.min(255, Math.round(rgb[1]*256)),  
			b = Math.min(255, Math.round(rgb[2]*256));  
		
		return [r,g,b];  		
	}
	
	rgb2hex = function (r, g, b) {
		var R = ('00' + r.toString(16).toUpperCase()).substr(-2, 2);
		var G = ('00' + g.toString(16).toUpperCase()).substr(-2, 2);
		var B = ('00' + b.toString(16).toUpperCase()).substr(-2, 2);
		return R + G + B;
	};
	
	genColors = function () {
		var colors = '';
		var colorsString = '';
		
		var hMin = parseInt($("#hueMin").val());
		var hMax = parseInt($("#hueMax").val());
		var hStep = parseInt($("#hueStep").val());
		var sMin = parseInt($("#satMin").val());
		var sMax = parseInt($("#satMax").val());
		var sStep = parseInt($("#satStep").val());
		var vMin = parseInt($("#valMin").val());
		var vMax = parseInt($("#valMax").val());
		var vStep = parseInt($("#valStep").val());
		
		$("#colors").html('');
			
		for (var h = hMin; h <= hMax; h+= hStep) {
		
			for (var s = sMin; s <= sMax; s+= sStep) {
			
				for (var v = vMin; v <= vMax; v+= vStep) {
				
					var RGB = hsvToRgb(h, s, v);
					var colorString = rgb2hex(RGB[0], RGB[1], RGB[2]);
					var color = '#' + colorString;
					colorsString += "'" + colorString + "', ";
					colors += "    <div class=\"color\"><span style=\"background-color:" + color + "\">&nbsp;</span></div>\n";
					
				}
			}
		}
		
		$("#colors").append(colors);
		$("#colorsString").html(colorsString);
	};
	
	init = function () {
		for (var i = 0; i <= 360; i++) {
			$("#hueMin, #hueMax, #hueStep").append("<option value=\""+i+"\">"+i+"</option>");
		}
		$("#hueMin").val(0);
		$("#hueMax").val(359);
		$("#hueStep").val(18);
		for (var i = 0; i <= 100; i++) {
			$("#satMin, #satMax, #satStep").append("<option value=\""+i+"\">"+i+"</option>");
			$("#valMin, #valMax, #valStep").append("<option value=\""+i+"\">"+i+"</option>");
		}
		$("#satMin").val(60);
		$("#satMax").val(100);
		$("#satStep").val(40);
		$("#valMin").val(40);
		$("#valMax").val(60);
		$("#valStep").val(20);
		
		$("h1").click(function () {
			genColors();
		});
		
		genColors();
	}();
	
	
});
</script>
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 15px;
	background: #333;
	color: #CCC;
}
div.color {
	float: left;
	border-top: 1px dotted #CCC;
	border-left: 1px dotted #CCC;
	padding: 3px;
}
div.color span {
	width: 15px;
	height: 15px;
	display: block;
	float: left;
	margin-right: 3px;
}
br {
	clear: both;
}
table {
	margin: 6px 0 12px;
	border-bottom: 1px dotted #CCC;
	border-right: 1px dotted #CCC;
}
table th, table td {
	text-align: left;
	padding: 6px;
}
table td {
	border-top: 1px dotted #CCC;
	border-left: 1px dotted #CCC;
}
h1 {
	cursor: pointer;
}
h1:hover {
	text-decoration: underline;
}
</style>
</head>

<body>

<table width="100%" cellspacing="0" cellpadding="0">
	<thead>
  	<tr>
    	<th>Hue Min</th>
    	<th>Hue Max</th>
    	<th>Hue Step</th>
    	<th>Sat Min</th>
    	<th>Sat Max</th>
    	<th>Sat Step</th>
    	<th>Val Min</th>
    	<th>Val Max</th>
    	<th>Val Step</th>
    </tr>
  </thead>
  <tbody>
  	<tr>
    	<td><select id="hueMin"></select></td>
    	<td><select id="hueMax"></select></td>
    	<td><select id="hueStep"></select></td>
    	<td><select id="satMin"></select></td>
    	<td><select id="satMax"></select></td>
    	<td><select id="satStep"></select></td>
    	<td><select id="valMin"></select></td>
    	<td><select id="valMax"></select></td>
    	<td><select id="valStep"></select></td>
    </tr>
  </tbody>
</table>

<h1>Colors</h1>

<div id="colors">
</div>

<br />

<p id="colorsString"></p>


</body>
</html>
Initial URL 









Initial Description














Initial Title





jQuery color palette









Initial Tags





javascript, jquery









Initial Language





JavaScript