Цветовая гамма

<HEAD> <style type="text/css"> h3{ clear:both; } .printHeading{ display:none; } legend{ display:none; } #colorScheme_colorBox{ padding-left:20px; } .colorsToChooseFrom legend,.colorTools legend{ display:inline; } label{ font-size:11px; } .colorOptions{ height:222px; } .colorOptions fieldset{ height:220px; } .smallColorSquare{ width:10px; height:10px; float:left; border:1px solid #000000; margin-right:1px; margin-bottom:1px; cursor:pointer; } .colorsToChooseFrom{ width:250px; float:left; } #amazonAd{ width:110px; padding-right:5px; float:right; } .colorTools{ width:175px; float:left; } .colorTools div{ margin-left:5px; } .colorTools input{ width:30px; font-size:11px; } .colorTools .bigInput{ width:120px; } .colorTools span{ padding-left:2px; font-size:11px; } .colorTools sup{ font-size:9px; line-height:10px; margin-bottom:14px; padding-left:2px; vertical-align:top; } #webColors{ display:none; } #color_slider{ display:none; } #previewPanel{ border:1px solid #CCCCCC; width:71px; height:137px; } .colorTextBoxes{ width:150px; float:left; } .colorPreview{ width:150px; float:left; } table{ padding:0px; } table td{ padding:0px; } #colorScheme,#myColors{ width:493px; clear:both; } #colorScheme{ height:750px; } .bigColorSquare{ width:80px; height:50px; float:left; margin:3px; cursor:pointer; text-align:center; padding-top:30px; border:1px solid #000000; } .bigColorSquare span{ padding:2px; border:1px solid #000000; background-color:#FFFF00; font-size:11px; } .colorOptions,#colorScheme fieldset,#myColors fieldset{ margin-left:300px; } #colorScheme fieldset,#myColors fieldset{ border: 0px; } fieldset{ margin-bottom:10px; } /* Slider */ .form_widget_amount_slider{ border-top:1px solid #9d9c99; border-left:1px solid #9d9c99; border-bottom:1px solid #eee; border-right:1px solid #eee; background-color:#f0ede0; height:3px; position:absolute; bottom:0px; } #divFindColor{ position:absolute; display:none; z-index:9999999999; } #advancedColorPreview{ margin:3px; border:1px solid #000; height:40px; text-align:center; padding-top:20px; cursor:pointer; display:none; } #advancedColorPreview #advancedColorPreviewCode{ padding:5px; background-color:#CCC; border:1px solid #000; } .clear{ clear:both; } form{ display:inline; } </style> </HEAD> <BODY> <center> <div id="mainContent"> <script type="text/javascript"> /*********************************************************************************************** Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com Get this and other scripts at www.dhtmlgoodies.com You can use this script freely as long as this copyright message is kept intact. version 1.01, September, 17th, 2005 ***********************************************************************************************/ var activePalette = false; var busyDisplayingScheme = false; function setPalette(idOfDiv) { if(activePalette)activePalette.style.display='none'; else document.getElementById('namedColors').style.display='none'; var obj = document.getElementById(idOfDiv); obj.style.display='block'; activePalette = obj; } function colorClick(rgbColor) { if(!rgbColor.match(/^\#[a-f0-9]{6}$/gi))return; pickColor(rgbColor); displayScheme(); } function pickColor(rgbColor,ignoreHSB) { if(!rgbColor.match(/^\#[a-f0-9]{6}$/gi))return; document.getElementById('RGB_RGB').value = rgbColor; document.getElementById('color_rgb').value = rgbColor; var red = baseConverter(rgbColor.substr(1,2),16,10); var green = baseConverter(rgbColor.substr(3,2),16,10); var blue = baseConverter(rgbColor.substr(5,2),16,10); document.getElementById('RGB_R').value = red; document.getElementById('RGB_G').value = green; document.getElementById('RGB_B').value = blue; if(!ignoreHSB || ignoreHSB=='undefined'){ var hsbArray = toHSV(rgbColor); if(hsbArray[0]<0)hsbArray[0] = hsbArray[0]/1 + 360; document.getElementById('HSB_H').value = Math.round(hsbArray[0]); document.getElementById('HSB_S').value = Math.round(hsbArray[1]*100); document.getElementById('HSB_B').value = Math.round(hsbArray[2]*100); } document.getElementById('previewPanel').style.backgroundColor = rgbColor; checkColorButton(rgbColor); document.advancedColor.red.value = red; document.advancedColor.green.value = green; document.advancedColor.blue.value = blue; positionSliderImage(false,1); positionSliderImage(false,2); positionSliderImage(false,3); } function checkColorButton(rgbColor) { return; var myColorDiv = document.getElementById('myColors_colorList'); var subDivs = myColorDiv.getElementsByTagName('DIV'); var colorFound = false; for(var no=0;no<subDivs.length;no++){ var theColor = subDivs[no].getAttribute('value_bgColor'); if(theColor == rgbColor){ colorFound = true; break; } } document.getElementById('button_removeColor').style.display='none'; document.getElementById('button_addColor').style.display='none'; if(!colorFound){ document.getElementById('button_addColor').style.display='inline'; }else{ document.getElementById('button_removeColor').style.display='inline'; } } function showColorByNumericHSB() { var hue = document.getElementById('HSB_H').value; var sat = document.getElementById('HSB_S').value; var bri = document.getElementById('HSB_B').value; if(!hue.match(/^[\d]+$/g))return false; if(!sat.match(/^[\d]+$/g))return false; if(!bri.match(/^[\d]+$/g))return false; if(hue/1>360) return false; if(sat/1>100) return false; if(bri/1>100) return false; sat = sat/100; bri = bri/100; var rgbColor = toRgb(hue,sat,bri); pickColor(rgbColor,true); displayScheme(); } function showColorByNumericRGB() { var red = document.getElementById('RGB_R').value; var green = document.getElementById('RGB_G').value; var blue = document.getElementById('RGB_B').value; if(!red.match(/^[\d]+$/g))return false; if(!green.match(/^[\d]+$/g))return false; if(!blue.match(/^[\d]+$/g))return false; if(red/1>255)return false; if(green/1>255)return false; if(blue/1>255) return false; var rgbColor = '#' + baseConverter(red,10,16) + baseConverter(green,10,16) + baseConverter(blue,10,16); pickColor(rgbColor); busyDisplayingScheme=false; displayScheme(); } function manualOnchange() { if(this.id.indexOf('HSB')>=0){ showColorByNumericHSB(); }else if(this.id=='RGB_RGB'){ if(this.value.match(/^[a-f0-9]{6}$/gi))this.value = '#' + this.value; if(this.value.match(/^\#[a-f0-9]{6}$/gi))pickColor(this.value); }else{ // RGB value showColorByNumericRGB(); } busyDisplayingScheme=false; displayScheme(); } function displayScheme() { if(busyDisplayingScheme){ return; } busyDisplayingScheme = true; var color = document.getElementById('RGB_RGB').value; if(!color.match(/^\#[a-f0-9]{6}$/gi))return; var targetDiv = document.getElementById('colorScheme_colorBox'); var subDivs = targetDiv.getElementsByTagName('DIV'); for(var no=subDivs.length-1;no>=0;no--){ subDivs[no].parentNode.removeChild(subDivs[no]); } var colorSchemes = ['complementary','splitcomplementary','triade','tetrade','analogous','monotone']; var colorSchemeNames = ['Complementary','Split complementary','Triade','Tetrade','Analogic','Monotone']; for(var schemeCounter=0;schemeCounter<colorSchemes.length;schemeCounter++){ var degreesArray = new Array(); degreesArray.push(0); var newDiv = document.createElement('DIV'); newDiv.innerHTML = '<b>' + colorSchemeNames[schemeCounter] + '</b>'; newDiv.style.cssText = 'width:100%;float:none;clear:both;padding-left:5px'; newDiv.style.clear = 'both'; targetDiv.appendChild(newDiv); inputValue = colorSchemes[schemeCounter]; switch(inputValue){ case "complementary": degreesArray.push(180); break; case "splitcomplementary": degreesArray.push(160); degreesArray.push(-160); break; case "triade": degreesArray.push(120); degreesArray.push(-120); break; case "tetrade": degreesArray.push(90); degreesArray.push(180); degreesArray.push(270); break; case "analogous": degreesArray.push(25); degreesArray.push(-25); break; case "doubleContrast": degreesArray.push(30); degreesArray.push(180); degreesArray.push(210); break; case "monotone": var hsvColor = toHSV(color); // Get brightness var saturationAndBrightnessDistance = 10; for(var no=0;no<4;no++){ degreesArray.push((no+1)*saturationAndBrightnessDistance); } break; } var lastColor = false; for(no=0;no<degreesArray.length;no++){ if(degreesArray[no]==0){ var newColor = color; }else{ var newColor = findColorByDegrees(color,degreesArray[no]); } if(newColor!=lastColor && newColor.length==7){ var newDiv = document.createElement('DIV'); newDiv.style.backgroundColor = newColor; newDiv.setAttribute('value_bgColor',newColor); newDiv.onclick = colorSquareClick; newDiv.className = 'bigColorSquare'; targetDiv.appendChild(newDiv); var newSpan = document.createElement('SPAN'); newSpan.innerHTML = newColor; newDiv.appendChild(newSpan); lastColor = newColor; } } } setTimeout('busyDisplayingScheme = false',5); } function colorSquareClick() { var rgbColor = this.getAttribute('value_bgColor');; if(!rgbColor.match(/^\#[a-f0-9]{6}$/gi))return; pickColor(rgbColor); } function setManual() { var red = parseInt(document.advancedColor.red.value); var green = parseInt(document.advancedColor.green.value); var blue = parseInt(document.advancedColor.blue.value); var redHex = baseConverter(red,10,16)+''; var greenHex = baseConverter(green,10,16) + ''; var blueHex = baseConverter(blue,10,16) + ''; if(redHex.length==1)redHex = '0' + redHex; if(greenHex.length==1)greenHex = '0' + greenHex; if(blueHex.length==1)blueHex = '0' + blueHex; currentColor = '#' + redHex + greenHex + blueHex; //document.getElementById('advancedColorPreview').style.backgroundColor = currentColor; //document.getElementById('advancedColorPreviewCode').innerHTML = currentColor; document.getElementById('color_rgb').value = currentColor.replace('#',''); pickColor(currentColor); displayScheme(); return false; } function removeColor() { var color = document.getElementById('RGB_RGB').value; if(!color.match(/^\#[a-f0-9]{6}$/gi)){ return; } var obj = document.getElementById('myColors_colorList'); var subDivs = obj.getElementsByTagName('DIV'); for(var no=0;no<subDivs.length;no++){ if(subDivs[no].getAttribute('value_bgColor') == color){ subDivs[no].parentNode.removeChild(subDivs[no]); checkColorButton(color); return; } } checkColorButton(color); } function addColor() { var color = document.getElementById('RGB_RGB').value; if(!color.match(/^\#[a-f0-9]{6}$/gi)){ alert('Invalid color - the color has to be specified in the format #RRGGBB where R,G and B are hexadecimal numbers'); return; } var newDiv = document.createElement('DIV'); newDiv.setAttribute('value_bgColor',color); newDiv.style.backgroundColor = color; newDiv.className = 'bigColorSquare'; newDiv.onclick = colorSquareClick; document.getElementById('myColors_colorList').appendChild(newDiv); var newSpan = document.createElement('SPAN'); newSpan.innerHTML = color; newDiv.appendChild(newSpan); checkColorButton(color); } function initColorPicker() { var inputs = document.getElementsByTagName('INPUT'); for(var no=0;no<inputs.length;no++){ if(inputs[no].type=='text'){ inputs[no].onchange = manualOnchange; } } } window.onload = initColorPicker; </script> <SCRIPT type="text/javascript"> function baseConverter (number,ob,nb) { number = number + ""; number = number.toUpperCase(); var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var dec = 0; for (var i = 0; i <= number.length; i++) { dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob , (number.length - i - 1))); } number = ""; var magnitude = Math.floor((Math.log(dec))/(Math.log(nb))); for (var i = magnitude; i >= 0; i--) { var amount = Math.floor(dec/Math.pow(nb,i)); number = number + list.charAt(amount); dec -= amount*(Math.pow(nb,i)); } if(number.length==0)number=0; return number; } // Converts a RGB color to HSV function toHSV(rgbColor){ rgbColor = rgbColor.replace('#',''); red = baseConverter(rgbColor.substr(0,2),16,10); green = baseConverter(rgbColor.substr(2,2),16,10); blue = baseConverter(rgbColor.substr(4,2),16,10); if(red.length==0)red=0; if(green.length==0)green=0; if(blue.length==0)blue=0; 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(valueBrightness/1<0.5){ //saturation = (maxValue - minValue) / (maxValue + minValue); } if(valueBrightness/1>= 0.5){ //saturation = (maxValue - minValue) / (2 - maxValue - minValue); } returnArray = [hue,saturation,valueBrightness]; return returnArray; } function toRgb(hue,saturation,valueBrightness){ Hi = Math.floor(hue / 60); if(hue==360)Hi=0; f = hue/60 - Hi; p = (valueBrightness * (1- saturation)).toPrecision(2); q = (valueBrightness * (1 - (f * saturation))).toPrecision(2); t = (valueBrightness * (1 - ((1-f)*saturation))).toPrecision(2); 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; case 5: 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); red = baseConverter(red,10,16); green = baseConverter(green,10,16); blue = 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(); } function findColorByDegrees(rgbColor,degrees){ rgbColor = rgbColor.replace('#',''); myArray = toHSV(rgbColor); myArray[0]+=degrees; if(myArray[0]>=360)myArray[0]-=360; if(myArray[0]<0)myArray[0]+=360; return toRgb(myArray[0],myArray[1],myArray[2]); } function findColorByBrightness(rgbColor,brightness){ rgbColor = rgbColor.replace('#',''); myArray = toHSV(rgbColor); myArray[2]+=brightness/100; if(myArray[2]>1)myArray[2]=1; if(myArray[2]<0)myArray[2]=0; myArray[1]+=brightness/100; if(myArray[1]>1)myArray[1]=1; if(myArray[1]<0)myArray[1]=0; return toRgb(myArray[0],myArray[1],myArray[2]); } </script> <h3>Цветовая гамма</h5> <div class="colorOptions"> <div class="colorsToChooseFrom"> <fieldset> <legend>Варианты цветов</legend> <form> <input type="radio" name="colorPalette" value="namedColors" id="paletteChoice1" checked onclick="setPalette(this.value)"><label for="paletteChoice1">Название цвета</label> <input type="radio" name="colorPalette" value="webColors" id="paletteChoice2" onclick="setPalette(this.value)"><label for="paletteChoice2">Web цвета</label> </form> <div id="namedColors"> <div class="smallColorSquare" onclick="colorClick('#F0F8FF')" title="AliceBlue" style="background-color:#F0F8FF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FAEBD7')" title="AntiqueWhite" style="background-color:#FAEBD7"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#00FFFF')" title="Aqua and Cyan" style="background-color:#00FFFF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#7FFFD4')" title="Aquamarine" style="background-color:#7FFFD4"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F0FFFF')" title="Azure" style="background-color:#F0FFFF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F5F5DC')" title="Beige" style="background-color:#F5F5DC"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFE4C4')" title="Bisque" style="background-color:#FFE4C4"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#000000')" title="Black" style="background-color:#000000"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFEBCD')" title="BlanchedAlmond" style="background-color:#FFEBCD"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#0000FF')" title="Blue" style="background-color:#0000FF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#8A2BE2')" title="BlueViolet" style="background-color:#8A2BE2"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#A52A2A')" title="Brown" style="background-color:#A52A2A"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#DEB887')" title="BurlyWood" style="background-color:#DEB887"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#5F9EA0')" title="CadetBlue" style="background-color:#5F9EA0"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#7FFF00')" title="Chartreuse" style="background-color:#7FFF00"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#D2691E')" title="Chocolate" style="background-color:#D2691E"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF7F50')" title="Coral" style="background-color:#FF7F50"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#6495ED')" title="CornflowerBlue" style="background-color:#6495ED"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFF8DC')" title="Cornsilk" style="background-color:#FFF8DC"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#DC143C')" title="Crimson" style="background-color:#DC143C"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#00008B')" title="DarkBlue" style="background-color:#00008B"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#008B8B')" title="DarkCyan" style="background-color:#008B8B"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#B8860B')" title="DarkGoldenRod" style="background-color:#B8860B"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#A9A9A9')" title="DarkGray" style="background-color:#A9A9A9"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#006400')" title="DarkGreen" style="background-color:#006400"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#BDB76B')" title="DarkKhaki" style="background-color:#BDB76B"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#8B008B')" title="DarkMagenta" style="background-color:#8B008B"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#556B2F')" title="DarkOliveGreen" style="background-color:#556B2F"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF8C00')" title="Darkorange" style="background-color:#FF8C00"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#9932CC')" title="DarkOrchid" style="background-color:#9932CC"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#8B0000')" title="DarkRed" style="background-color:#8B0000"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#E9967A')" title="DarkSalmon" style="background-color:#E9967A"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#8FBC8F')" title="DarkSeaGreen" style="background-color:#8FBC8F"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#483D8B')" title="DarkSlateBlue" style="background-color:#483D8B"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#2F4F4F')" title="DarkSlateGray" style="background-color:#2F4F4F"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#00CED1')" title="DarkTurquoise" style="background-color:#00CED1"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#9400D3')" title="DarkViolet" style="background-color:#9400D3"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF1493')" title="DeepPink" style="background-color:#FF1493"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#00BFFF')" title="DeepSkyBlue" style="background-color:#00BFFF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#696969')" title="DimGray" style="background-color:#696969"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#1E90FF')" title="DodgerBlue" style="background-color:#1E90FF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#D19275')" title="Feldspar" style="background-color:#D19275"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#B22222')" title="FireBrick" style="background-color:#B22222"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFFAF0')" title="FloralWhite" style="background-color:#FFFAF0"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#228B22')" title="ForestGreen" style="background-color:#228B22"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF00FF')" title="Fuchsia" style="background-color:#FF00FF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#DCDCDC')" title="Gainsboro" style="background-color:#DCDCDC"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F8F8FF')" title="GhostWhite" style="background-color:#F8F8FF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFD700')" title="Gold" style="background-color:#FFD700"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#DAA520')" title="GoldenRod" style="background-color:#DAA520"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#808080')" title="Gray" style="background-color:#808080"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#008000')" title="Green" style="background-color:#008000"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#ADFF2F')" title="GreenYellow" style="background-color:#ADFF2F"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F0FFF0')" title="HoneyDew" style="background-color:#F0FFF0"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF69B4')" title="HotPink" style="background-color:#FF69B4"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#CD5C5C')" title="IndianRed" style="background-color:#CD5C5C"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#4B0082')" title="Indigo" style="background-color:#4B0082"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFFFF0')" title="Ivory" style="background-color:#FFFFF0"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F0E68C')" title="Khaki" style="background-color:#F0E68C"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#E6E6FA')" title="Lavender" style="background-color:#E6E6FA"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFF0F5')" title="LavenderBlush" style="background-color:#FFF0F5"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#7CFC00')" title="LawnGreen" style="background-color:#7CFC00"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFFACD')" title="LemonChiffon" style="background-color:#FFFACD"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#ADD8E6')" title="LightBlue" style="background-color:#ADD8E6"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F08080')" title="LightCoral" style="background-color:#F08080"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#E0FFFF')" title="LightCyan" style="background-color:#E0FFFF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FAFAD2')" title="LightGoldenRodYellow" style="background-color:#FAFAD2"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#D3D3D3')" title="LightGrey" style="background-color:#D3D3D3"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#90EE90')" title="LightGreen" style="background-color:#90EE90"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFB6C1')" title="LightPink" style="background-color:#FFB6C1"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFA07A')" title="LightSalmon" style="background-color:#FFA07A"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#20B2AA')" title="LightSeaGreen" style="background-color:#20B2AA"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#87CEFA')" title="LightSkyBlue" style="background-color:#87CEFA"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#8470FF')" title="LightSlateBlue" style="background-color:#8470FF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#778899')" title="LightSlateGray" style="background-color:#778899"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#B0C4DE')" title="LightSteelBlue" style="background-color:#B0C4DE"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFFFE0')" title="LightYellow" style="background-color:#FFFFE0"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#00FF00')" title="Lime" style="background-color:#00FF00"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#32CD32')" title="LimeGreen" style="background-color:#32CD32"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FAF0E6')" title="Linen" style="background-color:#FAF0E6"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF00FF')" title="Magenta" style="background-color:#FF00FF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#800000')" title="Maroon" style="background-color:#800000"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#66CDAA')" title="MediumAquaMarine" style="background-color:#66CDAA"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#0000CD')" title="MediumBlue" style="background-color:#0000CD"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#BA55D3')" title="MediumOrchid" style="background-color:#BA55D3"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#9370D8')" title="MediumPurple" style="background-color:#9370D8"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#3CB371')" title="MediumSeaGreen" style="background-color:#3CB371"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#7B68EE')" title="MediumSlateBlue" style="background-color:#7B68EE"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#00FA9A')" title="MediumSpringGreen" style="background-color:#00FA9A"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#48D1CC')" title="MediumTurquoise" style="background-color:#48D1CC"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#C71585')" title="MediumVioletRed" style="background-color:#C71585"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#191970')" title="MidnightBlue" style="background-color:#191970"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F5FFFA')" title="MintCream" style="background-color:#F5FFFA"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFE4E1')" title="MistyRose" style="background-color:#FFE4E1"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFE4B5')" title="Moccasin" style="background-color:#FFE4B5"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFDEAD')" title="NavajoWhite" style="background-color:#FFDEAD"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#000080')" title="Navy" style="background-color:#000080"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FDF5E6')" title="OldLace" style="background-color:#FDF5E6"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#808000')" title="Olive" style="background-color:#808000"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#6B8E23')" title="OliveDrab" style="background-color:#6B8E23"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFA500')" title="Orange" style="background-color:#FFA500"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF4500')" title="OrangeRed" style="background-color:#FF4500"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#DA70D6')" title="Orchid" style="background-color:#DA70D6"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#EEE8AA')" title="PaleGoldenRod" style="background-color:#EEE8AA"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#98FB98')" title="PaleGreen" style="background-color:#98FB98"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#AFEEEE')" title="PaleTurquoise" style="background-color:#AFEEEE"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#D87093')" title="PaleVioletRed" style="background-color:#D87093"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFEFD5')" title="PapayaWhip" style="background-color:#FFEFD5"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFDAB9')" title="PeachPuff" style="background-color:#FFDAB9"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#CD853F')" title="Peru" style="background-color:#CD853F"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFC0CB')" title="Pink" style="background-color:#FFC0CB"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#DDA0DD')" title="Plum" style="background-color:#DDA0DD"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#B0E0E6')" title="PowderBlue" style="background-color:#B0E0E6"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#800080')" title="Purple" style="background-color:#800080"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF0000')" title="Red" style="background-color:#FF0000"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#BC8F8F')" title="RosyBrown" style="background-color:#BC8F8F"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#4169E1')" title="RoyalBlue" style="background-color:#4169E1"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#8B4513')" title="SaddleBrown" style="background-color:#8B4513"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FA8072')" title="Salmon" style="background-color:#FA8072"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F4A460')" title="SandyBrown" style="background-color:#F4A460"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#2E8B57')" title="SeaGreen" style="background-color:#2E8B57"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFF5EE')" title="SeaShell" style="background-color:#FFF5EE"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#A0522D')" title="Sienna" style="background-color:#A0522D"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#C0C0C0')" title="Silver" style="background-color:#C0C0C0"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#87CEEB')" title="SkyBlue" style="background-color:#87CEEB"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#6A5ACD')" title="SlateBlue" style="background-color:#6A5ACD"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#708090')" title="SlateGray" style="background-color:#708090"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFFAFA')" title="Snow" style="background-color:#FFFAFA"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#00FF7F')" title="SpringGreen" style="background-color:#00FF7F"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#4682B4')" title="SteelBlue" style="background-color:#4682B4"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#D2B48C')" title="Tan" style="background-color:#D2B48C"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#008080')" title="Teal" style="background-color:#008080"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#D8BFD8')" title="Thistle" style="background-color:#D8BFD8"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FF6347')" title="Tomato" style="background-color:#FF6347"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#40E0D0')" title="Turquoise" style="background-color:#40E0D0"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#EE82EE')" title="Violet" style="background-color:#EE82EE"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#D02090')" title="VioletRed" style="background-color:#D02090"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F5DEB3')" title="Wheat" style="background-color:#F5DEB3"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFFFFF')" title="White" style="background-color:#FFFFFF"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#F5F5F5')" title="WhiteSmoke" style="background-color:#F5F5F5"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#FFFF00')" title="Yellow" style="background-color:#FFFF00"><span></span></div> <div class="smallColorSquare" onclick="colorClick('#9ACD32')" title="YellowGreen" style="background-color:#9ACD32"><span></span></div> </div> <div id="webColors"> <div class="smallColorSquare" title="#000000" onclick="colorClick('#000000')" style="background-color:#000000"><span></span></div> <div class="smallColorSquare" title="#000033" onclick="colorClick('#000033')" style="background-color:#000033"><span></span></div> <div class="smallColorSquare" title="#000066" onclick="colorClick('#000066')" style="background-color:#000066"><span></span></div> <div class="smallColorSquare" title="#000099" onclick="colorClick('#000099')" style="background-color:#000099"><span></span></div> <div class="smallColorSquare" title="#0000CC" onclick="colorClick('#0000CC')" style="background-color:#0000CC"><span></span></div> <div class="smallColorSquare" title="#0000FF" onclick="colorClick('#0000FF')" style="background-color:#0000FF"><span></span></div> <div class="smallColorSquare" title="#003300" onclick="colorClick('#003300')" style="background-color:#003300"><span></span></div> <div class="smallColorSquare" title="#003333" onclick="colorClick('#003333')" style="background-color:#003333"><span></span></div> <div class="smallColorSquare" title="#003366" onclick="colorClick('#003366')" style="background-color:#003366"><span></span></div> <div class="smallColorSquare" title="#003399" onclick="colorClick('#003399')" style="background-color:#003399"><span></span></div> <div class="smallColorSquare" title="#0033CC" onclick="colorClick('#0033CC')" style="background-color:#0033CC"><span></span></div> <div class="smallColorSquare" title="#0033FF" onclick="colorClick('#0033FF')" style="background-color:#0033FF"><span></span></div> <div class="smallColorSquare" title="#006600" onclick="colorClick('#006600')" style="background-color:#006600"><span></span></div> <div class="smallColorSquare" title="#006633" onclick="colorClick('#006633')" style="background-color:#006633"><span></span></div> <div class="smallColorSquare" title="#006666" onclick="colorClick('#006666')" style="background-color:#006666"><span></span></div> <div class="smallColorSquare" title="#006699" onclick="colorClick('#006699')" style="background-color:#006699"><span></span></div> <div class="smallColorSquare" title="#0066CC" onclick="colorClick('#0066CC')" style="background-color:#0066CC"><span></span></div> <div class="smallColorSquare" title="#0066FF" onclick="colorClick('#0066FF')" style="background-color:#0066FF"><span></span></div> <div class="smallColorSquare" title="#009900" onclick="colorClick('#009900')" style="background-color:#009900"><span></span></div> <div class="smallColorSquare" title="#009933" onclick="colorClick('#009933')" style="background-color:#009933"><span></span></div> <div class="smallColorSquare" title="#009966" onclick="colorClick('#009966')" style="background-color:#009966"><span></span></div> <div class="smallColorSquare" title="#009999" onclick="colorClick('#009999')" style="background-color:#009999"><span></span></div> <div class="smallColorSquare" title="#0099CC" onclick="colorClick('#0099CC')" style="background-color:#0099CC"><span></span></div> <div class="smallColorSquare" title="#0099FF" onclick="colorClick('#0099FF')" style="background-color:#0099FF"><span></span></div> <div class="smallColorSquare" title="#00CC00" onclick="colorClick('#00CC00')" style="background-color:#00CC00"><span></span></div> <div class="smallColorSquare" title="#00CC33" onclick="colorClick('#00CC33')" style="background-color:#00CC33"><span></span></div> <div class="smallColorSquare" title="#00CC66" onclick="colorClick('#00CC66')" style="background-color:#00CC66"><span></span></div> <div class="smallColorSquare" title="#00CC99" onclick="colorClick('#00CC99')" style="background-color:#00CC99"><span></span></div> <div class="smallColorSquare" title="#00CCCC" onclick="colorClick('#00CCCC')" style="background-color:#00CCCC"><span></span></div> <div class="smallColorSquare" title="#00CCFF" onclick="colorClick('#00CCFF')" style="background-color:#00CCFF"><span></span></div> <div class="smallColorSquare" title="#00FF00" onclick="colorClick('#00FF00')" style="background-color:#00FF00"><span></span></div> <div class="smallColorSquare" title="#00FF33" onclick="colorClick('#00FF33')" style="background-color:#00FF33"><span></span></div> <div class="smallColorSquare" title="#00FF66" onclick="colorClick('#00FF66')" style="background-color:#00FF66"><span></span></div> <div class="smallColorSquare" title="#00FF99" onclick="colorClick('#00FF99')" style="background-color:#00FF99"><span></span></div> <div class="smallColorSquare" title="#00FFCC" onclick="colorClick('#00FFCC')" style="background-color:#00FFCC"><span></span></div> <div class="smallColorSquare" title="#00FFFF" onclick="colorClick('#00FFFF')" style="background-color:#00FFFF"><span></span></div> <div class="smallColorSquare" title="#330000" onclick="colorClick('#330000')" style="background-color:#330000"><span></span></div> <div class="smallColorSquare" title="#330033" onclick="colorClick('#330033')" style="background-color:#330033"><span></span></div> <div class="smallColorSquare" title="#330066" onclick="colorClick('#330066')" style="background-color:#330066"><span></span></div> <div class="smallColorSquare" title="#330099" onclick="colorClick('#330099')" style="background-color:#330099"><span></span></div> <div class="smallColorSquare" title="#3300CC" onclick="colorClick('#3300CC')" style="background-color:#3300CC"><span></span></div> <div class="smallColorSquare" title="#3300FF" onclick="colorClick('#3300FF')" style="background-color:#3300FF"><span></span></div> <div class="smallColorSquare" title="#333300" onclick="colorClick('#333300')" style="background-color:#333300"><span></span></div> <div class="smallColorSquare" title="#333333" onclick="colorClick('#333333')" style="background-color:#333333"><span></span></div> <div class="smallColorSquare" title="#333366" onclick="colorClick('#333366')" style="background-color:#333366"><span></span></div> <div class="smallColorSquare" title="#333399" onclick="colorClick('#333399')" style="background-color:#333399"><span></span></div> <div class="smallColorSquare" title="#3333CC" onclick="colorClick('#3333CC')" style="background-color:#3333CC"><span></span></div> <div class="smallColorSquare" title="#3333FF" onclick="colorClick('#3333FF')" style="background-color:#3333FF"><span></span></div> <div class="smallColorSquare" title="#336600" onclick="colorClick('#336600')" style="background-color:#336600"><span></span></div> <div class="smallColorSquare" title="#336633" onclick="colorClick('#336633')" style="background-color:#336633"><span></span></div> <div class="smallColorSquare" title="#336666" onclick="colorClick('#336666')" style="background-color:#336666"><span></span></div> <div class="smallColorSquare" title="#336699" onclick="colorClick('#336699')" style="background-color:#336699"><span></span></div> <div class="smallColorSquare" title="#3366CC" onclick="colorClick('#3366CC')" style="background-color:#3366CC"><span></span></div> <div class="smallColorSquare" title="#3366FF" onclick="colorClick('#3366FF')" style="background-color:#3366FF"><span></span></div> <div class="smallColorSquare" title="#339900" onclick="colorClick('#339900')" style="background-color:#339900"><span></span></div> <div class="smallColorSquare" title="#339933" onclick="colorClick('#339933')" style="background-color:#339933"><span></span></div> <div class="smallColorSquare" title="#339966" onclick="colorClick('#339966')" style="background-color:#339966"><span></span></div> <div class="smallColorSquare" title="#339999" onclick="colorClick('#339999')" style="background-color:#339999"><span></span></div> <div class="smallColorSquare" title="#3399CC" onclick="colorClick('#3399CC')" style="background-color:#3399CC"><span></span></div> <div class="smallColorSquare" title="#3399FF" onclick="colorClick('#3399FF')" style="background-color:#3399FF"><span></span></div> <div class="smallColorSquare" title="#33CC00" onclick="colorClick('#33CC00')" style="background-color:#33CC00"><span></span></div> <div class="smallColorSquare" title="#33CC33" onclick="colorClick('#33CC33')" style="background-color:#33CC33"><span></span></div> <div class="smallColorSquare" title="#33CC66" onclick="colorClick('#33CC66')" style="background-color:#33CC66"><span></span></div> <div class="smallColorSquare" title="#33CC99" onclick="colorClick('#33CC99')" style="background-color:#33CC99"><span></span></div> <div class="smallColorSquare" title="#33CCCC" onclick="colorClick('#33CCCC')" style="background-color:#33CCCC"><span></span></div> <div class="smallColorSquare" title="#33CCFF" onclick="colorClick('#33CCFF')" style="background-color:#33CCFF"><span></span></div> <div class="smallColorSquare" title="#33FF00" onclick="colorClick('#33FF00')" style="background-color:#33FF00"><span></span></div> <div class="smallColorSquare" title="#33FF33" onclick="colorClick('#33FF33')" style="background-color:#33FF33"><span></span></div> <div class="smallColorSquare" title="#33FF66" onclick="colorClick('#33FF66')" style="background-color:#33FF66"><span></span></div> <div class="smallColorSquare" title="#33FF99" onclick="colorClick('#33FF99')" style="background-color:#33FF99"><span></span></div> <div class="smallColorSquare" title="#33FFCC" onclick="colorClick('#33FFCC')" style="background-color:#33FFCC"><span></span></div> <div class="smallColorSquare" title="#33FFFF" onclick="colorClick('#33FFFF')" style="background-color:#33FFFF"><span></span></div> <div class="smallColorSquare" title="#660000" onclick="colorClick('#660000')" style="background-color:#660000"><span></span></div> <div class="smallColorSquare" title="#660033" onclick="colorClick('#660033')" style="background-color:#660033"><span></span></div> <div class="smallColorSquare" title="#660066" onclick="colorClick('#660066')" style="background-color:#660066"><span></span></div> <div class="smallColorSquare" title="#660099" onclick="colorClick('#660099')" style="background-color:#660099"><span></span></div> <div class="smallColorSquare" title="#6600CC" onclick="colorClick('#6600CC')" style="background-color:#6600CC"><span></span></div> <div class="smallColorSquare" title="#6600FF" onclick="colorClick('#6600FF')" style="background-color:#6600FF"><span></span></div> <div class="smallColorSquare" title="#663300" onclick="colorClick('#663300')" style="background-color:#663300"><span></span></div> <div class="smallColorSquare" title="#663333" onclick="colorClick('#663333')" style="background-color:#663333"><span></span></div> <div class="smallColorSquare" title="#663366" onclick="colorClick('#663366')" style="background-color:#663366"><span></span></div> <div class="smallColorSquare" title="#663399" onclick="colorClick('#663399')" style="background-color:#663399"><span></span></div> <div class="smallColorSquare" title="#6633CC" onclick="colorClick('#6633CC')" style="background-color:#6633CC"><span></span></div> <div class="smallColorSquare" title="#6633FF" onclick="colorClick('#6633FF')" style="background-color:#6633FF"><span></span></div> <div class="smallColorSquare" title="#666600" onclick="colorClick('#666600')" style="background-color:#666600"><span></span></div> <div class="smallColorSquare" title="#666633" onclick="colorClick('#666633')" style="background-color:#666633"><span></span></div> <div class="smallColorSquare" title="#666666" onclick="colorClick('#666666')" style="background-color:#666666"><span></span></div> <div class="smallColorSquare" title="#666699" onclick="colorClick('#666699')" style="background-color:#666699"><span></span></div> <div class="smallColorSquare" title="#6666CC" onclick="colorClick('#6666CC')" style="background-color:#6666CC"><span></span></div> <div class="smallColorSquare" title="#6666FF" onclick="colorClick('#6666FF')" style="background-color:#6666FF"><span></span></div> <div class="smallColorSquare" title="#669900" onclick="colorClick('#669900')" style="background-color:#669900"><span></span></div> <div class="smallColorSquare" title="#669933" onclick="colorClick('#669933')" style="background-color:#669933"><span></span></div> <div class="smallColorSquare" title="#669966" onclick="colorClick('#669966')" style="background-color:#669966"><span></span></div> <div class="smallColorSquare" title="#669999" onclick="colorClick('#669999')" style="background-color:#669999"><span></span></div> <div class="smallColorSquare" title="#6699CC" onclick="colorClick('#6699CC')" style="background-color:#6699CC"><span></span></div> <div class="smallColorSquare" title="#6699FF" onclick="colorClick('#6699FF')" style="background-color:#6699FF"><span></span></div> <div class="smallColorSquare" title="#66CC00" onclick="colorClick('#66CC00')" style="background-color:#66CC00"><span></span></div> <div class="smallColorSquare" title="#66CC33" onclick="colorClick('#66CC33')" style="background-color:#66CC33"><span></span></div> <div class="smallColorSquare" title="#66CC66" onclick="colorClick('#66CC66')" style="background-color:#66CC66"><span></span></div> <div class="smallColorSquare" title="#66CC99" onclick="colorClick('#66CC99')" style="background-color:#66CC99"><span></span></div> <div class="smallColorSquare" title="#66CCCC" onclick="colorClick('#66CCCC')" style="background-color:#66CCCC"><span></span></div> <div class="smallColorSquare" title="#66CCFF" onclick="colorClick('#66CCFF')" style="background-color:#66CCFF"><span></span></div> <div class="smallColorSquare" title="#66FF00" onclick="colorClick('#66FF00')" style="background-color:#66FF00"><span></span></div> <div class="smallColorSquare" title="#66FF33" onclick="colorClick('#66FF33')" style="background-color:#66FF33"><span></span></div> <div class="smallColorSquare" title="#66FF66" onclick="colorClick('#66FF66')" style="background-color:#66FF66"><span></span></div> <div class="smallColorSquare" title="#66FF99" onclick="colorClick('#66FF99')" style="background-color:#66FF99"><span></span></div> <div class="smallColorSquare" title="#66FFCC" onclick="colorClick('#66FFCC')" style="background-color:#66FFCC"><span></span></div> <div class="smallColorSquare" title="#66FFFF" onclick="colorClick('#66FFFF')" style="background-color:#66FFFF"><span></span></div> <div class="smallColorSquare" title="#990000" onclick="colorClick('#990000')" style="background-color:#990000"><span></span></div> <div class="smallColorSquare" title="#990033" onclick="colorClick('#990033')" style="background-color:#990033"><span></span></div> <div class="smallColorSquare" title="#990066" onclick="colorClick('#990066')" style="background-color:#990066"><span></span></div> <div class="smallColorSquare" title="#990099" onclick="colorClick('#990099')" style="background-color:#990099"><span></span></div> <div class="smallColorSquare" title="#9900CC" onclick="colorClick('#9900CC')" style="background-color:#9900CC"><span></span></div> <div class="smallColorSquare" title="#9900FF" onclick="colorClick('#9900FF')" style="background-color:#9900FF"><span></span></div> <div class="smallColorSquare" title="#993300" onclick="colorClick('#993300')" style="background-color:#993300"><span></span></div> <div class="smallColorSquare" title="#993333" onclick="colorClick('#993333')" style="background-color:#993333"><span></span></div> <div class="smallColorSquare" title="#993366" onclick="colorClick('#993366')" style="background-color:#993366"><span></span></div> <div class="smallColorSquare" title="#993399" onclick="colorClick('#993399')" style="background-color:#993399"><span></span></div> <div class="smallColorSquare" title="#9933CC" onclick="colorClick('#9933CC')" style="background-color:#9933CC"><span></span></div> <div class="smallColorSquare" title="#9933FF" onclick="colorClick('#9933FF')" style="background-color:#9933FF"><span></span></div> <div class="smallColorSquare" title="#996600" onclick="colorClick('#996600')" style="background-color:#996600"><span></span></div> <div class="smallColorSquare" title="#996633" onclick="colorClick('#996633')" style="background-color:#996633"><span></span></div> <div class="smallColorSquare" title="#996666" onclick="colorClick('#996666')" style="background-color:#996666"><span></span></div> <div class="smallColorSquare" title="#996699" onclick="colorClick('#996699')" style="background-color:#996699"><span></span></div> <div class="smallColorSquare" title="#9966CC" onclick="colorClick('#9966CC')" style="background-color:#9966CC"><span></span></div> <div class="smallColorSquare" title="#9966FF" onclick="colorClick('#9966FF')" style="background-color:#9966FF"><span></span></div> <div class="smallColorSquare" title="#999900" onclick="colorClick('#999900')" style="background-color:#999900"><span></span></div> <div class="smallColorSquare" title="#999933" onclick="colorClick('#999933')" style="background-color:#999933"><span></span></div> <div class="smallColorSquare" title="#999966" onclick="colorClick('#999966')" style="background-color:#999966"><span></span></div> <div class="smallColorSquare" title="#999999" onclick="colorClick('#999999')" style="background-color:#999999"><span></span></div> <div class="smallColorSquare" title="#9999CC" onclick="colorClick('#9999CC')" style="background-color:#9999CC"><span></span></div> <div class="smallColorSquare" title="#9999FF" onclick="colorClick('#9999FF')" style="background-color:#9999FF"><span></span></div> <div class="smallColorSquare" title="#99CC00" onclick="colorClick('#99CC00')" style="background-color:#99CC00"><span></span></div> <div class="smallColorSquare" title="#99CC33" onclick="colorClick('#99CC33')" style="background-color:#99CC33"><span></span></div> <div class="smallColorSquare" title="#99CC66" onclick="colorClick('#99CC66')" style="background-color:#99CC66"><span></span></div> <div class="smallColorSquare" title="#99CC99" onclick="colorClick('#99CC99')" style="background-color:#99CC99"><span></span></div> <div class="smallColorSquare" title="#99CCCC" onclick="colorClick('#99CCCC')" style="background-color:#99CCCC"><span></span></div> <div class="smallColorSquare" title="#99CCFF" onclick="colorClick('#99CCFF')" style="background-color:#99CCFF"><span></span></div> <div class="smallColorSquare" title="#99FF00" onclick="colorClick('#99FF00')" style="background-color:#99FF00"><span></span></div> <div class="smallColorSquare" title="#99FF33" onclick="colorClick('#99FF33')" style="background-color:#99FF33"><span></span></div> <div class="smallColorSquare" title="#99FF66" onclick="colorClick('#99FF66')" style="background-color:#99FF66"><span></span></div> <div class="smallColorSquare" title="#99FF99" onclick="colorClick('#99FF99')" style="background-color:#99FF99"><span></span></div> <div class="smallColorSquare" title="#99FFCC" onclick="colorClick('#99FFCC')" style="background-color:#99FFCC"><span></span></div> <div class="smallColorSquare" title="#99FFFF" onclick="colorClick('#99FFFF')" style="background-color:#99FFFF"><span></span></div> <div class="smallColorSquare" title="#CC0000" onclick="colorClick('#CC0000')" style="background-color:#CC0000"><span></span></div> <div class="smallColorSquare" title="#CC0033" onclick="colorClick('#CC0033')" style="background-color:#CC0033"><span></span></div> <div class="smallColorSquare" title="#CC0066" onclick="colorClick('#CC0066')" style="background-color:#CC0066"><span></span></div> <div class="smallColorSquare" title="#CC0099" onclick="colorClick('#CC0099')" style="background-color:#CC0099"><span></span></div> <div class="smallColorSquare" title="#CC00CC" onclick="colorClick('#CC00CC')" style="background-color:#CC00CC"><span></span></div> <div class="smallColorSquare" title="#CC00FF" onclick="colorClick('#CC00FF')" style="background-color:#CC00FF"><span></span></div> <div class="smallColorSquare" title="#CC3300" onclick="colorClick('#CC3300')" style="background-color:#CC3300"><span></span></div> <div class="smallColorSquare" title="#CC3333" onclick="colorClick('#CC3333')" style="background-color:#CC3333"><span></span></div> <div class="smallColorSquare" title="#CC3366" onclick="colorClick('#CC3366')" style="background-color:#CC3366"><span></span></div> <div class="smallColorSquare" title="#CC3399" onclick="colorClick('#CC3399')" style="background-color:#CC3399"><span></span></div> <div class="smallColorSquare" title="#CC33CC" onclick="colorClick('#CC33CC')" style="background-color:#CC33CC"><span></span></div> <div class="smallColorSquare" title="#CC33FF" onclick="colorClick('#CC33FF')" style="background-color:#CC33FF"><span></span></div> <div class="smallColorSquare" title="#CC6600" onclick="colorClick('#CC6600')" style="background-color:#CC6600"><span></span></div> <div class="smallColorSquare" title="#CC6633" onclick="colorClick('#CC6633')" style="background-color:#CC6633"><span></span></div> <div class="smallColorSquare" title="#CC6666" onclick="colorClick('#CC6666')" style="background-color:#CC6666"><span></span></div> <div class="smallColorSquare" title="#CC6699" onclick="colorClick('#CC6699')" style="background-color:#CC6699"><span></span></div> <div class="smallColorSquare" title="#CC66CC" onclick="colorClick('#CC66CC')" style="background-color:#CC66CC"><span></span></div> <div class="smallColorSquare" title="#CC66FF" onclick="colorClick('#CC66FF')" style="background-color:#CC66FF"><span></span></div> <div class="smallColorSquare" title="#CC9900" onclick="colorClick('#CC9900')" style="background-color:#CC9900"><span></span></div> <div class="smallColorSquare" title="#CC9933" onclick="colorClick('#CC9933')" style="background-color:#CC9933"><span></span></div> <div class="smallColorSquare" title="#CC9966" onclick="colorClick('#CC9966')" style="background-color:#CC9966"><span></span></div> <div class="smallColorSquare" title="#CC9999" onclick="colorClick('#CC9999')" style="background-color:#CC9999"><span></span></div> <div class="smallColorSquare" title="#CC99CC" onclick="colorClick('#CC99CC')" style="background-color:#CC99CC"><span></span></div> <div class="smallColorSquare" title="#CC99FF" onclick="colorClick('#CC99FF')" style="background-color:#CC99FF"><span></span></div> <div class="smallColorSquare" title="#CCCC00" onclick="colorClick('#CCCC00')" style="background-color:#CCCC00"><span></span></div> <div class="smallColorSquare" title="#CCCC33" onclick="colorClick('#CCCC33')" style="background-color:#CCCC33"><span></span></div> <div class="smallColorSquare" title="#CCCC66" onclick="colorClick('#CCCC66')" style="background-color:#CCCC66"><span></span></div> <div class="smallColorSquare" title="#CCCC99" onclick="colorClick('#CCCC99')" style="background-color:#CCCC99"><span></span></div> <div class="smallColorSquare" title="#CCCCCC" onclick="colorClick('#CCCCCC')" style="background-color:#CCCCCC"><span></span></div> <div class="smallColorSquare" title="#CCCCFF" onclick="colorClick('#CCCCFF')" style="background-color:#CCCCFF"><span></span></div> <div class="smallColorSquare" title="#CCFF00" onclick="colorClick('#CCFF00')" style="background-color:#CCFF00"><span></span></div> <div class="smallColorSquare" title="#CCFF33" onclick="colorClick('#CCFF33')" style="background-color:#CCFF33"><span></span></div> <div class="smallColorSquare" title="#CCFF66" onclick="colorClick('#CCFF66')" style="background-color:#CCFF66"><span></span></div> <div class="smallColorSquare" title="#CCFF99" onclick="colorClick('#CCFF99')" style="background-color:#CCFF99"><span></span></div> <div class="smallColorSquare" title="#CCFFCC" onclick="colorClick('#CCFFCC')" style="background-color:#CCFFCC"><span></span></div> <div class="smallColorSquare" title="#CCFFFF" onclick="colorClick('#CCFFFF')" style="background-color:#CCFFFF"><span></span></div> <div class="smallColorSquare" title="#FF0000" onclick="colorClick('#FF0000')" style="background-color:#FF0000"><span></span></div> <div class="smallColorSquare" title="#FF0033" onclick="colorClick('#FF0033')" style="background-color:#FF0033"><span></span></div> <div class="smallColorSquare" title="#FF0066" onclick="colorClick('#FF0066')" style="background-color:#FF0066"><span></span></div> <div class="smallColorSquare" title="#FF0099" onclick="colorClick('#FF0099')" style="background-color:#FF0099"><span></span></div> <div class="smallColorSquare" title="#FF00CC" onclick="colorClick('#FF00CC')" style="background-color:#FF00CC"><span></span></div> <div class="smallColorSquare" title="#FF00FF" onclick="colorClick('#FF00FF')" style="background-color:#FF00FF"><span></span></div> <div class="smallColorSquare" title="#FF3300" onclick="colorClick('#FF3300')" style="background-color:#FF3300"><span></span></div> <div class="smallColorSquare" title="#FF3333" onclick="colorClick('#FF3333')" style="background-color:#FF3333"><span></span></div> <div class="smallColorSquare" title="#FF3366" onclick="colorClick('#FF3366')" style="background-color:#FF3366"><span></span></div> <div class="smallColorSquare" title="#FF3399" onclick="colorClick('#FF3399')" style="background-color:#FF3399"><span></span></div> <div class="smallColorSquare" title="#FF33CC" onclick="colorClick('#FF33CC')" style="background-color:#FF33CC"><span></span></div> <div class="smallColorSquare" title="#FF33FF" onclick="colorClick('#FF33FF')" style="background-color:#FF33FF"><span></span></div> <div class="smallColorSquare" title="#FF6600" onclick="colorClick('#FF6600')" style="background-color:#FF6600"><span></span></div> <div class="smallColorSquare" title="#FF6633" onclick="colorClick('#FF6633')" style="background-color:#FF6633"><span></span></div> <div class="smallColorSquare" title="#FF6666" onclick="colorClick('#FF6666')" style="background-color:#FF6666"><span></span></div> <div class="smallColorSquare" title="#FF6699" onclick="colorClick('#FF6699')" style="background-color:#FF6699"><span></span></div> <div class="smallColorSquare" title="#FF66CC" onclick="colorClick('#FF66CC')" style="background-color:#FF66CC"><span></span></div> <div class="smallColorSquare" title="#FF66FF" onclick="colorClick('#FF66FF')" style="background-color:#FF66FF"><span></span></div> <div class="smallColorSquare" title="#FF9900" onclick="colorClick('#FF9900')" style="background-color:#FF9900"><span></span></div> <div class="smallColorSquare" title="#FF9933" onclick="colorClick('#FF9933')" style="background-color:#FF9933"><span></span></div> <div class="smallColorSquare" title="#FF9966" onclick="colorClick('#FF9966')" style="background-color:#FF9966"><span></span></div> <div class="smallColorSquare" title="#FF9999" onclick="colorClick('#FF9999')" style="background-color:#FF9999"><span></span></div> <div class="smallColorSquare" title="#FF99CC" onclick="colorClick('#FF99CC')" style="background-color:#FF99CC"><span></span></div> <div class="smallColorSquare" title="#FF99FF" onclick="colorClick('#FF99FF')" style="background-color:#FF99FF"><span></span></div> <div class="smallColorSquare" title="#FFCC00" onclick="colorClick('#FFCC00')" style="background-color:#FFCC00"><span></span></div> <div class="smallColorSquare" title="#FFCC33" onclick="colorClick('#FFCC33')" style="background-color:#FFCC33"><span></span></div> <div class="smallColorSquare" title="#FFCC66" onclick="colorClick('#FFCC66')" style="background-color:#FFCC66"><span></span></div> <div class="smallColorSquare" title="#FFCC99" onclick="colorClick('#FFCC99')" style="background-color:#FFCC99"><span></span></div> <div class="smallColorSquare" title="#FFCCCC" onclick="colorClick('#FFCCCC')" style="background-color:#FFCCCC"><span></span></div> <div class="smallColorSquare" title="#FFCCFF" onclick="colorClick('#FFCCFF')" style="background-color:#FFCCFF"><span></span></div> <div class="smallColorSquare" title="#FFFF00" onclick="colorClick('#FFFF00')" style="background-color:#FFFF00"><span></span></div> <div class="smallColorSquare" title="#FFFF33" onclick="colorClick('#FFFF33')" style="background-color:#FFFF33"><span></span></div> <div class="smallColorSquare" title="#FFFF66" onclick="colorClick('#FFFF66')" style="background-color:#FFFF66"><span></span></div> <div class="smallColorSquare" title="#FFFF99" onclick="colorClick('#FFFF99')" style="background-color:#FFFF99"><span></span></div> <div class="smallColorSquare" title="#FFFFCC" onclick="colorClick('#FFFFCC')" style="background-color:#FFFFCC"><span></span></div> <div class="smallColorSquare" title="#FFFFFF" onclick="colorClick('#FFFFFF')" style="background-color:#FFFFFF"><span></span></div> </div> </fieldset> </div> <div class="colorTools"> <div class="colorTextBoxes"> <fieldset> <legend>Выбор цвета</legend> <table> <tr valign="top"> <td>H:</td><td><input type="text" id="HSB_H" name="HSB_H"><span>%</span></td> <td rowspan="6"> <div id="previewPanel"> </div> </td> </tr> <tr> <td>S:</td><td><input type="text" id="HSB_S" name="HSB_S"><span>%</span></td> </tr> <tr> <td>B:</td><td><input type="text" id="HSB_B"" name="HSB_B"><span>%</span></td> </tr> <tr> <td>R:</td><td><input type="text" id="RGB_R" name="RGB_R"></td> </tr> <tr> <td>G:</td><td><input type="text" id="RGB_G" name="RGB_G"></td> </tr> <tr> <td>B:</td><td><input type="text" id="RGB_B" name="RGB_B"></td> </tr> <tr> <td> #</td><td colspan="2"><input type="text" id="RGB_RGB" name="RGB_RGB" class="bigInput"></td> </tr> <tr> <td></td> <td colspan="2"> <input type="button" class="bigInput" id="button_addColor" onclick="addColor()" style="display:none" value="Add color"> <input type="button" class="bigInput" id="button_removeColor" onclick="removeColor()" style="display:none" value="Remove color"> </td> </tr> </table> </fieldset> </div> </div> <div id="color_slider"> <form name="advancedColor"> <table> <tr> <td>R:</td> <td id="slider_target"></td> <td><input type="hidden" name="red" size="3" value="0" onfocus="this.select()" onchange="setManual()"></td> </tr> <tr> <td>G:</td> <td id="slider_target2"></td> <td><input type="hidden" name="green" size="3" value="0" onfocus="this.select()" onchange="setManual()"></td> </tr> <tr> <td>B:</td> <td id="slider_target3"></td> <td><input type="hidden" name="blue" size="3" value="0" onfocus="this.select()" onchange="setManual()"> <input type="hidden" value="" id="color_rgb" name="color_rgb" style="width:180px" onfocus="this.select()" maxlength="6" onchange="setManualRGB()"> </td> </tr> </table> <div id="advancedColorPreview" onclick="setManual()"><span id="advancedColorPreviewCode"></span></div> </form> <script type="text/javascript"> form_widget_amount_slider('slider_target',document.forms['advancedColor'].red,200,0,255,"setManual()"); form_widget_amount_slider('slider_target2',document.forms['advancedColor'].green,200,0,255,"setManual()"); form_widget_amount_slider('slider_target3',document.forms['advancedColor'].blue,200,0,255,"setManual()"); </script> </div> <div class="clear"></div> </div> <div class="clear"> </div> </div> <div class="clear"></div> </div> </center> <div align="center"><a href="http://www.ucoz.ru/" title="Создать сайт бесплатно"><img style="margin:0;padding:0;border:0;" alt="Hosted by uCoz" src="http://s201.ucoz.net/img/cp/8.gif" width="80" height="15" title="Hosted by uCoz" /></a><br /></div> </body> <p><center> <font face="arial, helvetica" size="-2"><br> </font> </center><p>

Пример:

Цветовая гамма

Варианты цветов

Выбор цвета

H:	%
S:	%
B:	%
R:
G:
B:
#