CODE - editcolor.js

<!--
// Begin Script "editcolor.js"

/*
Color Picker for Windows Desktop By Indigotide
webmaster@indigotide.com
Features:
HSL to RGB conversions
RGB to HSL conversions
Persistant User Data! Custom Colors
DHTML!!! Color Bar Controls DHTML!!!
*/
var RED = 0; // global RED value ( 0.0 to 1.0 )
var GREEN = 0; // global GREEN value ( 0.0 to 1.0 )
var BLUE = 0; // global BLUE value ( 0.0 to 1.0 )
var MINIMUM = 0; // global MINIMUM value of RGB
var MAXIMUM = 0; // global MAXIMUM value of RGB
var deltaMAXIMUM = 0; // global delta RGB value ( 0 = Grey Scale, no Hue or Saturation )
var HUE = 0; // global HUE value ( 0.0 to 1.0 )
var SATURATION = 0; // global SATURATION value ( 0.0 to 1.0 )
var LUMINOSITY = 0; // global LUMINOSITY value ( 0.0 to 1.0 )
var reg_R = 0; // global Red value ( 0 to 255 )
var reg_G = 0; // global Green value ( 0 to 255 )
var reg_B = 0; // global Blue value ( 0 to 255 )
var reg_H = 0; // global Hue value ( 0 to 255 )
var reg_S = 0; // global Saturation value ( 0 to 255 )
var reg_L = 0; // global Luminosity value ( 0 to 255 )

function loadUserSetting()
{
var Data = picker.hex; // (onload=) point to userData field

Data.load("ColorPickerData"); // XML load saved userData from user's computer if available

picker.hex.value = Data.getAttribute("SavedHexColors"); // load saved color values into form input field

if (picker.hex.value == "null")
{
picker.hex.value = "#000000#000000#000000#000000#000000#000000#000000#000000#000000#000000#000000#000000#000000";
}

var SavedColors = picker.hex.value; // store 13 colors data

var hex = picker.hex.value; // initial color value (hex$)
hex = hex.substr(1); // NaN so remove the first"#" so we can parseInt

var decimal = parseInt( hex,16 ); // convert first hex$ to decimal integer

setRGB(decimal); // parse decimal and set RGB registers

document.getElementById( "preview" ).readOnly = true; // no typing in fields
document.getElementById( "hex" ).readOnly = true;
document.getElementById( "selection" ).readOnly = true;

var index = 0;
for(index=1;index<=12;index++)
{
document.getElementById("hex(" + index + ")").readOnly = true; // no typing in custom color fields
document.getElementById("memory(" + index + ")").readOnly = true;
}

showSelectedColor(); // set global RGB values and display previous selected color sample

getHSLfromRGB(); // set global RGB deltas and set HSL registers

createControls(); // DHTML!

updateSatControl(); // colorize 256 Saturation control elements
updateLumControl(); // colorize 256 Luminosity control elements

updateRGBIndex(); // display current RGB register values
updateHSLIndex(); // display current HSL register values

getCustomColors(SavedColors); // recall the 12 saved custom colors
}

function updateRGBIndex()
{
picker.redIndex.value = reg_R; // display current RGB register values
picker.grnIndex.value = reg_G;
picker.bluIndex.value = reg_B;
}

function updateHSLIndex()
{
picker.hueIndex.value = reg_H; // display current HSL register values
picker.satIndex.value = reg_S;
picker.lumIndex.value = reg_L;
}

function getCustomColors(SavedColors)
{

var index = 0;
var hex = "#000000"; // parse XML data store and restore saved colors ( items 2 to 13 )
for(index=1;index<=12;index++)
{
hex = SavedColors.substr(index*7,7)
if( hex == "null" || hex == "" )
{
hex = "#000000"
}
document.getElementById("hex(" + index + ")").value = hex;
document.getElementById("memory(" + index + ")").style.backgroundColor = hex;
}
}

