« »

This JavaScript is a color choosing tool on the web page.

Label: The RGB Color Calculator

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE type=text/css>TD {
	COLOR: #777777; FONT-FAMILY: arial,helvetica,geneva; FONT-SIZE: 10pt
}
BODY {
	FONT-FAMILY: arial,helvetica,geneva; FONT-SIZE: 10pt
}
.blue {
	BACKGROUND-COLOR: #0000ff; COLOR: #ffffff; FONT-WEIGHT: bold; TEXT-ALIGN: center
}
A.menu:link {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.menu:active {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.menu:visited {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.menu:hover {
	COLOR: #ffff00; TEXT-DECORATION: none
}
A:link {
	COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A:active {
	COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A:visited {
	COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A:hover {
	COLOR: #000000; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT language=javascript>
<!--

// #############################################################
// #############################################################                                               
// ###                                                       ###
// ###  Javascript-Powered web page Copyright 2000-2002 by:  ###
// ###  Greg Reimer -- greg@drpeterjones.com                 ###
// ###                                                       ###
// ###  This program is distributed under the terms          ###
// ###  of the GNU General Public License. (see below)       ###
// ###                                                       ###
// ###  Please do not remove the copyright or license        ###
// ###  notices from this code                               ###
// ###                                                       ###
// #############################################################
// #############################################################

// clean code

var CNA = [
["ALICEBLUE","F0F8FF"],
["ANTIQUEWHITE","FAEBD7"],
["AQUA","00FFFF"],
["AQUAMARINE","7FFFD4"],
["AZURE","F0FFFF"],
["BEIGE","F5F5DC"],
["BISQUE","FFE4C4"],
["BLACK","000000"],
["BLANCHEDALMOND","FFEBCD"],
["BLUE","0000FF"],
["BLUEVIOLET","8A2BE2"],
["BROWN","A52A2A"],
["BURLYWOOD","DEB887"],
["CADETBLUE","5F9EA0"],
["CHARTREUSE","7FFF00"],
["CHOCOLATE","D2691E"],
["CORAL","FF7F50"],
["CORNFLOWERBLUE","6495ED"],
["CORNSILK","FFF8DC"],
["CRIMSON","DC143C"],
["CYAN","00FFFF"],
["DARKBLUE","00008B"],
["DARKCYAN","008B8B"],
["DARKGOLDENROD","B8860B"],
["DARKGRAY","A9A9A9"],
["DARKGREEN","006400"],
["DARKKHAKI","BDB76B"],
["DARKMAGENTA","8B008B"],
["DARKOLIVEGREEN","556B2F"],
["DARKORANGE","FF8C00"],
["DARKORCHID","9932CC"],
["DARKRED","8B0000"],
["DARKSALMON","E9967A"],
["DARKSEAGREEN","8FBC8F"],
["DARKSLATEBLUE","483D8B"],
["DARKSLATEGRAY","2F4F4F"],
["DARKTURQUOISE","00CED1"],
["DARKVIOLET","9400D3"],
["DEEPPINK","FF1493"],
["DEEPSKYBLUE","00BFFF"],
["DIMGRAY","696969"],
["DODGERBLUE","1E90FF"],
["FIREBRICK","B22222"],
["FLORALWHITE","FFFAF0"],
["FORESTGREEN","228B22"],
["GAINSBORO","DCDCDC"],
["GHOSTWHITE","F8F8FF"],
["GOLD","FFD700"],
["GOLDENROD","DAA520"],
["GRAY","808080"],
["GREEN","008000"],
["GREENYELLOW","ADFF2F"],
["HONEYDEW","F0FFF0"],
["HOTPINK","FF69B4"],
["INDIANRED","CD5C5C"],
["INDIGO","4B0082"],
["IVORY","FFFFF0"],
["KHAKI","F0E68C"],
["LAVENDER","E6E6FA"],
["LAVENDERBLUSH","FFF0F5"],
["LAWNGREEN","7CFC00"],
["LEMONCHIFFON","FFFACD"],
["LIGHTBLUE","ADD8E6"],
["LIGHTCORAL","F08080"],
["LIGHTCYAN","E0FFFF"],
["LIGHTGOLDENRODYELLOW","FAFAD2"],
["LIGHTGRAY","D3D3D3"],
["LIGHTGREEN","90EE90"],
["LIGHTPINK","FFB6C1"],
["LIGHTSALMON","FFA07A"],
["LIGHTSEAGREEN","20B2AA"],
["LIGHTSKYBLUE","87CEFA"],
["LIGHTSLATEBLUE","8470FF"],
["LIGHTSLATEGRAY","778899"],
["LIGHTSTEELBLUE","B0C4DE"],
["LIGHTYELLOW","FFFFE0"],
["LIME","00FF00"],
["LIMEGREEN","32CD32"],
["LINEN","FAF0E6"],
["MAGENTA","FF00FF"],
["MAROON","800000"],
["MEDIUMAQUAMARINE","66CDAA"],
["MEDIUMBLUE","0000CD"],
["MEDIUMORCHID","BA55D3"],
["MEDIUMPURPLE","9370D8"],
["MEDIUMSEAGREEN","3CB371"],
["MEDIUMSLATEBLUE","7B68EE"],
["MEDIUMSPRINGGREEN","00FA9A"],
["MEDIUMTURQUOISE","48D1CC"],
["MEDIUMVIOLETRED","C71585"],
["MIDNIGHTBLUE","191970"],
["MINTCREAM","F5FFFA"],
["MISTYROSE","FFE4E1"],
["MOCCASIN","FFE4B5"],
["NAVAJOWHITE","FFDEAD"],
["NAVY","000080"],
["OLDLACE","FDF5E6"],
["OLIVE","808000"],
["OLIVEDRAB","6B8E23"],
["ORANGE","FFA500"],
["ORANGERED","FF4500"],
["ORCHID","DA70D6"],
["PALEGOLDENROD","EEE8AA"],
["PALEGREEN","98FB98"],
["PALETURQUOISE","AFEEEE"],
["PALEVIOLETRED","D87093"],
["PAPAYAWHIP","FFEFD5"],
["PEACHPUFF","FFDAB9"],
["PERU","CD853F"],
["PINK","FFC0CB"],
["PLUM","DDA0DD"],
["POWDERBLUE","B0E0E6"],
["PURPLE","800080"],
["RED","FF0000"],
["ROSYBROWN","BC8F8F"],
["ROYALBLUE","4169E1"],
["SADDLEBROWN","8B4513"],
["SALMON","FA8072"],
["SANDYBROWN","F4A460"],
["SEAGREEN","2E8B57"],
["SEASHELL","FFF5EE"],
["SIENNA","A0522D"],
["SILVER","C0C0C0"],
["SKYBLUE","87CEEB"],
["SLATEBLUE","6A5ACD"],
["SLATEGRAY","708090"],
["SNOW","FFFAFA"],
["SPRINGGREEN","00FF7F"],
["STEELBLUE","4682B4"],
["TAN","D2B48C"],
["TEAL","008080"],
["THISTLE","D8BFD8"],
["TOMATO","FF6347"],
["TURQUOISE","40E0D0"],
["VIOLET","EE82EE"],
["VIOLETRED","D02090"],
["WHEAT","F5DEB3"],
["WHITE","FFFFFF"],
["WHITESMOKE","F5F5F5"],
["YELLOW","FFFF00"],
["YELLOWGREEN","9ACD32"]
];

var alphaStr = "0123456789ABCDEF";
var alphaArr = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];

var RGB = [170,170,170];
var range = 0;
var phase = 0;
var sat = 0;
var val = 170 / 255;

function getRandomDEC()
	{
	return Math.round(Math.random() * 255);
	}

function DEC_to_WEB(d)
	{
	d = Math.round(d / 51);
	d *= 51;
	return d;
	}

function DEC_to_HEX(dec)
	{
	var n_ = Math.floor(dec / 16);
	var _n = dec - n_ * 16;
	return alphaArr[n_] + alphaArr[_n];
	}

function HEX_to_DEC(hex)
	{
	var n_ = alphaStr.indexOf(hex.substring(0,1));
	var _n = alphaStr.indexOf(hex.substring(1,2));
	return n_ * 16 + _n;
	}	

function RGB_from_HEX()
	{
	var temp = getHEX();
	temp = temp.toUpperCase();
	RGB[0] = HEX_to_DEC(temp.substring(0,2));
	RGB[1] = HEX_to_DEC(temp.substring(2,4));
	RGB[2] = HEX_to_DEC(temp.substring(4,6));
	}

function HEX_from_RGB()
	{
	document.bgColor = DEC_to_HEX(RGB[0]) + DEC_to_HEX(RGB[1]) + DEC_to_HEX(RGB[2]);
	}

function HSV_from_RGB()
	{
	var min = 255;
	var max = 0;
	var tmp = new Array(3);
	for (i=0; i<3; i++)
		{
		if (max < RGB[i]) max = RGB[i];
		if (min > RGB[i]) min = RGB[i];
		tmp[i] = RGB[i];
		}
	val = max / 255;
	if (val == 0) return;
	sat = (max - min) / max;
	if (sat == 0) return;
	for (i=0; i<3; i++)
		{
		tmp[i] *= (1 / val);
		tmp[i] = 255 - (255 - tmp[i]) * (1 / sat);
		tmp[i] = Math.round(tmp[i]);
		}
	var tmpRange = Math.round(tmp[0] + tmp[1] + tmp[2] - 255);
	if (tmpRange == 0)
		{
		for (i=0; i<3; i++)
			{
			if (tmp[i] == 255) { phase = i * 2; break; }
			}
		}
	else if (tmpRange == 255)
		{
		for (i=0; i<3; i++)
			{
			if (tmp[i] == 0) { phase = (i * 2 + 3) % 6; break; }
			}
		}
	else for (i=0; i<3; i++)
		{
		if ((tmp[i] > tmp[(i+1)%3]) && (tmp[(i+1)%3] > tmp[(i+2)%3])) { phase = i * 2; break; }
		else if ((tmp[i] > tmp[(i+2)%3]) && (tmp[(i+2)%3] > tmp[(i+1)%3])) { phase = (i * 2 + 5) % 6; break; }
		}
	if (phase % 2 == 0) range = tmpRange;
	else range = 255 - tmpRange;
	}

function HSV_from_HEX()
	{
	var h = getHEX();
	var rgbt = [HEX_to_DEC(h.substring(0,2)),HEX_to_DEC(h.substring(2,4)),HEX_to_DEC(h.substring(4,6))];
	var min = 255;
	var max = 0;
	var tmp = new Array(3);
	for (i=0; i<3; i++)
		{
		if (max < rgbt[i]) max = rgbt[i];
		if (min > rgbt[i]) min = rgbt[i];
		tmp[i] = rgbt[i];
		}
	val = max / 255;
	if (val == 0) return;
	sat = (max - min) / max;
	if (sat == 0) return;
	for (i=0; i<3; i++)
		{
		tmp[i] *= (1 / val);
		tmp[i] = 255 - (255 - tmp[i]) * (1 / sat);
		tmp[i] = Math.round(tmp[i]);
		}
	var tmpRange = Math.round(tmp[0] + tmp[1] + tmp[2] - 255);
	if (tmpRange == 0)
		{
		for (i=0; i<3; i++)
			{
			if (tmp[i] == 255) { phase = i * 2; break; }
			}
		}
	else if (tmpRange == 255)
		{
		for (i=0; i<3; i++)
			{
			if (tmp[i] == 0) { phase = (i * 2 + 3) % 6; break; }
			}
		}
	else for (i=0; i<3; i++)
		{
		if ((tmp[i] > tmp[(i+1)%3]) && (tmp[(i+1)%3] > tmp[(i+2)%3])) { phase = i * 2; break; }
		else if ((tmp[i] > tmp[(i+2)%3]) && (tmp[(i+2)%3] > tmp[(i+1)%3])) { phase = (i * 2 + 5) % 6; break; }
		}
	if (phase % 2 == 0) range = tmpRange;
	else range = 255 - tmpRange;
	}

function RGB_from_HSV()
	{
	var tmp = new Array(3);
	var mid = (7 - phase) % 3;
	tmp[Math.floor((phase + 7) / 2) % 3] = 255;
	tmp[(Math.floor(phase / 2) + 5) % 3] = 0;
	if ((phase % 2) == 1) tmp[mid] = 255 - range;
	else tmp[mid] = range;
	for (i=0; i<3; i++)
		{
		tmp[i] = 255 - ((255 - tmp[i]) * sat);
		tmp[i] *= val;
		RGB[i] = Math.round(tmp[i]);
		}
	}

function HEX_from_HSV()
	{
	var tmp = new Array(3);
	var rgbt = new Array(3);
	var mid = (7 - phase) % 3;
	tmp[Math.floor((phase + 7) / 2) % 3] = 255;
	tmp[(Math.floor(phase / 2) + 5) % 3] = 0;
	if ((phase % 2) == 1) tmp[mid] = 255 - range;
	else tmp[mid] = range;
	for (i=0; i<3; i++)
		{
		tmp[i] = 255 - ((255 - tmp[i]) * sat);
		tmp[i] *= val;
		rgbt[i] = Math.round(tmp[i]);
		}
	document.bgColor = DEC_to_HEX(RGB[0]) + DEC_to_HEX(RGB[1]) + DEC_to_HEX(RGB[2]);
	}

function getHEX() { var temp = document.bgColor.toUpperCase(); temp = temp.substring(1,7); return temp; }

function getRED() { return RGB[0]; }
function getGRN() { return RGB[1]; }
function getBLU() { return RGB[2]; }

function getHUE() { return Math.round((phase * 255 + range) / 6); }
function getSAT() { return Math.round(sat * 255); }
function getVAL() { return Math.round(val * 255); }

function adjRED(incr)
	{
	RGB[0] += incr;
	if (RGB[0] > 255) RGB[0] = 255;
	if (RGB[0] < 0) RGB[0] = 0;
	}

function adjGRN(incr)
	{
	RGB[1] += incr;
	if (RGB[1] > 255) RGB[1] = 255;
	if (RGB[1] < 0) RGB[1] = 0;
	}

function adjBLU(incr)
	{
	RGB[2] += incr;
	if (RGB[2] > 255) RGB[2] = 255;
	if (RGB[2] < 0) RGB[2] = 0;
	}

function adjHUE(incr)
	{
	range += incr * 6;
	while (range > 255) { range -= 255; phase += 1; }
	while (range < 0) { range += 255; phase -= 1; }
	while (phase > 5) { phase -= 6; }
	while (phase < 0) { phase += 6; }
	}

function adjSAT(incr)
	{
	sat += incr / 255;
	if (sat > 1) sat = 1;
	else if (sat < 0) sat = 0;
	}

function adjVAL(incr)
	{
	val += incr / 255;
	if (val > 1) val = 1;
	else if (val < 0) val = 0;
	}

function setRED(r) { RGB[0] = r; }
function setGRN(g) { RGB[1] = g; }
function setBLU(b) { RGB[2] = b; }

function setHUE(h) { h *= 6; range = h % 255; phase = Math.floor(h / 255); }
function setSAT(s) { sat = s / 255; }
function setVAL(v) { val = v / 255; }

function hexIsValid(hex)
	{
	if (hex.length != 6) return false;
	hex = hex.toUpperCase();
	var indicator = [false,false,false,false,false,false];
	for (i=0;i<hex.length;i++)
		{
		for (x=0;x<alphaArr.length;x++)
			{
			if (hex.charAt(i) == alphaArr[x])
				{
				indicator[i] = true;
				break;
				}
			}
		}
	for (i=0;i<hex.length;i++)
		{
		if (!indicator[i]) return false;
		}
	return true;
	}

function numberIsValid(n)
	{
	n = parseInt(n);
	if (n >= 0 && n <= 255) return true;
	return false;
	}

function newHEX() { HSV_from_HEX(); RGB_from_HEX(); }
function newHSV() { RGB_from_HSV(); HEX_from_RGB(); }
function newRGB() { HSV_from_RGB(); HEX_from_RGB(); }

//--></SCRIPT>

<SCRIPT language=javascript><!--

// dirty code

var i_a;

function openHelp()
	{
	var d = new Date();
	t = d.getTime();
	eval("var win" + t + " = window.open('help.html','win" + t + "','width=640,height=480,left=0,top=0,resizable=1,scrollbars=1');");
	}

function openTable()
	{
	var d = new Date();
	t = d.getTime();
	eval("var win" + t + " = window.open('Color_Names.htm');");
	}

function randomColor()
	{
	document.colForm.hueField.value = getRandomDEC();
	document.colForm.satField.value = getRandomDEC();
	document.colForm.valField.value = getRandomDEC();
	setHSV();
	}

function updateFields()
	{
	var d = document.colForm;
	d.hexField.value = getHEX();
	d.redField.value = getRED();
	d.grnField.value = getGRN();
	d.bluField.value = getBLU();
	d.hueField.value = getHUE();
	d.satField.value = getSAT();
	d.valField.value = getVAL();
	}

function setHSV()
	{
	var d = document.colForm;
	errStr = "Invalid entries:\n\n";
	var H = d.hueField.value;
	var S = d.satField.value;
	var V = d.valField.value;
	var isGood = true;
	if (!numberIsValid(H)) { errStr += "\"" + H + "\" is not a valid entry for Hue.\nMust be number between 0 and 255\n\n"; isGood = false; }
	if (!numberIsValid(S)) { errStr += "\"" + S + "\" is not a valid entry for Saturation.\nMust be number between 0 and 255\n\n"; isGood = false; }
	if (!numberIsValid(V)) { errStr += "\"" + V + "\" is not a valid entry for Value.\nMust be number between 0 and 255\n\n"; isGood = false; }
	if (!isGood) { errStr += "This calculator uses an arbitrary scale\nof 0-255 for all HSV values."; alert(errStr); return; }
	setHUE(parseInt(H));
	setSAT(parseInt(S));
	setVAL(parseInt(V));
	newHSV();
	updateFields();
	}

function setRGB()
	{
	var d = document.colForm;
	errStr = "Invalid entries:\n\n";
	var R = d.redField.value;
	var G = d.grnField.value;
	var B = d.bluField.value;
	var isGood = true;
	if (!numberIsValid(R)) { errStr += "\"" + R + "\" is not a valid entry for Red.\nMust be a number between 0 and 255.\n\n"; isGood = false; }
	if (!numberIsValid(G)) { errStr += "\"" + G + "\" is not a valid entry for Green.\nMust be a number between 0 and 255.\n\n"; isGood = false; }
	if (!numberIsValid(B)) { errStr += "\"" + B + "\" is not a valid entry for Blue.\nMust be a number between 0 and 255.\n\n"; isGood = false; }
	if (!isGood) { alert(errStr); return; }
	setRED(parseInt(R));
	setGRN(parseInt(G));
	setBLU(parseInt(B));
	newRGB();
	updateFields();
	}

function setHEX()
	{
	var hex = document.colForm.hexField.value;
	var orig = hex;
	hex = hex.toUpperCase();
	if (hex == getHEX()) return;
	if (hex.indexOf(" ") != -1) { hex2 = hex.split(" "); hex = hex2.join(""); }
	if (!hexIsValid(hex))
	for (i=0;i<CNA.length;i++)
		{
		if (hex == CNA[i][0]) { hex = CNA[i][1]; break; }
		}
	if (!hexIsValid(hex)) { alert("Invalid entry:\n\n\"" + orig + "\" is not a valid HEX code.\nMust be six characters; either 0-9 or A-F.\n\nColor names are okay if they correspond to\na standard browser-supported color name.\n\nClick on \"Samples\" for a list of supported\ncolor names."); return; }
	document.bgColor = hex;
	newHEX();
	updateFields();
	}

function resetCalc()
	{
	document.bgColor = originalColor;
	range = 0;
	phase = 0;
	newHEX();
	updateFields();
	}

function openSamples()
	{
	var sh = screen.height - 90;
	var n_d = new Date();
	var winName = "sampleWin" + n_d.getTime();
	eval('var ' + winName + ' = window.open("about:blank","' + winName + '","width=300,height=' + sh + ',left=0,top=0,scrollbars=1,resizable=1")');
	eval("sampleWin = " + winName);
	sampleWin.document.open();
	sampleWin.document.write("<html><head><title>HTML Color Names</title><style type='text/css'>a:link{text-decoration:none;color:000;}a:hover{text-decoration:none;color:999;}</style></head><body bgcolor=#" + getHEX() + "><font face=arial size=2><b>");
	for (i=0;i<CNA.length;i++)
		{
		sampleWin.document.write("<a href='javascript:opener.document.colForm.hexField.value = \"" + CNA[i][1] + "\";opener.setHEX();window.close();' onmouseover='document.bgColor=\"" + CNA[i][1] + "\"'>" + CNA[i][0] + " = " + CNA[i][1] + "</a><br>");
		}
	sampleWin.document.write("</b></font></body></html>");
	sampleWin.document.close();
	}

function compareToWEB()
	{
	var wr = DEC_to_HEX(DEC_to_WEB(getRED()));
	var wg = DEC_to_HEX(DEC_to_WEB(getGRN()));
	var wb = DEC_to_HEX(DEC_to_WEB(getBLU()));
	var wh = wr + wg + wb;
	var h = getHEX();
	var n_d = new Date();
	var winName = "sampleWin" + n_d.getTime();
	eval('var ' + winName + ' = window.open("about:blank","' + winName + '","width=500,height=200,left=10,top=10")');
	eval("sampleWin = " + winName);
	sampleWin.document.open();
	sampleWin.document.write("<html><head><title>Web Safe Comparison</title></head><body bgcolor=#FFFFFF marginheight=0 marginwidth=0 leftmargin=0 topmargin=0>");
	sampleWin.document.write("<table border=0 width=100% height=200 cellpadding=0 cellspacing=0><tr><td width=50% align=center bgcolor=#" + h + "><form><font face='arial,helvetica' size=2 color=#FFFFFF><b>current color: #" + h + "</b></font><br><font face='arial,helvetica' size=2 color=#000000><b>current color: #" + h + "</b></font><br><br><input type=button value='keep current color' onclick='window.close()'></form></td><td width=50% align=center bgcolor=#" + wh + "><form><font face='arial,helvetica' size=2 color=#FFFFFF><b>closest web safe color: #" + wh + "</b></font><br><font face='arial,helvetica' size=2 color=#000000><b>closest web safe color: #" + wh + "</b></font><br><br><input type=button value='use this color' onclick='window.opener.document.colForm.hexField.value=\"" + wh + "\";window.opener.setHEX();window.close();'></form></td></tr></table>");
	sampleWin.document.write("</body></html>");
	sampleWin.document.close();
	}

function openMyColors()
	{
	var mycol = window.open("mycolors.html","_mycol","width=500,height=350,left=0,top=0,resizable,scrollbars");
	}


//--></SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<FORM name=colForm>
<TABLE align=center border=0 cellPadding=2 cellSpacing=0 width=600>
  <TBODY>
  <TR>
    <TD colSpan=7>
      <TABLE bgColor=#0000ff border=1 cellPadding=2 cellSpacing=0 
        width="100%"><TBODY>
        <TR>
          <TD class=blue><FONT face=verdana>Ã�Â«&nbsp;&nbsp; The RGB Color 
			Calculator - A Web Page Color Choosing Tool&nbsp;&nbsp; Ã�Â» 
    </FONT></TD></TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD width="17%">
      <TABLE border=1 cellPadding=2 cellSpacing=0 width="100%">
        <TBODY>
        <TR>
          <TD class=blue><A class=menu href="javascript:%20compareToWEB();" 
            title="Compare this background color to the nearest web-safe color">
			web safe</A> </TD></TR></TBODY></TABLE></TD>
    <TD width="17%">
      <TABLE border=1 cellPadding=2 cellSpacing=0 width="100%">
        <TBODY>
        <TR>
          <TD class=blue><A class=menu href="javascript:%20openSamples();" 
            title="Choose from a list of color by name">samples</A> 
        </TD></TR></TBODY></TABLE></TD>
    <TD width="17%">
      <TABLE border=1 cellPadding=2 cellSpacing=0 width="100%">
        <TBODY>
        <TR>
          <TD class=blue><A class=menu href="javascript:randomColor();" 
            title="Generate a random color">random</A> </TD></TR></TBODY></TABLE></TD>
    <TD width="17%">
      <TABLE border=1 cellPadding=2 cellSpacing=0 width="100%">
        <TBODY>
        <TR>
          <TD class=blue><A class=menu href="javascript:%20openTable();" 
            title="Show a table of 216 web-safe colors">table</A> 
      </TD></TR></TBODY></TABLE></TD>
    <TD width="17%">
      <TABLE border=1 cellPadding=2 cellSpacing=0 width="100%">
        <TBODY>
        <TR>
          <TD class=blue><A class=menu href="javascript:openMyColors()" 
            title="A list of custom colors">my colors</A> 
</TD></TR></TBODY></TABLE></TD>
    <TD width="17%">
      <TABLE border=1 cellPadding=2 cellSpacing=0 width="100%">
        <TBODY>
        <TR>
          <TD class=blue><A class=menu href="javascript:openHelp();" 
            title="Help with this calculator and web colors in general">help</A> 
          </TD></TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD colSpan=7>
      <TABLE bgColor=#cccccc border=1 cellPadding=3 cellSpacing=0 
        width="100%"><TBODY>
        <TR>
          <TD vAlign=top><INPUT maxLength=20 name=hexField size=8>&nbsp;&nbsp; 
            <FONT face=verdana><B>Ã�Â«</B></FONT> enter 6-digit HEX code <BR><BR><INPUT onclick=setHEX(); type=button value=calculate> <INPUT onclick=resetCalc(); type=button value=reset>&nbsp;&nbsp;&nbsp;&nbsp; 
            <B>&lt;HEX code area&gt;</B> </TD>
          <TD vAlign=top><INPUT maxLength=3 name=redField size=3> <INPUT 
            maxLength=3 name=grnField size=3> <INPUT maxLength=3 name=bluField 
            size=3> &nbsp;<FONT face=verdana><B>Ã�Â«</B></FONT> RGB values<BR><BR><INPUT onclick=setRGB(); type=button value=calculate> <INPUT onclick=resetCalc(); type=button value=reset>&nbsp;&nbsp;&nbsp;&nbsp; 
            <B>&lt;RGB area&gt;</B> </TD></TR>
        <TR>
          <TD><INPUT onclick=adjRED(i_a);newRGB();updateFields(); type=button value=R+> 
<INPUT onclick=adjGRN(i_a);newRGB();updateFields(); type=button value=G+> 
<INPUT onclick=adjBLU(i_a);newRGB();updateFields(); type=button value=B+>&nbsp;&nbsp; <INPUT onclick=adjHUE((i_a%2==1)?(i_a+1)/2:i_a/2);newHSV();updateFields(); type=button value=H+> 
<INPUT onclick=adjSAT(i_a);newHSV();updateFields(); type=button value=S+> 
<INPUT onclick=adjVAL(i_a);newHSV();updateFields(); type=button value=V+>&nbsp;&nbsp; <SELECT name=incrementSelector 
            onchange="i_a = parseInt(document.colForm.incrementSelector.options[document.colForm.incrementSelector.selectedIndex].value);"> 
              <OPTION value=1>increment = 1x<OPTION value=5>increment = 5x<OPTION value=9>
				increment = 9x<OPTION selected 
              value=13>increment = 13x<OPTION value=17>increment = 17x<OPTION 
              value=22>increment = 22x<OPTION value=26>increment = 26x<OPTION 
              value=30>increment = 30x<OPTION value=34>increment = 34x<OPTION 
              value=39>increment = 39x<OPTION value=43>increment = 43x<OPTION 
              value=47>increment = 47x<OPTION value=51>increment = 51x</OPTION></SELECT><BR><INPUT onclick="adjRED(0 - i_a);newRGB();updateFields();" type=button value="R- "> 
<INPUT onclick="adjGRN(0 - i_a);newRGB();updateFields();" type=button value="G- "> 
<INPUT onclick="adjBLU(0 - i_a);newRGB();updateFields();" type=button value="B- ">&nbsp;&nbsp; <INPUT onclick="adjHUE(0 - ((i_a%2==1)?(i_a+1)/2:i_a/2));newHSV();updateFields();" type=button value="H- "> 
<INPUT onclick="adjSAT(0 - i_a);newHSV();updateFields();" type=button value="S- "> 
<INPUT onclick="adjVAL(0 - i_a);newHSV();updateFields();" type=button value="V- ">&nbsp;&nbsp; 
			&nbsp;<B>&lt;tweaking area&gt;</B> </TD>
          <TD vAlign=top><INPUT maxLength=3 name=hueField size=3> <INPUT 
            maxLength=3 name=satField size=3> <INPUT maxLength=3 name=valField 
            size=3> &nbsp;<FONT face=verdana><B>Ã�Â«</B></FONT> HSV values<BR><BR><INPUT onclick=setHSV(); type=button value=calculate> <INPUT onclick=resetCalc(); type=button value=reset>&nbsp;&nbsp;&nbsp;&nbsp; 
            <B>&lt;HSV area&gt;</B> 
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></FORM>
<SCRIPT language=javascript><!--

// important initializer code

var originalColor = getHEX();
newHEX();
updateFields();
i_a = parseInt(document.colForm.incrementSelector.options[document.colForm.incrementSelector.selectedIndex].value);

//--></SCRIPT>

<DIV align=center><FONT color=#777777>Ã�Â© 2000-2002 by greg&nbsp;&nbsp;&nbsp;&nbsp; 
<A href="mailto:comments@drpeterjones.com?subject=Color Calculator Feedback">
	comments or suggestions?</A><BR></FONT></DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->