Revision: 20317
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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 + "\"> </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