function createControls()
{
var index=0; // BEGIN DYNAMIC HTML
var hue = 0;
var red = 0;
var grn = 0;
var blu = 0;

var redDynamic = ""; // initialize variables to hold new dynamic html
var grnDynamic = "";
var bluDynamic = "";
var hueDynamic = "";
var satDynamic = "";
var lumDynamic = ""; // now build 1,548 new html elements on the fly

for (index=0;index<=255;index++)
{
redDynamic += "<INPUT type=\"text\" id=\"redcontrol(" + index + ")\" onmouseover=\"showRed(" + index + ")\" onmouseout=\"hideRed()\" onmousedown=\"changeRed(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
grnDynamic += "<INPUT type=\"text\" id=\"grncontrol(" + index + ")\" onmouseover=\"showGrn(" + index + ")\" onmouseout=\"hideGrn()\" onmousedown=\"changeGrn(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
bluDynamic += "<INPUT type=\"text\" id=\"blucontrol(" + index + ")\" onmouseover=\"showBlu(" + index + ")\" onmouseout=\"hideBlu()\" onmousedown=\"changeBlu(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
hueDynamic += "<INPUT type=\"text\" id=\"huecontrol(" + index + ")\" onmouseover=\"showHue(" + index + ")\" onmouseout=\"hideHue()\" onmousedown=\"changeHue(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
satDynamic += "<INPUT type=\"text\" id=\"satcontrol(" + index + ")\" onmouseover=\"showSat(" + index + ")\" onmouseout=\"hideSat()\" onmousedown=\"changeSat(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
lumDynamic += "<INPUT type=\"text\" id=\"lumcontrol(" + index + ")\" onmouseover=\"showLum(" + index + ")\" onmouseout=\"hideLum()\" onmousedown=\"changeLum(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
}

// and add the Index counters
redDynamic += "<INPUT type=\"text\" id=\"redIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
grnDynamic += "<INPUT type=\"text\" id=\"grnIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
bluDynamic += "<INPUT type=\"text\" id=\"bluIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
hueDynamic += "<INPUT type=\"text\" id=\"hueIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
satDynamic += "<INPUT type=\"text\" id=\"satIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
lumDynamic += "<INPUT type=\"text\" id=\"lumIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";

redDynamic += " RED"; // and finally add labels
grnDynamic += " GREEN";
bluDynamic += " BLUE";
hueDynamic += " HUE";
satDynamic += " SATURATION";
lumDynamic += " LUMINOSITY";

document.getElementById( "redWindow" ).innerHTML = redDynamic; // next add new html to DIV elements to create controls
document.getElementById( "grnWindow" ).innerHTML = grnDynamic;
document.getElementById( "bluWindow" ).innerHTML = bluDynamic;
document.getElementById( "hueWindow" ).innerHTML = hueDynamic;
document.getElementById( "satWindow" ).innerHTML = satDynamic;
document.getElementById( "lumWindow" ).innerHTML = lumDynamic;

document.getElementById( "redIndex" ).readOnly = true; // set Index counters to read only
document.getElementById( "grnIndex" ).readOnly = true;
document.getElementById( "bluIndex" ).readOnly = true;
document.getElementById( "hueIndex" ).readOnly = true;
document.getElementById( "satIndex" ).readOnly = true;
document.getElementById( "lumIndex" ).readOnly = true;

for (index=0;index<=255;index++)
{
var Decimal = new Number( index ); // and last add 256 fixed colors to 4 fixed controls
hue = Decimal / 255; // hue is normalized decimal number ( 0.0 to 1.0 )
hue = getRGBfromHSL( hue,1,0.5 ); // hue is now decimal color value ( 0 to 65535 )

document.getElementById("huecontrol(" + index + ")").style.backgroundColor = hue; // hue color bar

red = Decimal * 65536; // now get index values as decimal color value ( 0 to 65535 )
grn = Decimal * 256;
blu = Decimal * 1;
document.getElementById("redcontrol(" + index + ")").style.backgroundColor = red; // RGB color bars
document.getElementById("grncontrol(" + index + ")").style.backgroundColor = grn;
document.getElementById("blucontrol(" + index + ")").style.backgroundColor = blu; // END DYNAMIC HTML
}
}

