Fire JS Bin - ColorPicker

You can jump to the latest bin by adding /latest to your URL

Find

→ ←

⟲

Replace

⊗ All Replace

if(!window.ColorPicker_com)var ColorPicker_com={};if(!window.ColorPicker_com)var ColorPicker_com=new Object();var ColorPicker_com_funcs=new Object();var ColorPicker_com=new Object();var standardObjectsCreated=false;ColorPicker_com.eventEls=[];var depCache=new Object();ColorPicker_com.discardElement=function(element){element=ColorPicker_com.commonObj.getEl(element);var gBin=document.getElementById('IELeakGBin');if(!gBin){gBin=document.createElement('DIV');gBin.id='IELeakGBin';gBin.style.display='none';document.body.appendChild(gBin);};gBin.appendChild(element);gBin.innerHTML='';};ColorPicker_com.createStandardObjects=function(){ColorPicker_com.clientInfoObj=new ColorPicker_com.clientInfo();ColorPicker_com.clientInfoObj.init();if(!ColorPicker_com.configObj){ColorPicker_com.configObj=new ColorPicker_com.config();ColorPicker_com.configObj.init();};ColorPicker_com.commonObj=new ColorPicker_com.common();ColorPicker_com.variableStorage=new ColorPicker_com.globalVariableStorage();;ColorPicker_com.commonObj.init();ColorPicker_com.commonObj.addEvent(window,'unload',function(){ColorPicker_com.commonObj.__clearMemoryGarbage();});standardObjectsCreated=true;};ColorPicker_com.config=function(){var imagePath;var cssPath;var defaultCssPath;var defaultImagePath;};ColorPicker_com.config.prototype={init:function(){this.imagePath='http://www.colorpicker.com/images/';this.cssPath='http://www.colorpicker.com/css/';this.defaultCssPath=this.cssPath;this.defaultImagePath=this.imagePath;}};ColorPicker_com.globalVariableStorage=function(){var menuBar_highlightedItems;this.menuBar_highlightedItems=[];var arrayDSObjects;var arrayOfColorPicker_comObjects;this.arrayDSObjects=[];this.arrayOfColorPicker_comObjects=this.arrayDSObjects;var ajaxObjects;this.ajaxObjects=[];};ColorPicker_com.globalVariableStorage.prototype={};ColorPicker_com.common=function(){var loadedCSSFiles;var cssCacheStatus;var eventEls;var isOkToSelect;this.okToSelect=true;this.cssCacheStatus=true;this.eventEls=[];};ColorPicker_com.common.prototype={init:function(){this.loadedCSSFiles=[];},__setTextSelOk:function(okToSelect){this.okToSelect=okToSelect;},__isTextSelOk:function(){return this.okToSelect;},getLeftPos:function(el){if(document.getBoxObjectFor){if(el.tagName!='INPUT'&&el.tagName!='SELECT'&&el.tagName!='TEXTAREA')
return document.getBoxObjectFor(el).x}var ret=el.offsetLeft;while((el=el.offsetParent)!=null){if(el.tagName!='HTML'){ret+=el.offsetLeft;if(document.all)
ret+=el.clientLeft;}}return ret;},getTopPos:function(el){if(document.getBoxObjectFor){if(el.tagName!='INPUT'&&el.tagName!='SELECT'&&el.tagName!='TEXTAREA')
return document.getBoxObjectFor(el).y}var ret=el.offsetTop;while((el=el.offsetParent)!=null){if(el.tagName!='HTML'){ret+=(el.offsetTop-el.scrollTop);if(document.all)
ret+=el.clientTop;}}return ret;},cancelEvent:function(){return false;},addEvent:function(obj,type,fn,suffix){if(!suffix)
suffix='';if(obj.attachEvent){if(typeof ColorPicker_com_funcs[type+fn+suffix]!='function'){ColorPicker_com_funcs[type+fn+suffix]=function(){fn.apply(window.event.srcElement);};obj.attachEvent('on'+type,ColorPicker_com_funcs[type+fn+suffix]);}obj=null;}else{obj.addEventListener(type,fn,false);}
this.__addEventEl(obj);},removeEvent:function(obj,type,fn,suffix){if(obj.detachEvent){obj.detachEvent('on'+type,ColorPicker_com_funcs[type+fn+suffix]);ColorPicker_com_funcs[type+fn+suffix]=null;obj=null;}else{obj.removeEventListener(type,fn,false);}},__clearMemoryGarbage:function(){if(!ColorPicker_com.clientInfoObj.isMSIE)return;for(var no=0;no<ColorPicker_com.eventEls.length;no++){try{var el=ColorPicker_com.eventEls[no];el.onclick=null;el.onmousedown=null;el.onmousemove=null;el.onmouseout=null;el.onmouseover=null;el.onmouseup=null;el.onfocus=null;el.onblur=null;el.onkeydown=null;el.onkeypress=null;el.onkeyup=null;el.onselectstart=null;el.ondragstart=null;el.oncontextmenu=null;el.onscroll=null;el=null;}catch(e){}}for(var no in ColorPicker_com.variableStorage.arrayDSObjects){ColorPicker_com.variableStorage.arrayDSObjects[no]=null;}
window.onbeforeunload=null;window.onunload=null;ColorPicker_com=null;},__addEventEl:function(el){ColorPicker_com.eventEls[ColorPicker_com.eventEls.length]=el;},getUniqueId:function(){var no=Math.random()+'';no=no.replace('.','');var no2=Math.random()+'';no2=no2.replace('.','');return no+no2;},correctPng:function(el){el=ColorPicker_com.commonObj.getEl(el);var img=el;var width=img.width;var height=img.height;var html='<span style="display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+img.src+'\',sizingMethod=\'scale\');width:'+width+';height:'+height+'"></span>';img.outerHTML=html;}}
ColorPicker_com.clientInfo=function(){var browser;var isOpera;var isMSIE;var isOldMSIE;var isFirefox;var navigatorVersion;var isOldMSIE;}
ColorPicker_com.clientInfo.prototype={init:function(){this.browser=navigator.userAgent;this.isOpera=(this.browser.toLowerCase().indexOf('opera')>=0)?true:false;this.isFirefox=(this.browser.toLowerCase().indexOf('firefox')>=0)?true:false;this.isMSIE=(this.browser.toLowerCase().indexOf('msie')>=0)?true:false;this.isOldMSIE=(this.browser.toLowerCase().match(/msie\s[0-6]/gi))?true:false;this.isSafari=(this.browser.toLowerCase().indexOf('safari')>=0)?true:false;this.navigatorVersion=navigator.appVersion.replace(/.*?MSIE\s(\d\.\d).*/g,'$1')/1;this.isOldMSIE=(this.isMSIE&&this.navigatorVersion<7)?true:false;}}
ColorPicker_com.colorUtil=new Class({baseConverter:function(numberToConvert,oldBase,newBase){if(newBase==10){return parseInt(numberToConvert,16);}
if(newBase==16){return parseInt(numberToConvert).toString(16);}numberToConvert=numberToConvert+"";numberToConvert=numberToConvert.toUpperCase();var listOfCharacters="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";var dec=0;for(var i=0;i<=numberToConvert.length;i++){dec+=(listOfCharacters.indexOf(numberToConvert.charAt(i)))*(Math.pow(oldBase,(numberToConvert.length-i-1)));}
numberToConvert="";var magnitude=Math.floor((Math.log(dec))/(Math.log(newBase)));for(var i=magnitude;i>=0;i--){var amount=Math.floor(dec/Math.pow(newBase,i));numberToConvert=numberToConvert+listOfCharacters.charAt(amount);dec-=amount*(Math.pow(newBase,i));}
if(numberToConvert.length==0)numberToConvertToConvert=0;if(!numberToConvert)numberToConvert=0;return numberToConvert;},getHsvByRgbCode:function(rgbColor){rgbColor=rgbColor.replace('#','');red=this.baseConverter(rgbColor.substr(0,2),16,10);green=this.baseConverter(rgbColor.substr(2,2),16,10);blue=this.baseConverter(rgbColor.substr(4,2),16,10);if(red==0&&green==0&&blue==0){var returnArray={};returnArray.hue=0;returnArray.saturation=0;returnArray.brightness=0;return returnArray;}
red=red/255;green=green/255;blue=blue/255;maxValue=Math.max(red,green,blue);minValue=Math.min(red,green,blue);var hue=0;if(maxValue==minValue){hue=0;saturation=0;}else{if(red==maxValue){hue=(green-blue)/(maxValue-minValue)/1;}else
if(green==maxValue){hue=2+(blue-red)/1/(maxValue-minValue)/1;}else if(blue==maxValue){hue=4+(red-green)/(maxValue-minValue)/1;}
saturation=(maxValue-minValue)/maxValue;}hue=hue*60;valueBrightness=maxValue;if(hue<0)hue+=360;var returnArray={};returnArray.hue=hue;returnArray.saturation=saturation;returnArray.brightness=valueBrightness;return returnArray;},getContrastColorByRgb:function(rgbCode){var hsv=this.getHsvByRgbCode(rgbCode);hsv.hue+=180;if(hsv.hue>=360)
hsv.hue-=360;return this.getRgbCodeByHsv(hsv.hue,hsv.saturation,hsv.brightness);},getTriadeColorsByRgb:function(rgbCode){var hsv=this.getHsvByRgbCode(rgbCode);var colors=new Array();for(var no=120;no<360;no+=120){colors[colors.length]=this.getRgbCodeByHsv(hsv.hue+no,hsv.saturation,hsv.brightness)}
return colors;},getTetradeColorsByRgb:function(rgbCode){var hsv=this.getHsvByRgbCode(rgbCode);var colors=new Array();for(var no=90;no<360;no+=90){colors[colors.length]=this.getRgbCodeByHsv(hsv.hue+no,hsv.saturation,hsv.brightness)}
return colors;},getAnalogicColors:function(rgbCode,degrees){degrees=degrees+'';if(!degrees)degrees=25;if(!degrees.match(/^[0-9]{2}$/)){degrees=25;}if(degrees<15)degrees=15;if(degrees>30)degrees=30;degrees/=1;var hsv=this.getHsvByRgbCode(rgbCode);var colors=new Array();for(var no=1;no<=2;no++){colors[colors.length]=this.getRgbCodeByHsv(hsv.hue+(no*degrees),hsv.saturation,hsv.brightness)}
for(var no=-1;no>=-2;no--){colors[colors.length]=this.getRgbCodeByHsv(hsv.hue+(no*degrees),hsv.saturation,hsv.brightness)}
return colors;},getRgbCodeByRgbColors:function(red,green,blue){red=this.baseConverter(red,10,16);green=this.baseConverter(green,10,16);blue=this.baseConverter(blue,10,16);red=red+"";green=green+"";blue=blue+"";while(red.length<2){red="0"+red;}
while(green.length<2){green="0"+green;}while(blue.length<2){blue="0"+""+blue;}rgbColor=red+""+green+""+blue;return rgbColor.toUpperCase();},getRgbColorsByRgbCode:function(rgbCode){var retArray={};retArray.red=this.baseConverter(rgbCode.substr(0,2),16,10);retArray.green=this.baseConverter(rgbCode.substr(2,2),16,10);retArray.blue=this.baseConverter(rgbCode.substr(4,2),16,10);return retArray;},getRgbColorsByHsv:function(hue,saturation,valueBrightness){Hi=Math.floor(hue/60);if(hue==360)
hue=0;f=hue/60-Hi;if(saturation>1)saturation/=100;if(valueBrightness>1)valueBrightness/=100;p=(valueBrightness*(1-saturation));q=(valueBrightness*(1-(f*saturation)));t=(valueBrightness*(1-((1-f)*saturation)));switch(Hi){case 0:red=valueBrightness;green=t;blue=p;break;case 1:red=q;green=valueBrightness;blue=p;break;case 2:red=p;green=valueBrightness;blue=t;break;case 3:red=p;green=q;blue=valueBrightness;break;case 4:red=t;green=p;blue=valueBrightness;break;default:red=valueBrightness;green=p;blue=q;break;}
if(saturation==0){red=valueBrightness;green=valueBrightness;blue=valueBrightness;}red*=255;green*=255;blue*=255;red=Math.round(red);green=Math.round(green);blue=Math.round(blue);return{red:red,green:green,blue:blue}},getRgbCodeByHsv:function(hue,saturation,valueBrightness){while(hue>=360)
hue-=360;var colors=this.getRgbColorsByHsv(hue,saturation,valueBrightness);return this.getRgbCodeByRgbColors(colors.red,colors.green,colors.blue);}});ColorPicker_com.colorWidget=new Class({Extends:Events,displayRgb:true,displayHsv:true,displayRgbCode:true,updateFormDuringMoveOnPalette:true,posdivElPalette:{},circleOffsetBecauseOfWinWidget:0,circleOffsetSize:7,hueSliderPosition:'vertical',layoutCSS:'color-widget.css',currentHue:0,currentBrightness:100,currentSaturation:100,paletteSize:256,currentRgbCode:'FF0000',imagePath:'http://www.colorpicker.com/images/',maxCustomColors:10,customColorIndex:0,customColors:[],customColorsButtonText:'Add to\nMy Colors',customColorsClearButtonText:'Clear',customColorsBgColorOfEmptyBoxes:'#d8d8d8',customColorsCookieName:'colorwidget_custom_color_cookie_new',initialize:function(propertyArray){this.colorHelper=new ColorPicker_com.colorUtil();if(!standardObjectsCreated)
ColorPicker_com.createStandardObjects();this.objectIndex=ColorPicker_com.variableStorage.arrayDSObjects.length;ColorPicker_com.variableStorage.arrayDSObjects[this.objectIndex]=this;this.__setInitProps(propertyArray);},__setInitProps:function(propertyArray){if(!propertyArray)
return;if(propertyArray.hueSliderPosition)this.hueSliderPosition=propertyArray.hueSliderPosition;if(propertyArray.callbackOnChangeRgb)this.callbackOnChangeRgb=propertyArray.callbackOnChangeRgb;if(propertyArray.displayHsv||propertyArray.displayHsv===false)this.displayHsv=propertyArray.displayHsv;if(propertyArray.displayRgb||propertyArray.displayRgb===false)this.displayRgb=propertyArray.displayRgb;if(propertyArray.displayRgbCode||propertyArray.displayRgbCode===false)this.displayRgbCode=propertyArray.displayRgbCode;if(propertyArray.updateFormDuringMoveOnPalette||propertyArray.updateFormDuringMoveOnPalette===false)this.updateFormDuringMoveOnPalette=propertyArray.updateFormDuringMoveOnPalette;if(propertyArray.parentRef)
this.parentRef=$(propertyArray.parentRef);},setHueSliderPosition:function(hueSliderPosition){this.hueSliderPosition=hueSliderPosition;if(hueSliderPosition=='vertical'){this.sliderDivHorMain.style.display='none';this.sliderDivMain.style.display='block';var ind=this.objectIndex;setTimeout('ColorPicker_com.variableStorage.arrayDSObjects['+ind+'].sliderDiv.style.marginTop=(2 -Math.floor(ColorPicker_com.variableStorage.arrayDSObjects['+ind+'].sliderDiv.offsetHeight/2))+"px"',100);}
if(hueSliderPosition=='horizontal'){if(this.sliderDivMain){this.sliderDivHorMain.style.display='block';this.sliderDivMain.style.display='none';}}},setCallbackOnChangeRgb:function(functionName){this.callbackOnChangeRgb=functionName;},setRgbColor:function(rgbColor){var hsv=this.colorHelper.getHsvByRgbCode(rgbColor);this.currentHue=(hsv.hue);this.currentBrightness=(hsv.brightness*100);this.currentSaturation=(hsv.saturation*100);this.__changeViewAfterColorChange();},setHue:function(hue){hue=hue+'';if(hue.match(/^[0-9]+$/)){while(hue>=360)
hue-=360;this.currentHue=hue;this.__changeViewAfterColorChange();}},setSaturation:function(saturation){saturation=saturation+'';if(saturation.match(/^[0-9]+$/)){while(saturation>100)
saturation-=100;this.currentSaturation=saturation;this.__changeViewAfterColorChange();}},setBrightness:function(brightness){brightness=brightness+'';if(brightness.match(/^[0-9]+$/)){while(brightness>100)
brightness-=100;this.currentBrightness=brightness;this.__changeViewAfterColorChange();}},getDivElement:function(){return this.divElement;},init:function(){this.__createMainDivEl();this.__createdivElPalette();this.__createHueBar();this.__createFormDiv();this.__createHueBarHorizontal();this.__createCustomColorBar();this.__addEvents();this.__setPaletteBgColor();this.__updateHsvInForm();this.__setBgColorPreviewDiv();this.__updateRgbInForm();},__removeHighlightFromCustomColorBoxes:function(){var colorBoxes=$$('.customColorBox');for(var i=0;i<colorBoxes.length;i++){colorBoxes[i].removeClass('activeCustomColorBox')}},__clearCustomColors:function(){this.customColorIndex=0;this.customColors=[];var els=$$('.customColorBox');for(var i=0;i<els.length;i++){els[i].setStyle('background-color',this.customColorsBgColorOfEmptyBoxes);els[i].removeClass('activeCustomColorBox');}this.__setCustomColorCookie();},__addCustomColor:function(){if(this.customColorIndex==this.maxCustomColors){this.customColorIndex=0;}
var color=this.getColor();this.customColors[this.customColorIndex]=color.rgb;this.__colorizeCustomColorBox(color.rgb);this.customColorIndex++;this.__setCustomColorCookie();},__colorizeCustomColorBox:function(rgb,colorBox){if(!colorBox){var colorBox=$('customColorBox'+this.customColorIndex);}
colorBox.setStyle('background-color',rgb);colorBox.setProperty('rgb',rgb);colorBox.setStyle('cursor','pointer');},__setCustomColorCookie:function(){Cookie.write(this.customColorsCookieName,this.customColors.join(';'),{duration:900});},__getCustomColorBoxesFromCookie:function(){var colorString=Cookie.read(this.customColorsCookieName);if(colorString){return colorString.split(/;/g);}else{return[];}},__getClearColors:function(){return[];},getColor:function(){return{hue:this.currentHue,brightness:this.currentBrightness,saturation:this.currentSaturation,rgb:'#'+this.currentRgbCode}},__customColorBoxClick:function(e){if(e.target.getProperty('rgb')){var rgb=e.target.getProperty('rgb');this.fireEvent('selectcustomcolor',e.target.getProperty('rgb'));this.setRgbColor(rgb);}
this.__removeHighlightFromCustomColorBoxes();$(e.target).addClass('activeCustomColorBox');this.customColorIndex=e.target.getProperty('index');},__createCustomColorBoxes:function(){var div=new Element('DIV');div.addClass('customColorBoxContainer');this.customColorDiv.adopt(div);this.customColors=this.__getCustomColorBoxesFromCookie();for(var i=0;i<this.maxCustomColors;i++){var colorDiv=new Element('DIV');colorDiv.id='customColorBox'+i;colorDiv.addClass('customColorBox');colorDiv.setProperty('index',i);colorDiv.addEvent('click',this.__customColorBoxClick.bind(this));colorDiv.setStyle('background-color',this.customColorsBgColorOfEmptyBoxes);this.customColorDiv.adopt(colorDiv);if(this.customColors[i]){this.__colorizeCustomColorBox(this.customColors[i],colorDiv);this.customColorIndex++;}}
var clearButton=new Element('IMG');clearButton.addClass('customColorButtonClear');clearButton.src=this.imagePath+'color-codes/clr2.png';clearButton.set('value',this.customColorsClearButtonText);this.customColorDiv.adopt(clearButton);clearButton.addEvent('click',this.__clearCustomColors.bind(this));},__createCustomColorBar:function(){var ind=this.objectIndex;this.customColorDiv=new Element('DIV');this.customColorDiv.addClass('customColorBoxContainer');this.divElement.appendChild(this.customColorDiv);var button=new Element('input');button.type='button';button.set('value',this.customColorsButtonText);button.addClass('customColorButton');button.addEvent('click',this.__addCustomColor.bind(this));this.customColorDiv.adopt(button);this.__createCustomColorBoxes();},__changeViewAfterColorChange:function(){this.__setCurrentRgbCode();this.__setPaletteBgColor();this.__setBgColorPreviewDiv();this.__setSliderPos();this.__updateRgbInForm();this.__updateHsvInForm();this.__setSmallCirclePosition();},__updateHsvInForm:function(){if(!this.displayHsv){return;}
this.fieldHue.value=Math.round(this.currentHue);this.fieldSaturation.value=Math.round(this.currentSaturation);this.fieldBrightness.value=Math.round(this.currentBrightness);},__updateRgbInForm:function(){var rgbColors=this.colorHelper.getRgbColorsByRgbCode(this.currentRgbCode);if(this.displayRgb){this.fieldBlue.value=rgbColors.blue;this.fieldRed.value=rgbColors.red;this.fieldGreen.value=rgbColors.green;}
if(this.displayRgbCode){this.fieldRgbCode.value=this.currentRgbCode;}this.fireEvent('changergb',this.getColor());},__setSliderPos:function(){var topPos=Math.round(this.paletteSize-((this.currentHue/360)*this.paletteSize))-3;this.sliderDiv.style.top=topPos;this.sliderDivHor.style.left=(this.currentHue-4)+'px';},__setBgColorPreviewDiv:function(){this.divElPreviewDiv.style.backgroundColor='#'+this.currentRgbCode;this.fieldRgbCode.style.color='#'+this.currentRgbCode;},__setPaletteBgColor:function(){try{this.divElPalette.style.backgroundColor='#'+this.colorHelper.getRgbCodeByHsv(this.currentHue,1,1);}
catch(e){}},__createFormDiv:function(){var ind=this.objectIndex;this.divElForm=new Element('DIV');this.divElForm.addClass('ColorPicker_com_colorSliderFormDiv');this.divElement.adopt(this.divElForm);this.divElPreviewDiv=new Element('DIV');this.divElPreviewDiv.addClass('ColorPicker_com_colorSlider_colorPreview');this.divElPreviewDiv.style.position='absolute';this.divElPreviewDiv.style.left='273px';this.divElPreviewDiv.style.top='10px';this.divElForm.adopt(this.divElPreviewDiv);var table=new Element('TABLE');table.cellpadding=0;table.cellspacing=0;table.addClass('ColorPicker_com_colorSliderFormTable');var form=new Element('FORM');table.appendChild(form);this.divElForm.appendChild(table);if(this.displayHsv){var row=table.insertRow(-1);var cell=row.insertCell(-1);cell.innerHTML='H:';cell.style.position='absolute';cell.style.left='335px';cell.style.top='69px';var cell=row.insertCell(-1);this.fieldHue=new Element('INPUT');this.fieldHue.type='text';this.fieldHue.maxLength=3;this.fieldHue.addEvent('change',this.__receiveHueFromForm.bind(this));this.fieldHue.style.position='absolute';this.fieldHue.style.left='352px';this.fieldHue.style.top='69px';ColorPicker_com.commonObj.__addEventEl(this.fieldHue);cell.appendChild(this.fieldHue);var row=table.insertRow(-1);var cell=row.insertCell(-1);cell.innerHTML='S:';cell.style.position='absolute';cell.style.left='335px';cell.style.top='95px';var cell=row.insertCell(-1);this.fieldSaturation=new Element('INPUT');this.fieldSaturation.type='text';this.fieldSaturation.maxLength=3;this.fieldSaturation.addEvent('change',this.__receiveSatFromForm.bind(this));this.fieldSaturation.style.position='absolute';this.fieldSaturation.style.left='352px';this.fieldSaturation.style.top='95px';ColorPicker_com.commonObj.__addEventEl(this.fieldSaturation);cell.appendChild(this.fieldSaturation);var row=table.insertRow(-1);var cell=row.insertCell(-1);cell.innerHTML='B:';cell.style.position='absolute';cell.style.left='335px';cell.style.top='121px';var cell=row.insertCell(-1);this.fieldBrightness=new Element('INPUT');this.fieldBrightness.type='text';this.fieldBrightness.addEvent('change',this.__receiveBriFromForm.bind(this));this.fieldBrightness.style.position='absolute';this.fieldBrightness.style.left='352px';this.fieldBrightness.style.top='121px';ColorPicker_com.commonObj.__addEventEl(this.fieldBrightness);this.fieldBrightness.maxLength=3;cell.appendChild(this.fieldBrightness);}
if(this.displayRgb){var row=table.insertRow(-1);var cell=row.insertCell(-1);cell.innerHTML='R:';cell.style.position='absolute';cell.style.left='335px';cell.style.top='147px';var cell=row.insertCell(-1);this.fieldRed=new Element('INPUT');this.fieldRed.type='text';this.fieldRed.addEvent('change',this.__setRedColorFromForm.bind(this));this.fieldRed.style.position='absolute';this.fieldRed.style.left='352px';this.fieldRed.style.top='147px';ColorPicker_com.commonObj.__addEventEl(this.fieldRed);this.fieldRed.maxLength=3;cell.appendChild(this.fieldRed);var row=table.insertRow(-1);var cell=row.insertCell(-1);cell.innerHTML='G:';cell.style.position='absolute';cell.style.left='335px';cell.style.top='173px';var cell=row.insertCell(-1);this.fieldGreen=new Element('INPUT');this.fieldGreen.type='text';this.fieldGreen.addEvent('change',this.__setGreenColorFromForm.bind(this));this.fieldGreen.style.position='absolute';this.fieldGreen.style.left='352px';this.fieldGreen.style.top='173px';ColorPicker_com.commonObj.__addEventEl(this.fieldGreen);this.fieldGreen.maxLength=3;cell.appendChild(this.fieldGreen);var row=table.insertRow(-1);var cell=row.insertCell(-1);cell.innerHTML='B:';cell.style.position='absolute';cell.style.left='336px';cell.style.top='199px';var cell=row.insertCell(-1);this.fieldBlue=new Element('INPUT');this.fieldBlue.type='text';this.fieldBlue.addEvent('change',this.__setBlueColorFromForm.bind(this));this.fieldBlue.style.position='absolute';this.fieldBlue.style.left='352px';this.fieldBlue.style.top='199px';ColorPicker_com.commonObj.__addEventEl(this.fieldBlue);this.fieldBlue.maxLength=3;cell.appendChild(this.fieldBlue);}if(this.displayRgbCode){var row=table.insertRow(-1);var cell=row.insertCell(-1);cell.innerHTML='#';cell.style.position='absolute';cell.style.top='-19px';cell.style.left='99px';var cell=row.insertCell(-1);this.fieldRgbCode=new Element('INPUT');this.fieldRgbCode.type='text';this.fieldRgbCode.maxLength=6;this.fieldRgbCode.style.position='absolute';this.fieldRgbCode.style.top='-21px';this.fieldRgbCode.style.left='111px';this.fieldRgbCode.addClass('ColorPicker_com_colorSlider_rgbCode');this.fieldRgbCode.addEvent('change',this.__receiveRgbCodeFromForm.bind(this));ColorPicker_com.commonObj.__addEventEl(this.fieldRgbCode);cell.appendChild(this.fieldRgbCode);}},__createMainDivEl:function(){this.divElement=new Element('DIV');this.divElement.addClass('ColorPicker_com_colorSlider');if(this.parentRef)
$(this.parentRef).adopt(this.divElement);},__correctPng:function(id){try{var img=$(id);var html='<span style="display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+img.src+'\',sizingMethod=\'scale\');width:'+this.paletteSize+';height:'+this.paletteSize+'"></span>';img.outerHTML=html;}catch(e){var ind=this.objectIndex;setTimeout('ColorPicker_com.variableStorage.arrayDSObjects['+ind+'].__correctPng("'+id+'")',20);}},__createdivElPalette:function(){var ind=this.objectIndex;var div=new Element('DIV');div.addClass('ColorPicker_com_colorSlider_palette_border');div.setStyle('position','relative');this.divElement.appendChild(div);this.divElPaletteBorder=div;this.divElPalette=new Element('DIV');this.divElPalette.addClass('ColorPicker_com_colorSlider_palette');this.divElPalette.setStyle('position','relative');ColorPicker_com.commonObj.__addEventEl(this.divElPalette);var img=new Element('IMG');img.src=this.imagePath+'color-codes/bgGradient.png';img.setAttribute('width',this.paletteSize);img.setAttribute('height',this.paletteSize);img.ondragstart=function(){return false;};img.onselectstart=function(){return false;};img.onmousedown=function(){return false;};img.id=''+ColorPicker_com.commonObj.getUniqueId();this.divElPalette.appendChild(img);ColorPicker_com.commonObj.__addEventEl(img);if((ColorPicker_com.clientInfoObj.isMSIE&&ColorPicker_com.clientInfoObj.navigatorVersion<7)||ColorPicker_com.clientInfoObj.isOpera){this.__correctPng(img.id);}
div.appendChild(this.divElPalette);this.divElPaletteCircle=new Element('DIV');this.divElPaletteCircle.addClass('ColorPicker_com_colorSlider_palette_circle');this.divElPalette.adopt(this.divElPaletteCircle);this.divElPaletteCircle.display='block';this.divElPaletteCircle.style.top='-'+this.circleOffsetSize+'px';this.divElPaletteCircle.style.left=(this.paletteSize-this.circleOffsetSize)+'px';},__setSmallCirclePosition:function(){var leftPos=Math.round(this.currentSaturation*(this.paletteSize/100))-this.circleOffsetSize;var topPos=this.paletteSize-Math.round(this.currentBrightness*(this.paletteSize/100))-this.circleOffsetSize;this.divElPaletteCircle.style.left=leftPos+'px';this.divElPaletteCircle.style.top=topPos+'px';this.divElPaletteCircle.className=this.divElPaletteCircle.className.replace(' ColorPicker_com_colorSlider_palette_circleBlack','');if(this.currentBrightness>80){this.divElPaletteCircle.className=this.divElPaletteCircle.className+' ColorPicker_com_colorSlider_palette_circleBlack';}},__createHueBar:function(){var ind=this.objectIndex;var mainDiv=new Element('DIV');mainDiv.className='ColorPicker_com_colorSlider_hue';this.sliderDivMain=mainDiv;this.divElement.appendChild(mainDiv);this.sliderDiv=new Element('DIV');this.sliderDiv.addClass('ColorPicker_com_colorSlider_sliderHandle');mainDiv.appendChild(this.sliderDiv);this.sliderDiv.innerHTML='<div><span></span></div>';setTimeout('ColorPicker_com.variableStorage.arrayDSObjects['+ind+'].sliderDiv.style.marginTop=(2 -Math.floor(ColorPicker_com.variableStorage.arrayDSObjects['+ind+'].sliderDiv.offsetHeight/2))+"px"',100);var div=new Element('DIV');div.addClass('ColorPicker_com_colorSlider_hueBar_border');mainDiv.appendChild(div);this.divElHueBar=new Element('DIV');this.divElHueBar.addClass('ColorPicker_com_colorSlider_hueBar');div.appendChild(this.divElHueBar);if(this.hueSliderPosition=='horizontal')
mainDiv.style.display='none';},__createHueBarHorizontal:function(){var ind=this.objectIndex;this.sliderDivHorMain=new Element('DIV');this.sliderDivHorMain.addClass('ColorPicker_com_colorSlider_hueHorizontal');this.divElement.appendChild(this.sliderDivHorMain);this.sliderDivHor=new Element('DIV');this.sliderDivHor.addClass('ColorPicker_com_colorSlider_sliderHandleHorizontal');this.sliderDivHorMain.appendChild(this.sliderDivHor);this.sliderDivHor.innerHTML='<div><span></span></div>';setTimeout('ColorPicker_com.variableStorage.arrayDSObjects['+ind+'].sliderDiv.style.marginTop=(2 -Math.floor(ColorPicker_com.variableStorage.arrayDSObjects['+ind+'].sliderDiv.offsetHeight/2))+"px"',100);var div=new Element('DIV');div.className='ColorPicker_com_colorSlider_hueBarHorizontal_border';this.sliderDivHorMain.appendChild(div);this.divElHueBarHorizontal=new Element('DIV');this.divElHueBarHorizontal.addClass('ColorPicker_com_colorSlider_hueBarHorizontal');div.appendChild(this.divElHueBarHorizontal);if(this.hueSliderPosition=='vertical')
this.sliderDivHorMain.style.display='none';},__setHueFromHorizontalSlider:function(e){if(document.all)
e=event;var hue=this.sliderDivHor.offsetLeft+4;if(hue>359||hue<0)hue=0;this.currentHue=hue;this.__setPaletteBgColor();this.__setBgColorPreviewDiv();this.__updateRgbInForm();this.__updateHsvInForm();},__setHueFromSlider:function(e){if(document.all)
e=event;var hue=360-Math.round((this.sliderDiv.offsetTop+4)*(360/this.paletteSize))
if(hue>359||hue<0)hue=0;this.currentHue=hue;this.__setPaletteBgColor();this.__setBgColorPreviewDiv();this.__updateHsvInForm();this.__updateRgbInForm();},__addEvents:function(){var ind=this.objectIndex;ColorPicker_com.commonObj.addEvent(this.sliderDivHorMain,'mousedown',function(e){return ColorPicker_com.variableStorage.arrayDSObjects[ind].__initHorHueMove(e);});ColorPicker_com.commonObj.addEvent(this.sliderDivMain,'mousedown',function(e){return ColorPicker_com.variableStorage.arrayDSObjects[ind].__initHueMove(e);});ColorPicker_com.commonObj.addEvent(this.divElPalette,'mousedown',function(e){return ColorPicker_com.variableStorage.arrayDSObjects[ind].__initPaletteMove(e);});ColorPicker_com.commonObj.addEvent(document.documentElement,'mousemove',function(e){ColorPicker_com.variableStorage.arrayDSObjects[ind].__moveOnPalette(e);});ColorPicker_com.commonObj.addEvent(document.documentElement,'mousemove',function(e){ColorPicker_com.variableStorage.arrayDSObjects[ind].__moveOnHorizHueBar(e);});ColorPicker_com.commonObj.addEvent(document.documentElement,'mousemove',function(e){ColorPicker_com.variableStorage.arrayDSObjects[ind].__moveOnHueBar(e);});ColorPicker_com.commonObj.addEvent(document.documentElement,'mouseup',function(e){ColorPicker_com.variableStorage.arrayDSObjects[ind].__endDrag(e);});ColorPicker_com.commonObj.addEvent(this.divElHueBar,'mousedown',function(e){ColorPicker_com.variableStorage.arrayDSObjects[ind].__moveOnHueBar(e);});if(!document.documentElement.onselectstart){document.documentElement.onselectstart=function(){return ColorPicker_com.commonObj.__isTextSelOk();};ColorPicker_com.commonObj.__addEventEl(document.documentElement);}},__moveOnHueBar:function(e){if(this.hueStatus!=1)
return;if(document.all)e=event;var topPos=this.poxYHue;var diff=e.clientY+document.documentElement.scrollTop-topPos;if(diff>this.paletteSize)diff=this.paletteSize;if(diff<0)diff=0;this.sliderDiv.style.top=diff+'px';var hue=Math.round(((this.paletteSize-diff)*(360/this.paletteSize)));if(hue==360)
hue=0;this.currentHue=hue;this.__setCurrentRgbCode();this.__setPaletteBgColor();this.__setBgColorPreviewDiv();this.__updateHsvInForm();this.__updateRgbInForm();},__moveOnHorizHueBar:function(e){if(this.hueHorStatus!=1)
return;if(document.all)e=event;var leftPos=this.posXHorHue;var diff=e.clientX-leftPos-this.circleOffsetBecauseOfWinWidget;if(diff<0)
diff=0;if(diff>362)diff=362;this.sliderDivHor.style.left=(diff-4)+'px';var hue=diff;if(hue>=360)
hue=0;this.currentHue=hue;this.__setCurrentRgbCode();this.__setPaletteBgColor();this.__setBgColorPreviewDiv();this.__updateHsvInForm();this.__updateRgbInForm();},__setHueFromRgbColorsInForm:function(){var color=this.colorHelper.getRgbCodeByRgbColors(this.fieldRed.value,this.fieldGreen.value,this.fieldBlue.value);var hsv=this.colorHelper.getHsvByRgbCode(color);this.currentHue=hsv.hue;this.currentSaturation=hsv.saturation*100;this.currentBrightness=hsv.brightness*100;this.__changeViewAfterColorChange();},__setRedColorFromForm:function(e){var src=e.target;var red=src.value;if(red.match(/^[0-9]+$/)){if(red/1>255)
red=255;}else{red=0;}src.value=red;this.__setHueFromRgbColorsInForm();this.__changeViewAfterColorChange();},__setGreenColorFromForm:function(e){var src=e.target;var green=src.value;var green=src.value;if(green.match(/^[0-9]+$/)){if(green/1>255)
green=255;}else{green=0;}src.value=green;this.__setHueFromRgbColorsInForm();this.__changeViewAfterColorChange();},__setBlueColorFromForm:function(e){var src=e.target;var blue=src.value;var blue=src.value;if(blue.match(/^[0-9]+$/)){if(blue/1>255)
blue=255;}else{blue=0;}src.value=blue;this.__setHueFromRgbColorsInForm();},__receiveRgbCodeFromForm:function(e){var src=e.target;var rgbCode=src.value;if(!rgbCode.match(/^[0-9A-F][0-9A-F][0-9A-F][0-9A-F][0-9A-F][0-9A-F]$/i)){rgbCode='FF0000';}
var hsv=this.colorHelper.getHsvByRgbCode(rgbCode);this.currentHue=hsv.hue;this.currentSaturation=hsv.saturation*100;this.currentBrightness=hsv.brightness*100;this.__changeViewAfterColorChange();},__receiveHueFromForm:function(e){var src=e.target;var hue=src.value;hue=hue+'';if(hue.match(/^[0-9]+$/)){if(hue/1>360)
hue=360;}else{hue=0;}if(hue==360)hue=0;this.currentHue=hue;src.value=hue;this.__changeViewAfterColorChange();},__receiveBriFromForm:function(e){var src=e.target;var brightness=src.value;brightness=brightness+'';if(brightness.match(/^[0-9]+$/)){if(brightness/1>100)
brightness=100;}else{brightness=0;}this.currentBrightness=brightness;src.value=brightness;this.__changeViewAfterColorChange();},__receiveSatFromForm:function(e){var src=e.target;var saturation=src.value;saturation=saturation+'';if(saturation.match(/^[0-9]+$/)){if(saturation/1>100)saturation=100;}else{saturation=0;}this.currentSaturation=saturation;src.value=saturation;this.__changeViewAfterColorChange();},__ffHackWinWidget:function(){if(this.divElement.parentNode.className&&this.divElement.parentNode.className.indexOf('windowContent')>=0&&!document.all){this.circleOffsetBecauseOfWinWidget=0;}},__initHorHueMove:function(e){this.hueHorStatus=1;this.__ffHackWinWidget();this.posXHorHue=ColorPicker_com.commonObj.getLeftPos(this.divElHueBarHorizontal);ColorPicker_com.commonObj.__setTextSelOk(false);this.__moveOnHorizHueBar(e);return false;},__initHueMove:function(e){this.hueStatus=1;this.poxYHue=ColorPicker_com.commonObj.getTopPos(this.divElHueBar);ColorPicker_com.commonObj.__setTextSelOk(false);this.__moveOnHueBar(e);return false;},__initPaletteMove:function(e){if(document.all)
e=event;this.__ffHackWinWidget();this.posdivElPalette.x=ColorPicker_com.commonObj.getLeftPos(this.divElPalette)+this.circleOffsetBecauseOfWinWidget;this.posdivElPalette.y=ColorPicker_com.commonObj.getTopPos(this.divElPalette)+this.circleOffsetBecauseOfWinWidget;this.dragStatus=1;this.paletteMaxX=(this.divElPalette.clientWidth-this.circleOffsetSize);this.paletteMaxY=(this.divElPalette.clientHeight-this.circleOffsetSize);this.__moveOnPalette(e);ColorPicker_com.commonObj.__setTextSelOk(false);return false;},__setCurrentRgbCode:function(){this.currentRgbCode=this.colorHelper.getRgbCodeByHsv(this.currentHue,this.currentSaturation/100,this.currentBrightness/100);},__endDrag:function(){if(this.dragStatus==1){this.__updateHsvInForm();this.__updateRgbInForm();}
this.dragStatus=0;this.hueHorStatus=0;this.hueStatus=0;ColorPicker_com.commonObj.__setTextSelOk(true);},__moveOnPalette:function(e){if(this.dragStatus!=1)
return;if(this.clickOnPaletteInProgress)return;this.clickOnPaletteInProgress=true;if(document.all)
e=event;var leftEl=this.posdivElPalette.x;var topEl=this.posdivElPalette.y;var left=e.clientX+document.documentElement.scrollLeft-leftEl-this.circleOffsetSize;var top=e.clientY+document.documentElement.scrollTop-topEl-this.circleOffsetSize;if(left<this.circleOffsetSize*-1)
left=this.circleOffsetSize*-1;if(top<this.circleOffsetSize*-1)top=this.circleOffsetSize*-1;if(left>this.paletteMaxX)left=this.paletteMaxX;if(top>this.paletteMaxY)
top=this.paletteMaxY;this.divElPaletteCircle.style.left=left+'px';this.divElPaletteCircle.style.top=top+'px';this.currentSaturation=Math.round(((left+this.circleOffsetSize)/this.paletteSize)*100);this.currentBrightness=100-Math.round(((top+this.circleOffsetSize)/this.paletteSize)*100);this.__setCurrentRgbCode();this.__setBgColorPreviewDiv();if(this.updateFormDuringMoveOnPalette){this.__updateHsvInForm();this.__updateRgbInForm();}
this.clickOnPaletteInProgress=false;}});var colorUtil=new ColorPicker_com.colorUtil();var currentFunc='';var colorBoxes=[];var numberOfColorBoxes=4;function clearColorBoxes(){$('colorBoxes').innerHTML='';}function createDefaultColorBoxes(){for(var i=0;i<numberOfColorBoxes;i++){colorBoxes[i]=new Element('DIV');$('colorBoxes').adopt(colorBoxes[i]);colorBoxes[i].setStyle('visibility','hidden');}}function enableColorBoxes(numberOfBoxes){for(var i=0;i<numberOfBoxes;i++){colorBoxes[i].setStyle('visibility','visible');}for(var i=numberOfBoxes;i<numberOfColorBoxes;i++){colorBoxes[i].setStyle('visibility','hidden');}}function showColorsInColorBoxes(colors){for(var i=0;i<colors.length;i++){colorBoxes[i].setStyle('background-color','#'+colors[i]);colorBoxes[i].innerHTML='#'+colors[i];}}function addColorBoxes(colors){for(var no=0;no<colors.length;no++){div=document.createElement('DIV');div.style.backgroundColor='#'+colors[no];$('colorBoxes').appendChild(div);div.innerHTML='#'+colors[no];}}function getTriadeColors(){var colors=colorUtil.getTriadeColorsByRgb(currentPreviewColor);if(currentFunc!='getTriadeColors()'){enableColorBoxes(2);}showColorsInColorBoxes(colors);currentFunc='getTriadeColors()'}function getTetradeColors(){var colors=colorUtil.getTetradeColorsByRgb(currentPreviewColor);if(currentFunc!='getTetradeColors()'){enableColorBoxes(3);}showColorsInColorBoxes(colors);currentFunc='getTetradeColors()'}function getAnalogicColors(){var colors=colorUtil.getAnalogicColors(currentPreviewColor,30);if(currentFunc!='getAnalogicColors()'){enableColorBoxes(4);}showColorsInColorBoxes(colors);currentFunc='getAnalogicColors()'}function getComplementary(){var colors=[colorUtil.getContrastColorByRgb(currentPreviewColor)];if(currentFunc!='getComplementary()'){enableColorBoxes(1);}showColorsInColorBoxes(colors);currentFunc='getComplementary()'}function noColors(){enableColorBoxes(0);currentFunc='noColors()';}function deleteWindow(obj){obj.purge();}function setColorFromPallette(color){colorWidget.setRgbColor(color.rgb);setColor(color);}function setColor(color){color=color.rgb?color.rgb:color;var obj=document.getElementById('colorDiv');obj.style.backgroundColor=color;currentPreviewColor=color;if(currentFunc)eval(currentFunc);if(color.name)obj.innerHTML=color.name;else obj.innerHTML=color;}var currentPreviewColor;var colorWidget;window.addEvent('domready',function(){colorWidget=new ColorPicker_com.colorWidget({hueSliderPosition:'vertical',parentRef:$('colorWidgetDiv')});colorWidget.addEvent('changergb',setColor);colorWidget.addEvent('selectcustomcolor',setColor);colorWidget.init();colorWidget.setRgbColor('#E01B6A');createDefaultColorBoxes();});window.addEvent('domready', function() {
Element.implement({show: function() {this.setStyle('display','');},hide: function() {this.setStyle('display','none');}});$$('input[type=text]').addEvents({ 'focus': function() { this.select(); } });$$('input[type=text]').addEvents({ 'mouseup': function(event) { event.preventDefault(); } });$$('input[type=textarea]').addEvents({ 'focus': function() { this.select(); } });$$('input[type=textarea]').addEvents({ 'mouseup': function(event) { event.preventDefault(); } });});

