CODE - editcolor.js

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

/*
Color Picker JavaScript
webmaster@indigotide.com

Features:
HSL to RGB conversions
RGB to HSL conversions

DHTML!!! Color Bar Controls DHTML!!!

Notes:
By definition Saturation = 0 is Grey Scale
By definition Luminosity = 0 is always black
*/

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 )

// execute this when the form loads

function loadUserSetting()
{

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

showSelectedColor(); // initialize global RGB values

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

}

// BEGIN DYNAMIC HTML

function createControls()
{
var index=0;
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 = "";


for (index=0;index<=255;index++) // now loop to build 1,548 new html elements on the fly
{
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 HTML 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++) // and last add 256 fixed colors to each of 4 fixed controls
{
red = index * 65536; // get index values as decimal color value
grn = index * 256;
blu = index * 1;
hue = index / 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("redcontrol(" + index + ")").style.backgroundColor = red; // red color bar
document.getElementById("grncontrol(" + index + ")").style.backgroundColor = grn; // green color bar
document.getElementById("blucontrol(" + index + ")").style.backgroundColor = blu; // blue color bar
document.getElementById("huecontrol(" + index + ")").style.backgroundColor = hue; // hue color bar
}
}

// END DYNAMIC HTML

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

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

function setRGB(decimal)
{
reg_R = Math.floor( decimal / 65536 ); // get decimal color number & 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 in the window
}

function getHSLfromRGB() // computes HUE, SATURATION, and LUMINOSITY from RGB values
{
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 values
var grey = 0; // If reg_S = 0 must be Grey Scale
if(reg_S==0)
{
for (index=0;index<=255;index++)
{
grey = ( index * 65536 ) + ( index * 256 ) + index;
document.getElementById("lumcontrol(" + index + ")").style.backgroundColor = grey;
}
}
else
{
for (index=0;index<=255;index++)
{
lum = index / 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++)
{

sat = index / 255; // get normalized decimal number ( 0.0 to 1.0 )

if(sat == 0 )
{
satAdj = sat + 0.00001;
}
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 for preview window
}

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 for preview window
}

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 for preview window
}

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 for preview window
}

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 for preview window
}

function showLum(lum)
{

if( reg_S==0 )
{
picker.lumIndex.value = lum;
var decimal = (65536 * lum) + (256 * lum) + lum; // If Grey Scale
}
else
{
picker.lumIndex.value = lum; // If Not Grey Scale
lum /= 255;
var decimal = getRGBfromHSL( HUE,SATURATION,lum ); // get decimal RGB value from new HSL values
}

document.getElementById("preview").style.backgroundColor = decimal; // mouseover for preview window
}

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

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

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

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

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

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

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

function changeRed(red)
{
reg_R = red; // OnClick - 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; // OnClick - 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; // OnClick - 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; // OnClick - 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; // OnClick - 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; // OnClick - 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();
}


// 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">
<!--
BODY{
background-color : #000000;
font-family : Arial;
font-size : x-small;
}
INPUT{
padding-left : 5px;
font-family : Arial;
background-color : #000000;
color : #ffffff;
border-color : #000000;
font-weight : bolder;
}
TABLE{
font-family : Arial;
color : white;
background-color : #000000;
font-size : xx-small;
font-weight : bolder;
}
DIV{
font-family : Arial;
font-size : xx-small;
font-weight : bolder;
text-align : left;
padding : 4px;
}
}-->
</STYLE>
<SCRIPT language="JavaScript" src="editcolor.js"></SCRIPT>
</HEAD>
<BODY onload="loadUserSetting()">
<NOSCRIPT><FONT>Sorry, your browser does not support JavaScript,</FONT>
<FONT>your browser is blocking client-side scripting,</FONT>
<FONT>or JavaScript is disabled in your security settings!</FONT></NOSCRIPT>
<CENTER>
<FORM name="picker">
<TABLE>
<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;" 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="8" 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" style="color : white;background-color : #00000;">Dynamic RED Control Elements Go HERE - Requires Internet Explorer</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="grnWindow" style="color : white;background-color : #00000;">Dynamic GREEN Control Elements Go HERE - Requires Internet Explorer</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="bluWindow" style="color : white;background-color : #00000;">Dynamic BLUE Control Elements Go HERE - Requires Internet Explorer</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="hueWindow" style="color : white;background-color : #00000;">Dynamic HUE Control Elements Go HERE - Requires Internet Explorer</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="satWindow" style="color : white;background-color : #00000;">Dynamic SATURATION Control Elements Go HERE - Requires Internet Explorer</DIV>
</TD>
</TR>
<TR>
<TD colspan="8">
<DIV id="lumWindow" style="color : white;background-color : #00000;">Dynamic LUMINOSITY Control Elements Go HERE - Requires Internet Explorer</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>

/HTML