JavaScript Tutorial/Development/Color
Using zColor Library
<source lang="javascript">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
<head>
<title>zColor Example</title>
<script type="text/javascript">
/*------------------------------------------------------------------------------
* JavaScript zColor Library * Version 0.1 * by Nicholas C. Zakas, http://www.nczonline.net/ * Copyright (c) 2004-2005 Nicholas C. Zakas. All Rights Reserved. * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Lesser General Public License as published by * the Free Software Foundation; either version 2.1 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA *------------------------------------------------------------------------------ */
/**
* Represents an RGB color. * @class * @scope public * @constructor * @param iRed The red value for the color (0-255) * @param iGreen The green value for the color (0-255) * @param iBlue The blue value for the color (0-255) */
function zRGB(iRed, iGreen, iBlue) {
/**
* The red value for the color.
* @scope public
*/
this.r /*:int */ = parseInt(iRed,10);
/**
* The green value for the color.
* @scope public
*/
this.g /*:int */ = parseInt(iGreen,10);
/**
* The blue value for the color.
* @scope public
*/
this.b /*:int */= parseInt(iBlue,10);
} /**
* Creates an RGB color from a hex string. * @scope public * @param sHex The hex string. * @return The RGB object for the hex string. */
zRGB.fromHexString = function (sHex /*: String */) /*:zRGB */ {
//eliminate the pound sign
if (sHex.charAt(0) == "#") {
sHex = sHex.substring(1);
} //ENd: if (sHex.charAt(0) == "#")
//extract and convert the red, green, and blue values
var iRed = parseInt(sHex.substring(0,2),16);
var iGreen = parseInt(sHex.substring(2,4),16);
var iBlue = parseInt(sHex.substring(4,6),16);
//return an array
return new zRGB(iRed,iGreen,iBlue);
}; /**
* Returns a hex representation of the color. * @scope public * @return A hex representation of the color. */
zRGB.prototype.toHexString = function () /*:String */ {
//extract and convert the red, green, and blue values
var sRed = this.r.toString(16).toUpperCase();
var sGreen = this.g.toString(16).toUpperCase();
var sBlue = this.b.toString(16).toUpperCase();
//make sure there are two digits in each code
if (sRed.length == 1) {
sRed = "0" + sRed;
} //End: if (sRed.length == 1)
if (sGreen.length == 1) {
sGreen = "0" + sGreen;
} //End: if (sGreen.length == 1)
if (sBlue.length == 1) {
sBlue = "0" + sBlue;
} //End: if (sBlue.length == 1)
//return the hex code
return "#" + sRed + sGreen + sBlue;
}; /**
* Returns an HSL representation of the color. * @scope public * @return An HSL representation of the color. */
zRGB.prototype.toHSL = function () /*:zHSL */ {
var iMax = Math.max(this.r, this.g, this.b);
var iMin = Math.min(this.r, this.g, this.b);
var iDelta = iMax-iMin;
var iLum = Math.round((iMax+iMin)/2);
var iHue = 0;
var iSat = 0;
if (iDelta > 0) {
iSat = Math.ceil(((iLum < (0.5*255)) ? iDelta/(iMax + iMin) : iDelta/((2*255)-iMax-iMin))*255);
var iRedC = (iMax-this.r)/iDelta;
var iGreenC = (iMax-this.g)/iDelta;
var iBlueC = (iMax-this.b)/iDelta;
if (this.r == iMax) {
iHue = iBlueC - iGreenC;
} else if (this.g == iMax) {
iHue = 2.0 + iRedC - iBlueC;
} else {
iHue = 4.0 + iGreenC - iRedC;
}
iHue /= 6.0;
if (iHue < 0) {
iHue += 1.0;
}
iHue = Math.round(iHue * 255);
}
return new zHSL(iHue,iSat,iLum);
}; /**
* Returns the color in a string form. * @scope public * @return The color in a string form. */
zRGB.prototype.toString = function () /*:String */ {
return "rgb(" + this.r + "," + this.g + "," + this.b + ")";
}; /**
* Represents an HSL color. * @class * @scope public * @constructor * @param iHue The hue value for the color (0-255) * @param iSat The saturation value for the color (0-255) * @param iLum The luminosity value for the color (0-255) */
function zHSL(iHue, iSat, iLum) {
/**
* The hue value for the color.
* @scope public
*/
this.h /*:int */ = parseInt(iHue,10);
/**
* The saturation value for the color.
* @scope public
*/
this.s /*:int */ = parseInt(iSat,10);
/**
* The luminosity value for the color.
* @scope public
*/
this.l /*:int */= parseInt(iLum,10);
} /**
* Converts the color into RGB form. * @scope public * @return An RGB version of the color. */
zHSL.prototype.toRGB = function () /*:zRGB */ {
iHue = this.h/255;
iSat = this.s/255;
iLum = this.l/255;
var iRed, iGreen, iBlue;
if (iSat == 0) {
iRed = iGreen = iBlue = iLum;
} else {
var m1, m2;
if (iLum <= 0.5) {
m2 = iLum * (1+iSat);
} else {
m2 = iLum + iSat - (iLum * iSat);
}
m1 = 2.0 * iLum - m2;
hf2 = iHue + 1/3;
if (hf2 < 0) hf2 = hf2 + 1;
if (hf2 > 1) hf2 = hf2 - 1;
if (6 * hf2 < 1) {
iRed = (m1+(m2-m1)*hf2*6);
} else {
if (2 * hf2 < 1) {
iRed = m2;
} else {
if (3.0*hf2 < 2.0) {
iRed = (m1+(m2-m1)*((2.0/3.0)-hf2)*6.0);
} else {
iRed = m1;
}
}
}
//Calculate Green
if (iHue < 0) {iHue = iHue + 1.0;}
if (iHue > 1) {iHue = iHue - 1.0;}
if (6.0 * iHue < 1){
iGreen = (m1+(m2-m1)*iHue*6.0);}
else {
if (2.0 * iHue < 1){
iGreen = m2;
} else {
if (3.0*iHue < 2.0) {
iGreen = (m1+(m2-m1)*((2.0/3.0)-iHue)*6.0);
} else {
iGreen = m1;
}
}
}
//Calculate Blue
hf2=iHue-1.0/3.0;
if (hf2 < 0) {hf2 = hf2 + 1.0;}
if (hf2 > 1) {hf2 = hf2 - 1.0;}
if (6.0 * hf2 < 1) {
iBlue = (m1+(m2-m1)*hf2*6.0);
} else {
if (2.0 * hf2 < 1){
iBlue = m2;
} else {
if (3.0*hf2 < 2.0) {
iBlue = (m1+(m2-m1)*((2.0/3.0)-hf2)*6.0);
} else {
iBlue = m1;
}
}
}
}
return new zRGB(Math.round(iRed*255),Math.round(iGreen*255),Math.round(iBlue*255));
}; /**
* Returns the color in a string form. * @scope public * @return The color in a string form. */
zHSL.prototype.toString = function () /*:String */ {
return "hsl(" + this.h + "," + this.s + "," + this.l + ")";
};
</script>
<script type="text/javascript">
function convertToHSL() {
var iRed = parseInt(document.getElementById("txtRed").value);
var iBlue = parseInt(document.getElementById("txtBlue").value);
var iGreen = parseInt(document.getElementById("txtGreen").value);
var oRGB = new zRGB(iRed, iGreen, iBlue);
var oHSL = oRGB.toHSL();
document.getElementById("txtHue").value = oHSL.h;
document.getElementById("txtSat").value = oHSL.s;
document.getElementById("txtLum").value = oHSL.l;
}
function convertToRGB() {
var iHue = parseInt(document.getElementById("txtHue").value);
var iSat = parseInt(document.getElementById("txtSat").value);
var iLum = parseInt(document.getElementById("txtLum").value);
var oHSL = new zHSL(iHue, iSat, iLum);
var oRGB = oHSL.toRGB();
document.getElementById("txtRed").value = oRGB.r;
document.getElementById("txtGreen").value = oRGB.g;
document.getElementById("txtBlue").value = oRGB.b;
}
</script>
</head>
<body>
<form>
R: <input type="text" id="txtRed" /> |
H: <input type="text" id="txtHue" /> |
</form> </body>
</html></source>