<!DOCTYPE html>
<html>
<head>
  <title>ColorPicker - Quick Online Color Picker Tool | HTML Color Codes</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  <meta name="keywords" content="color picker, html color codes, colour picker, colorpicker, html color, color codes, colour codes, color chart, colour chart, color wheel, hex color, color code, color codes, couleur, farbe, اللون, 颜色, 顏色, colores html, le code couleur, farb code, html farbe, html kodlari, colore, カラーコード, цвет, layout, background, color palette, editor, color schemes, web colors, hex codes, html color code, paint colors, font color, web design, blog tools">
  <meta name="description" content="ColorPicker.com - Quick Online Color Picker Tool | HTML Color Codes - Colour Codes - Hex Colour - Color Chart - Color Schemes - Colores Codigo - Code de Couleur - Farbcodes - Renk Kodlari - カラーコード - اللون - 颜色 - 顏色 - цвет - Farbe">
  <link rel="shortcut icon" href="http://www.colorpicker.com/favicon.ico" TYPE="image/x-icon">
  <link rel="stylesheet" href="css/colorpicker.com.css" type="text/css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
</head>
<body>
  <div style="position:absolute;top:0px;left:5px;width:430px">
    <div id="colorDiv" style=display:none;>Color Picker - HTML Color Codes - Color Chart - Color Schemes</div>
    <div id="colorBoxes"></div>
  </div>
 
  <center>
    <div id="colorWidgetDiv" style="position:relative;padding-left:100px;width:450px;height:340px;margin-top:70px;"></div>
    
    <div style="position:relative;width:450px;left:-8px;">
      <font style=font-size:6pt>Generate Color Schemes:
        <a href="javascript:;" onclick="getComplementary();$('colorDiv').show();return false">Complementary</a>
        <a href="javascript:;" onclick="getTriadeColors();$('colorDiv').show();return false">Triade</a>
        <a href="javascript:;" onclick="getTetradeColors();$('colorDiv').show();return false">Tetrade</a>
        <a href="javascript:;" onclick="getAnalogicColors();$('colorDiv').show();return false">Analogic</a>
        <a href="javascript:;" onclick="noColors();$('colorDiv').hide();return false">None</a>
      </font>
    </div>
  </center>