function setRGB(decimal)
{
reg_R = Math.floor( decimal / 65536 ); // get decimal color & convert to RGB
decimal -= reg_R * 65536; // set RGB registers
reg_G = Math.floor( decimal / 256 );
decimal -= reg_G * 256;
reg_B = Math.floor(decimal);
}

function showSelectedColor()
{
var Decimal = new Number( reg_R ); // change red value to decimal number
RED = Decimal / 255; // save as global normalized decimal number ( 0.0 to 1.0 )
var redHex = Decimal.toString(16); // save as hex $

var Decimal = new Number( reg_G ); // change green value to decimal number
GREEN = Decimal / 255; // save as global normalized decimal number ( 0.0 to 1.0 )
var greenHex = Decimal.toString(16); // save as hex $

var Decimal = new Number( reg_B ); // change blue value to decimal number
BLUE = Decimal / 255; // save as global normalized decimal number ( 0.0 to 1.0 )
var blueHex = Decimal.toString(16); // save as hex $

picker.hex.value = "#" + addZero( redHex ) + addZero( greenHex ) + addZero( blueHex ); // show selected color hex value
document.getElementById("selection").style.backgroundColor = picker.hex.value; // show selected color
}

function getHSLfromRGB()
{
MINIMUM = Math.min( Math.min( RED, GREEN ), BLUE ); // Min. value of RGB normalized decimal number ( 0.0 to 1.0 )
MAXIMUM = Math.max( Math.max( RED, GREEN ), BLUE ); // Max. value of RGB normalized decimal number ( 0.0 to 1.0 )
deltaMAXIMUM = MAXIMUM - MINIMUM; // Delta RGB value normalized decimal number ( 0.0 to 1.0 )
LUMINOSITY = ( MAXIMUM + MINIMUM ) / 2; // always get luminosity normalized decimal number ( 0.0 to 1.0 )

if(deltaMAXIMUM != 0)
{
var deltaRed = ( ( ( MAXIMUM - RED ) / 6 ) + ( deltaMAXIMUM / 2 ) ) / deltaMAXIMUM;
var deltaGreen = ( ( ( MAXIMUM - GREEN ) / 6 ) + ( deltaMAXIMUM / 2 ) ) / deltaMAXIMUM;
var deltaBlue = ( ( ( MAXIMUM - BLUE ) / 6 ) + ( deltaMAXIMUM / 2 ) ) / deltaMAXIMUM;

if( RED == MAXIMUM )
{
HUE = deltaBlue - deltaGreen; // not gray so get hue normalized decimal number ( 0.0 to 1.0 )
}
else if( GREEN == MAXIMUM )
{
HUE = ( 1 / 3 ) + deltaRed - deltaBlue;
}
else if( BLUE == MAXIMUM )
{
HUE = ( 2 / 3 ) + deltaGreen - deltaRed;
}

if( HUE < 0 )
{
HUE += 1;
}
else if( HUE > 1 )
{
HUE -= 1;
}
}


if( deltaMAXIMUM == 0 )
{
SATURATION = 0; // grayscale, no color
}
else if( LUMINOSITY < 0.5 )
{
SATURATION = deltaMAXIMUM / ( MAXIMUM + MINIMUM ); // not gray so get saturation normalized decimal number ( 0.0 to 1.0 )
}
else if( LUMINOSITY >= 0.5 )
{
SATURATION = deltaMAXIMUM / ( 2 - MAXIMUM - MINIMUM );
}


var hueValue = HUE * 255; // convert to 0 to 255
var satValue = SATURATION * 255;
var lumValue = LUMINOSITY * 255;

reg_H = hueValue.toFixed(0); // round HSL Values to integer and store values
reg_S = satValue.toFixed(0);
reg_L = lumValue.toFixed(0);
}

