Кроссбраузерный on-line подбор цвета (ColorPicker). В результате получаем шестнадцатиричный RGB код выбранного цвета. ?спользованы: XHTML1.1+JavaScript+CSS.

Комментарии опущу. ?дея была взята с csscreator.com. ?сходный код практически полностью переделан, оптимизирован, усовершенствован, минимизирован и т.п. Желающим разобраться или использовать это на своем сайте приведу исходные коды примера. Вы можете также скачать это все в виде zip-архива, но тоже без комментариев.

JavaScript часть примера:

var isDOM, isCSS, isIE4, isNN4, isIE6C;
function initialiseapi(){
    if(document.images){
        isCSS=(document.body &&
        document.body.style )? true: false;
        isDOM=(isCSS && document.getElementById)? true: false;
        isIE4=(isCSS && document.all)? true: false;
        isNN4=(document.layers)? true: false;
        isIE6C=(document.compatMode &&
        document.compatMode.indexOf("CSS1") >=0)? true: false;
    }
}
function init(){
     if (!document.getElementsByTagName){
         return null;
    }
     initialiseapi();
 }
 window.onload=init; 
  
  var slide='0';
  var spot='0';
  var oldred="FF";
  var oldgreen="FF";
  var oldblue="FF";
  var oldredx="";
  var oldgreenx="";
  var oldbluex="";
  var green="on";
  var red="on";
  var blue="on";
  
var oldID = '';
 var oldRedID = '';
 var oldGreenID = '';
 var oldBlueID = '';
 var oldColor = '#FFFFFF';
 var newColor = '#FFFFFF';
 function dec2Hex(dec) {
     dec = parseInt(dec, 10);
     if (!isNaN(dec)) {
         hexChars = "0123456789ABCDEF";
         if (dec > 255) {
             return "Out of Range";
         }
         var i = dec % 16;
         var j = (dec - i) / 16;
         result = "";
         result += hexChars.charAt(j) + hexChars.charAt(i);
         return result;
     } else {
         return NaN;
     }
 }
function aClick(evt){
  evt = (evt) ? evt : event;
  var target = (evt.target) ? evt.target : evt.srcElement;
  xxx = target.getAttribute('id');
         markclick(xxx, xxx.substring(0,1), xxx.substring(1,3));
         return false;
 }
 function aMouseOver(evt){
  var RGB;
  evt = (evt) ? evt : event;
  var target = (evt.target) ? evt.target : evt.srcElement;
  xxx = target.getAttribute('id');
  yyy = xxx.substring(0,1);
  switch(yyy){
   case 'r' :
   RGB = 1;
   break;
   case 'g' :
   RGB = 2;
   break;
   case 'b' :
   RGB = 3;
   break;
  }
  changeval(RGB,xxx.substring(1,3),'');
 }
 function getRawObject(obj){
     var theObj;
     if(typeof obj == "string"){      
         if(isDOM){
             theObj=document.getElementById(obj);
         }else if(isIE4){
             theObj= document.all(obj);
         }else if(isNN4){
             theObj= seekLayer(document, obj);
         }
     }else{
         theObj=obj;
     }
     return theObj;
 }
function markclick(x, s, v){
 var newbg = "yellow";
 var elNew = document.getElementById(x);
 switch(s){
 case 'r' :
 if (oldRedID==''){
 oldRedbg = elNew.style.backgroundColor;
 elNew.style.backgroundColor = newbg;
 oldRedID = x;
 changeval('1',v,'yes');
   } else {
 document.getElementById(oldRedID).style.backgroundColor = 
   oldRedbg;
 oldRedbg = elNew.style.backgroundColor;
 elNew.style.backgroundColor = newbg;
 oldRedID = x;
 changeval('1',v,'yes');
 }
 break;
 case 'g' :
 if (oldGreenID==''){
 oldGreenbg = elNew.style.backgroundColor;
 elNew.style.backgroundColor = newbg;
 oldGreenID = x;
 changeval('2',v,'yes');
 } else {
 document.getElementById(oldGreenID).style.backgroundColor = 
   oldGreenbg;
 oldGreenbg = elNew.style.backgroundColor;
 elNew.style.backgroundColor = newbg;
 oldGreenID = x;
 changeval('2',v,'yes');
 }
 break;
 case 'b' :
 if (oldBlueID==''){
 oldBluebg = elNew.style.backgroundColor;
 elNew.style.backgroundColor = newbg;
 oldBlueID = x;
 changeval('3',v,'yes');
 } else {
 document.getElementById(oldBlueID).style.backgroundColor = 
   oldBluebg;
 oldBluebg = elNew.style.backgroundColor;
 elNew.style.backgroundColor = newbg;
 oldBlueID = x;
 changeval('3',v,'yes');
 }
 break;
 }
 }
 
function changeval(pos, by, itClick){
     var box=getRawObject('theval');
     var fld=getRawObject('thevalfld');
     var cval;
     if(box && fld && fld.value){
         cval=fld.value;
     }else{
         cval=false;   
     }
     oldColor = box.style.backgroundColor;
     if(cval){
         var cval1=cval.substring(1,3);
         var cval2=cval.substring(3,5);
         var cval3=cval.substring(5,7);
        
          if(pos=='1'){
             if(red=="on"){
                 var cval1=by;
              }
          }
          if(pos=='2'){
             if(green=="on"){
                 var cval2=by; 
             }
          }
           if(pos=='3'){
               if(blue=="on"){
                 var cval3=by;  
               }
          }
          fld.value="#"+cval1+cval2+cval3;
          box.style.backgroundColor="#"+cval1+cval2+cval3;
          if (itClick=="yes"){
           newColor = "#"+cval1+cval2+cval3;}
     }
 }
function aMouseOut(evt){
     var box=getRawObject('theval');
     var fld=getRawObject('thevalfld');
          fld.value=newColor;
          box.style.backgroundColor=newColor;
 }

CSS часть примера:

html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
body {
font-family:Verdana,Arial,Tahoma,sans-serif;
font-size: 100.01%;
color:#333;
line-height:1.3;
background:#FFF;
}
.slidebox{
width:377px;
background:#CCC; 
pading:3px; 
margin:5px; 
clear:both;
border:solid 1px #F5F5F5; 
border-right:solid 1px #CCC; 
border-bottom:0;
float:left;
}
.sliderow{
width:290px; 
height:16px; 
border:solid 1px #CCC; 
background:#CCC; 
padding:0 0 0 0;
margin:0 0 1px 3px; 
float:left; 
}
.slide{
float:left;
display:block; 
width:3px; 
height:15px; 
border:solid 0px #CCC; 
text-decoration:none;
font-size:7pt;
overflow:hidden;
}
.slide:hover{
background-color:yellow !important;
}
.index{
float:left; 
width:16px; 
// width:18px; 
color:#333; 
font-size:7pt; 
border:solid 1px #F5F5F5; 
border-left:solid 1px #CCC; 
border-bottom:0;
}
.indexrow{
width:293px; 
background:#CCC; 
padding:1px; 
float:left;
margin:1px 1px 1px 3px; 
}
.colorbox{
width:75px; 
height:80px; 
border:solid 1px #CCC; 
border-right:solid 1px #F5F5F5; 
float:left; 
text-align:center; 
background:#FFF;
}
.colorfld{
width:100%; 
border:solid 0px #CCC; 
float:left; 
text-align:center; 
background:#CCC;
font-size:8pt;
}