</body>
</html>

body{
background:#dedede;
margin:0px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
}
a{
color:red;
text-decoration:underline;
}
h1{font: 8pt arial; margin:1px;color:#999999;text-decoration:none;font-weight:none;display:inline;}
#colorDiv{
width:55px;
height:55px;
margin-left:15px;
margin-top:110px;
border:1px solid #000;
float:left;
font-weight:bold;
text-align:center;
font-size:7pt;
font-family:verdana;
}
.customColorButton{
position:absolute;
font-size:7pt;
font-family:arial;
width:70px;
height:40px;
float:left;
top:-52px;
left:312px;
margin-top:10px;
background-color:#dedede;
}
.customColorButtonClear{
position:absolute;
margin-left:1px;
margin-top:24px;
cursor:pointer;
}
.customColorBox{
margin-top:20px;
width:19px;
height:19px;
border:1px solid #eee;
background:#d8d8d8;
margin-right:5px;
float:left;
cursor:pointer;
}
.activeCustomColorBox{
border:1px solid #000;
}
.customColorBoxContainer{
z-index:1000000;
position:absolute;
left:15px;
top:270px;
float:left;
}
#colorBoxes{
width:390px;
height:106px;
margin:5px;
position:absolute;
top:180px;
left:10px;
}
#colorBoxes div{
width:55px;
height:55px;
margin-right:10px;
margin-top:10px;
border:1px solid #000;
float:left;
font-weight:bold;
text-align:center;
font-size:7pt;
font-family:verdana;
}
#colorBoxed div{
style=position:relative;top:60px;left:0px;border:0px;padding:0px;text-align:center;font-size:7pt;
}
#action{
margin-left:0px;
}
.indexs {
font-size: 7pt;
color:#000;
font-family:tahoma;
text-decoration:none;
font-weight:bold;
border-bottom:#D3E5E9 1px dotted;
}
.cp {
font-size:7pt;text-decoration:none;font-weight:bold;font-family:arial;border-bottom:#8495C4 1px dotted;color:#999999;
}
div.ColorPicker_com_colorSlider{
margin:2px;
width:450px;
height:210px;
padding-top:10px;
padding-left:10px;
position:relative;
}
.ColorPicker_com_colorSlider_palette_border{
border:1px solid #000;
width:256px;
height:256px;
margin-right:5px;
position:relative;
right:91px;
}
.ColorPicker_com_colorSlider_hue{
width:40px;
position:absolute;
top:10px;
left:280px;
}
.ColorPicker_com_colorSlider_hueBar_border{
border:1px solid #000;
width:18px;
height:256px;
position:absolute;
left:10px;
z-index:10;
}
.ColorPicker_com_colorSlider_hueBar{
background-image:url('http://www.colorpicker.com/images/color-codes/hueBar.png');
height:256px;
width:18px;
background-color:red;
}
.ColorPicker_com_colorSlider_sliderHandle{
width:38px;
height:9px;
background-image:url('http://www.colorpicker.com/images/color-codes/arrow-l.gif');
background-repeat:no-repeat;
position:absolute;
z-index:15;
left:1px;
top:-2px;
cursor:default;
}
.ColorPicker_com_colorSlider_sliderHandle div{
background-image:url('http://www.colorpicker.com/images/color-codes/arrow-r.gif');
background-repeat:no-repeat;
background-position:top right;
height:9px;
}
.ColorPicker_com_colorSlider_palette{
width:256px;
height:256px;
}
.ColorPicker_com_colorSlider_palette_circle{
background-image:url('http://www.colorpicker.com/images/color-codes/circle-selected-black.gif');
width:13px;
height:13px;
position:absolute;
z-index:100000;
background-position: center center;
background-repeat:no-repeat;
padding:0px;
}
.ColorPicker_com_colorSlider_palette_circleBlack{
background-image:url('http://www.colorpicker.com/images/color-codes/circle-selected-black.gif');
}