function updateLumControl()
{
var index=0; // colorize 256 Luminosity control elements
var lum = 0; // based on current hue and saturation

for (index=0;index<=255;index++)
{
var Decimal = new Number( index ); // get lum value as decimal number
lum = Decimal / 255; // get normalized decimal number ( 0.0 to 1.0 )
lum = getRGBfromHSL( HUE,SATURATION,lum );
document.getElementById("lumcontrol(" + index + ")").style.backgroundColor = lum;
}
}

function updateSatControl()
{
var index=0; // colorize 256 Saturation control elements
var sat = 0; // based on current hue
var satAdj = 0;

for (index=0;index<=255;index++)
{
var Decimal = new Number( index ); // get lum value as decimal number
sat = Decimal / 255; // get normalized decimal number ( 0.0 to 1.0 )

if(sat == 0 )
{
satAdj = sat + 0.0000001;
}
else
{
satAdj = sat;
}

sat = getRGBfromHSL( HUE,satAdj,0.5 );
document.getElementById("satcontrol(" + index + ")").style.backgroundColor = sat;

}
}

function normalizeHSL()
{
var Decimal = new Number( reg_H ); // change hue value to decimal number
HUE = Decimal / 255; // get normalized decimal number ( 0.0 to 1.0 )

var Decimal = new Number( reg_S ); // change saturation value to decimal number
SATURATION = Decimal / 255; // get normalized decimal number ( 0.0 to 1.0 )

var Decimal = new Number( reg_L ); // change luminosity value to decimal number
LUMINOSITY = Decimal / 255; // get normalized decimal number ( 0.0 to 1.0 )
}


function getRGBfromHSL( hue,saturation,luminosity )
{
var V1 = 0
var V2 = 0
var red = 0;
var green = 0;
var blue = 0; // calculate RGB based on HSL

if( saturation == 0 )
{
red = luminosity * 255; // grayscale, no hue or saturation
green = luminosity * 255; //RGB results from 0 to 255
blue = luminosity * 255;
}
else
{
if( luminosity < 0.5 )
{
V2 = (luminosity * ( 1 + saturation )); // not grayscale
}
else if( luminosity >= 0.5 )
{
V2 = ( luminosity + saturation ) - ( saturation * luminosity );
}

V1 = 2 * luminosity - V2;

red = Math.floor( 255 * HUEtoRGB( V1, V2, hue + ( 1 / 3 ) ) );

green = Math.floor( 255 * HUEtoRGB( V1, V2, hue ) );

blue = Math.floor( 255 * HUEtoRGB( V1, V2, hue - ( 1 / 3 ) ) );

}
var decimal = ( red * 65536 ) + ( green * 256 ) + blue;
return(decimal); // return as decimal RGB color
}

function HUEtoRGB( V1, V2, hue )
{
if( hue < 0 )
{
hue += 1; // used to compute individual RGB values
}
else if( hue > 1 )
{
hue -= 1;
}

if( ( 6 * hue ) < 1 )
{
return( V1 + ( V2 - V1 ) * 6 * hue );
}
else if( ( 2 * hue ) < 1 )
{
return( V2 );
}
else if( ( 3 * hue ) < 2 )
{
return( V1 + ( V2 - V1 ) * ( ( 2 / 3 ) - hue ) * 6 );
}
else return( V1 );
}

function addZero( n ) // adds leading zero if 1 digit hex number
{
if( n.length == 1 )
{
return "0" + n;
}
else
return n;
}

function showPreview(bgColor)
{
document.getElementById("preview").style.backgroundColor = bgColor; // mouseover
}

function showRed(red)
{
picker.redIndex.value = red;
var grn = reg_G;
var blu = reg_B;
var decimal = ( red * 65536 ) + ( grn * 256 ) + ( blu * 1); // get decimal RGB value
document.getElementById("preview").style.backgroundColor = decimal; // mouseover
}

