Advanced Search

jQuery color palette

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Color Palette</title>
  6.  
  7. <script src="jquery.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(document).ready(function () {
  10.  
  11. 	hsvToRgb = function (h, s, v) {  		
  12. 		var s = s / 100,  
  13. 			v = v / 100;  
  14.  
  15. 		var hi = Math.floor((h/60) % 6);  
  16. 		var f = (h / 60) - hi;  
  17. 		var p = v * (1 - s);  
  18. 		var q = v * (1 - f * s);  
  19. 		var t = v * (1 - (1 - f) * s);  
  20.  
  21. 		var rgb = [];  
  22.  
  23. 		switch (hi) {  
  24. 			case 0: rgb = [v,t,p];break;  
  25. 			case 1: rgb = [q,v,p];break;  
  26. 			case 2: rgb = [p,v,t];break;  
  27. 			case 3: rgb = [p,q,v];break;  
  28. 			case 4: rgb = [t,p,v];break;  
  29. 			case 5: rgb = [v,p,q];break;  
  30. 		}  
  31.  
  32. 		var r = Math.min(255, Math.round(rgb[0]*256)),  
  33. 			g = Math.min(255, Math.round(rgb[1]*256)),  
  34. 			b = Math.min(255, Math.round(rgb[2]*256));  
  35.  
  36. 		return [r,g,b];  		
  37. 	}
  38.  
  39. 	rgb2hex = function (r, g, b) {
  40. 		var R = ('00' + r.toString(16).toUpperCase()).substr(-2, 2);
  41. 		var G = ('00' + g.toString(16).toUpperCase()).substr(-2, 2);
  42. 		var B = ('00' + b.toString(16).toUpperCase()).substr(-2, 2);
  43. 		return R + G + B;
  44. 	};
  45.  
  46. 	genColors = function () {
  47. 		var colors = '';
  48. 		var colorsString = '';
  49.  
  50. 		var hMin = parseInt($("#hueMin").val());
  51. 		var hMax = parseInt($("#hueMax").val());
  52. 		var hStep = parseInt($("#hueStep").val());
  53. 		var sMin = parseInt($("#satMin").val());
  54. 		var sMax = parseInt($("#satMax").val());
  55. 		var sStep = parseInt($("#satStep").val());
  56. 		var vMin = parseInt($("#valMin").val());
  57. 		var vMax = parseInt($("#valMax").val());
  58. 		var vStep = parseInt($("#valStep").val());
  59.  
  60. 		$("#colors").html('');
  61.  
  62. 		for (var h = hMin; h <= hMax; h+= hStep) {
  63.  
  64. 			for (var s = sMin; s <= sMax; s+= sStep) {
  65.  
  66. 				for (var v = vMin; v <= vMax; v+= vStep) {
  67.  
  68. 					var RGB = hsvToRgb(h, s, v);
  69. 					var colorString = rgb2hex(RGB[0], RGB[1], RGB[2]);
  70. 					var color = '#' + colorString;
  71. 					colorsString += "'" + colorString + "', ";
  72. 					colors += "    <div class=\"color\"><span style=\"background-color:" + color + "\">&nbsp;</span></div>\n";
  73.  
  74. 				}
  75. 			}
  76. 		}
  77.  
  78. 		$("#colors").append(colors);
  79. 		$("#colorsString").html(colorsString);
  80. 	};
  81.  
  82. 	init = function () {
  83. 		for (var i = 0; i <= 360; i++) {
  84. 			$("#hueMin, #hueMax, #hueStep").append("<option value=\""+i+"\">"+i+"</option>");
  85. 		}
  86. 		$("#hueMin").val(0);
  87. 		$("#hueMax").val(359);
  88. 		$("#hueStep").val(18);
  89. 		for (var i = 0; i <= 100; i++) {
  90. 			$("#satMin, #satMax, #satStep").append("<option value=\""+i+"\">"+i+"</option>");
  91. 			$("#valMin, #valMax, #valStep").append("<option value=\""+i+"\">"+i+"</option>");
  92. 		}
  93. 		$("#satMin").val(60);
  94. 		$("#satMax").val(100);
  95. 		$("#satStep").val(40);
  96. 		$("#valMin").val(40);
  97. 		$("#valMax").val(60);
  98. 		$("#valStep").val(20);
  99.  
  100. 		$("h1").click(function () {
  101. 			genColors();
  102. 		});
  103.  
  104. 		genColors();
  105. 	}();
  106.  
  107.  
  108. });
  109. </script>
  110. <style type="text/css">
  111. body {
  112. 	font-family: Arial, Helvetica, sans-serif;
  113. 	font-size: 10px;
  114. 	line-height: 15px;
  115. 	background: #333;
  116. 	color: #CCC;
  117. }
  118. div.color {
  119. 	float: left;
  120. 	border-top: 1px dotted #CCC;
  121. 	border-left: 1px dotted #CCC;
  122. 	padding: 3px;
  123. }
  124. div.color span {
  125. 	width: 15px;
  126. 	height: 15px;
  127. 	display: block;
  128. 	float: left;
  129. 	margin-right: 3px;
  130. }
  131. br {
  132. 	clear: both;
  133. }
  134. table {
  135. 	margin: 6px 0 12px;
  136. 	border-bottom: 1px dotted #CCC;
  137. 	border-right: 1px dotted #CCC;
  138. }
  139. table th, table td {
  140. 	text-align: left;
  141. 	padding: 6px;
  142. }
  143. table td {
  144. 	border-top: 1px dotted #CCC;
  145. 	border-left: 1px dotted #CCC;
  146. }
  147. h1 {
  148. 	cursor: pointer;
  149. }
  150. h1:hover {
  151. 	text-decoration: underline;
  152. }
  153. </style>
  154. </head>
  155.  
  156. <body>
  157.  
  158. <table width="100%" cellspacing="0" cellpadding="0">
  159. 	<thead>
  160.   	<tr>
  161.     	<th>Hue Min</th>
  162.     	<th>Hue Max</th>
  163.     	<th>Hue Step</th>
  164.     	<th>Sat Min</th>
  165.     	<th>Sat Max</th>
  166.     	<th>Sat Step</th>
  167.     	<th>Val Min</th>
  168.     	<th>Val Max</th>
  169.     	<th>Val Step</th>
  170.     </tr>
  171.   </thead>
  172.   <tbody>
  173.   	<tr>
  174.     	<td><select id="hueMin"></select></td>
  175.     	<td><select id="hueMax"></select></td>
  176.     	<td><select id="hueStep"></select></td>
  177.     	<td><select id="satMin"></select></td>
  178.     	<td><select id="satMax"></select></td>
  179.     	<td><select id="satStep"></select></td>
  180.     	<td><select id="valMin"></select></td>
  181.     	<td><select id="valMax"></select></td>
  182.     	<td><select id="valStep"></select></td>
  183.     </tr>
  184.   </tbody>
  185. </table>
  186.  
  187. <h1>Colors</h1>
  188.  
  189. <div id="colors">
  190. </div>
  191.  
  192. <br />
  193.  
  194. <p id="colorsString"></p>
  195.  
  196.  
  197. </body>
  198. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.