.ColorPicker_com_colorSlider_colorPreview{
margin-left:63px;
width:50px;
height:50px;
border:1px solid #000000;
}
.ColorPicker_com_colorSliderFormTable{
font-size:12px;margin-top:5px;margin-left:60px;
}
.ColorPicker_com_colorSliderFormTable input{
width:30px;
font-family:arial;
font-size:11px;
}
input.ColorPicker_com_colorSlider_rgbCode{
font-size:13px;
width:65px;
}
img{
behaviour:url('http://www.colorpicker.com/pngbehavior.htc');
}
.sprite-aim {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 0 no-repeat; } 
.sprite-bebo {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -66px no-repeat; } 
.sprite-blogger {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -132px no-repeat; } 
.sprite-buzzup {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -198px no-repeat; } 
.sprite-delicious {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -264px no-repeat; } 
.sprite-digg {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -330px no-repeat; } 
.sprite-facebook {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -396px no-repeat; } 
.sprite-faves {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -460px no-repeat; } 
.sprite-friendster {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -526px no-repeat; } 
.sprite-google {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -591px no-repeat; } 
.sprite-hi5 {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -657px no-repeat; } 
.sprite-linkedin {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -723px no-repeat; } 
.sprite-live {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -789px no-repeat; } 
.sprite-mixx {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -855px no-repeat; } 
.sprite-myspace {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -919px no-repeat; } 
.sprite-reddit {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -985px no-repeat; } 
.sprite-slashdot {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -1051px no-repeat; } 
.sprite-stumbleupon {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -1117px no-repeat; } 
.sprite-twitter {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -1183px no-repeat; } 
.sprite-typepad {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -1249px no-repeat; } 
.sprite-wordpress {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -1315px no-repeat; } 
.sprite-yahoo {padding-left:19px;  background: url(http://www.colorpicker.com/img/sh.png) 0 -1375px no-repeat; }

Pop out