function showGrn(grn)
{
picker.grnIndex.value = grn;
var red = reg_R;
var blu = reg_B;
var decimal = ( red * 65536 ) + ( grn * 256 ) + ( blu * 1); // get decimal RGB value
document.getElementById("preview").style.backgroundColor = decimal; // mouseover
}

function showBlu(blu)
{
picker.bluIndex.value = blu;
var red = reg_R;
var grn = reg_G;
var decimal = ( red * 65536 ) + ( grn * 256 ) + ( blu * 1); // get decimal RGB value
document.getElementById("preview").style.backgroundColor = decimal; // mouseover
}

function showHue(hue)
{
picker.hueIndex.value = hue;
hue /= 255;
var decimal = getRGBfromHSL( hue,SATURATION,LUMINOSITY ); // get decimal RGB value from new HSL values
document.getElementById("preview").style.backgroundColor = decimal; // mouseover
}

function showSat(sat)
{
picker.satIndex.value = sat;
sat /= 255;
var decimal = getRGBfromHSL( HUE,sat,LUMINOSITY ); // get decimal RGB value from new HSL values
document.getElementById("preview").style.backgroundColor = decimal; // mouseover
}

function showLum(lum)
{
picker.lumIndex.value = lum;
lum /= 255;
var decimal = getRGBfromHSL( HUE,SATURATION,lum ); // get decimal RGB value from new HSL values
document.getElementById("preview").style.backgroundColor = decimal; // mouseover
}

function hidePreview()
{
document.getElementById("preview").style.backgroundColor = 0; // mouseout
}

function hideRed()
{
hidePreview(); // mouseout
picker.redIndex.value = reg_R;
}

function hideGrn()
{
hidePreview(); // mouseout
picker.grnIndex.value = reg_G;
}

function hideBlu()
{
hidePreview(); // mouseout
picker.bluIndex.value = reg_B;
}

function hideHue()
{
hidePreview(); // mouseout
picker.hueIndex.value = reg_H;
}

function hideSat()
{
hidePreview(); // mouseout
picker.satIndex.value = reg_S;
}

function hideLum()
{
hidePreview(); // mouseout
picker.lumIndex.value = reg_L;
}

function changeRed(red)
{
reg_R = red; // new red selected
showSelectedColor(); // set global RGB values and display selected color sample
getHSLfromRGB(); // set global RGB deltas and set HSL registers
updateSatControl();
updateLumControl();
updateHSLIndex();
}

function changeGrn(grn)
{
reg_G = grn; // new green selected
showSelectedColor(); // set global RGB values and display selected color sample
getHSLfromRGB(); // set global RGB deltas and set HSL registers
updateSatControl();
updateLumControl();
updateHSLIndex();
}

function changeBlu(blu)
{
reg_B = blu; // new blue selected
showSelectedColor(); // set global RGB values and display selected color sample
getHSLfromRGB(); // set global RGB deltas and set HSL registers
updateSatControl();
updateLumControl();
updateHSLIndex();
}

function changeHue(hue)
{
reg_H = hue; // new hue selected
normalizeHSL();
var decimal = getRGBfromHSL( HUE,SATURATION,LUMINOSITY ); // get decimal RGB value from new HSL values
setRGB(decimal); // parse decimal and set RGB registers
showSelectedColor(); // set global RGB values and display selected color sample
updateSatControl();
updateLumControl();
updateRGBIndex();
}

function changeSat(sat)
{
reg_S = sat; // new saturation selected
normalizeHSL();
var decimal = getRGBfromHSL( HUE,SATURATION,LUMINOSITY ); // get decimal RGB value from new HSL values
setRGB(decimal); // parse decimal and set RGB registers
showSelectedColor(); // set global RGB values and display selected color sample
updateLumControl();
updateRGBIndex();
}

function changeLum(lum)
{
reg_L = lum; // new luminosity selected
normalizeHSL();
var decimal = getRGBfromHSL( HUE,SATURATION,LUMINOSITY ); // get decimal RGB value from new HSL values
setRGB(decimal); // parse decimal and set RGB registers
showSelectedColor(); // set global RGB values and display selected color sample
updateRGBIndex();
}

function saveColor(index)
{
document.getElementById("hex(" + index + ")").value = picker.hex.value; // set and store a custom color

document.getElementById("memory(" + index + ")").style.backgroundColor = picker.hex.value;

saveUserSetting();
}

function loadColor(memory)
{
picker.hex.value = document.getElementById("hex(" + memory + ")").value; // retrieve a custom color

var hex = picker.hex.value; // new color value (hex$)
hex = hex.substr(1); // NaN so remove the "#" so we can parseInt

var decimal = parseInt( hex,16 ); // convert hex$ to decimal integer

setRGB(decimal); // parse decimal and set RGB registers

showSelectedColor(); // set global RGB values and display selected color sample

getHSLfromRGB(); // set global RGB deltas and set HSL registers

updateSatControl();
updateLumControl();

updateRGBIndex(); // display current RGB register values
updateHSLIndex(); // display current HSL register values
}

function saveUserSetting()
{
var currentColor = picker.hex.value; // XML user DATA

var index = 0;
for(index=1;index<=12;index++)
{
picker.hex.value += document.getElementById("hex(" + index + ")").value; // get all 13 hex$ into userData field
}

var Data = picker.hex; // get color settings from hex field
// input field object must be class = userData

Data.setAttribute("SavedHexColors",Data.value); // like a "cookie" but XML Store (IE only)

Data.save("ColorPickerData"); // save current color settings when page unloads or custom color stored

picker.hex.value = currentColor; // restore hex field if custom color stored
}
// End of Script "editcolor.js"
// unhide -->

/CODE

HTML - editcolor.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Description" content="Color Picker Javascript">
<TITLE>Color Picker Javascript</TITLE>
<STYLE type="text/css">
<!--
.userData {
BEHAVIOR: url(#default#userdata)
}

INPUT{
padding-left : 5px;
font-family : Arial;
background-color : #ffffff;
color : #000000;
border-color : #404040 #d0d0d0 #d0d0d0 #404040;
font-weight : bolder;
}
TABLE{
font-family : Arial;
color : white;
background-color : normal;
font-size : xx-small;
font-weight : bolder;
}
DIV{
font-family : Arial;
color : white;
background-color : #404040;
height : 24;
font-size : xx-small;
font-weight : bolder;
text-align : left;
padding-top : 4px;
}
BUTTON{
width : 20px;
height : 20px;
font-family : Arial;
font-size : xx-small;
font-weight : bolder;
color : black;
}-->
</STYLE>
<SCRIPT language="JavaScript" src="editcolor.js"></SCRIPT>
</HEAD>
<BODY onload="loadUserSetting()" onunload="saveUserSetting()" bgcolor="#ffffff" style="font-family : Arial;">
<CENTER>
<FORM name="picker">
<TABLE border="0" bgcolor="#404040" style="border-style : solid solid solid solid;border-top-color : black;border-right-color : black;border-bottom-color : black;border-left-color : black;">

<TR>
<TD colspan="2" align="center">
<TABLE border="0" cellspacing="1">
<TBODY>
<TR>
<TD align="center">
<TABLE cellspacing="2">
<TBODY>
<TR>
<TD colspan="8" align="left" style="font-size : medium;">_________ EDIT COLOR _________</TD>
<TD align="center" style="font-size : medium;" rowspan="7">
<TABLE border="0" cellspacing="1">
<TBODY>
<TR>
<TD align="center">_ PREVIEW _</TD>
</TR>
<TR>
<TD align="center"><INPUT id="preview" size="1" style="width : 72px;height : 64px;;background-color : black;" type="text" maxlength="1"></TD>
</TR>
<TR>
<TD height="25"></TD>
</TR>
<TR>
<TD align="center">_ SELECTED _</TD>
</TR>
<TR>
<TD align="center"><INPUT class="userData" id="hex" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
</TR>
<TR>
<TD align="center"><INPUT id="selection" size="1" style="width : 72px;height : 64px;" type="text" maxlength="1"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="redWindow" >Dynamic RED Control Elements Go HERE</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="grnWindow" >Dynamic GREEN Control Elements Go HERE</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="bluWindow" >Dynamic BLUE Control Elements Go HERE</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="hueWindow" >Dynamic HUE Control Elements Go HERE</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="satWindow" >Dynamic SATURATION Control Elements Go HERE</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="lumWindow" >Dynamic LUMINOSITY Control Elements Go HERE</DIV>
</TD>
</TR>
<TR>
<TD colspan="9" align="center">__________________________________ CUSTOM COLORS __________________________________</TD>
</TR>
<TR>
<TD colspan="9" align="center">
<TABLE cellspacing="2">
<TBODY>
<TR>
<TD align="center">
<BUTTON type="button" id="savememory(1)" onmousedown="saveColor(1)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(1)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(1)"></TD>
<TD align="center"><INPUT id="hex(1)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
<TD></TD>
<TD align="center">
<BUTTON type="button" id="savememory(2)" onmousedown="saveColor(2)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(2)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(2)"></TD>
<TD align="center"><INPUT id="hex(2)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
<TD></TD>
<TD align="center">
<BUTTON type="button" id="savememory(3)" onmousedown="saveColor(3)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(3)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(3)"></TD>
<TD align="center"><INPUT id="hex(3)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
</TR>
<TR>
<TD align="center">
<BUTTON type="button" id="savememory(4)" onmousedown="saveColor(4)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(4)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(4)"></TD>
<TD align="center"><INPUT id="hex(4)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
<TD width="30"></TD>
<TD align="center">
<BUTTON type="button" id="savememory(5)" onmousedown="saveColor(5)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(5)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(5)"></TD>
<TD align="center"><INPUT id="hex(5)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
<TD width="30"></TD>
<TD align="center">
<BUTTON type="button" id="savememory(6)" onmousedown="saveColor(6)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(6)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(6)"></TD>
<TD align="center"><INPUT id="hex(6)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
</TR>
<TR>
<TD align="center">
<BUTTON type="button" id="savememory(7)" onmousedown="saveColor(7)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(7)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(7)"></TD>
<TD align="center"><INPUT id="hex(7)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
<TD></TD>
<TD align="center">
<BUTTON type="button" id="savememory(8)" onmousedown="saveColor(8)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(8)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(8)"></TD>
<TD align="center"><INPUT id="hex(8)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
<TD></TD>
<TD align="center">
<BUTTON type="button" id="savememory(9)" onmousedown="saveColor(9)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(9)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(9)"></TD>
<TD align="center"><INPUT id="hex(9)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
</TR>
<TR>
<TD align="center">
<BUTTON type="button" id="savememory(10)" onmousedown="saveColor(10)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(10)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(10)"></TD>
<TD align="center"><INPUT id="hex(10)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
<TD></TD>
<TD align="center">
<BUTTON type="button" id="savememory(11)" onmousedown="saveColor(11)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(11)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(11)"></TD>
<TD align="center"><INPUT id="hex(11)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
<TD></TD>
<TD align="center">
<BUTTON type="button" id="savememory(12)" onmousedown="saveColor(12)">M+</BUTTON>
</TD>
<TD align="center"><INPUT size="1" type="text" maxlength="1" id="memory(12)" style="width : 42px;height : 22px;background-color : black;" onmouseover="showPreview(this.style.backgroundColor)" onmouseout="hidePreview()" onmousedown="loadColor(12)"></TD>
<TD align="center"><INPUT id="hex(12)" size="3" style="width : 72px;height : 22px;font-size : x-small;padding-left : 6px;" type="text" value="#000000"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>

/HTML