Método de chamada: colorSelect('ID da caixa de entrada do valor da cor', 'ID do contêiner exibindo o valor da cor', evento), é muito simples de chamar, basta onClick. Agradecimentos a: Red Pepper
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paleta</title>
<estilo>
#colorBoard{posição:absoluto; preenchimento:10px; largura:256px; fundo:#f3f3f3;
#colorBank{ claro:ambos; borda:#d9d9d9 1px fundo sólido:#FFF; preenchimento:0 0 2px 2px;
#colorBank div{ overflow:oculto altura:12px largura:12px margem:2px 2px 0 0;
#colorViews{largura:80px; altura:20px; float:esquerda;borda:#d9d9d9 1px fundo:#000; display:bloco margem: 0 10px 10px 0;}
#colorInput{largura:70px; altura:18px; float:left;border:#d9d9d9 1px; sólido;margem: 0 10px 10px 0;}
#colorClose{largura:80px;cor:#999999;altura:22px;borda-topo:#FFF 1px sólido; -esquerda:#FFF 1px sólido;}
</estilo>
<roteiro>
function colorSelect(agora,página,e){
if(document.getElementById("colorBoard")){
retornar;
}
//Sobre a posição de aparência
e=e||evento;
var scrollpos = getScrollPos();
var l = scrollpos.l + e.clientX;
var t = scrollpos.t + e.clientY + 10;
if (l > getBody().clientWidth-253){
l = getBody().clientWidth-253;
}
//Cria o DOM
var agoraColor = document.getElementById(agora);
var pageColorViews = document.getElementById(página);
var ColorHex=new Array('00','33','66','99','CC','FF');
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
var colorBank = document.createElement("div");
colorBank.setAttribute("id","colorBank");
var colorViews = document.createElement("div");
colorViews.setAttribute("id","colorViews");
var colorInput = document.createElement("input");
colorInput.setAttribute("id","colorInput");
colorInput.setAttribute("tipo","texto");
colorInput.setAttribute("desativado","desativado");
var colorClose = document.createElement("input");
colorClose.setAttribute("id","colorClose");
colorClose.setAttribute("valor","Cancelar");
colorClose.setAttribute("tipo","botão");
colorClose.onclick=function(){document.body.removeChild(colorBoard)};
var colorBoard =document.createElement("div");
colorBoard.id="colorBoard";
colorBoard.style.left = l+"px";
colorBoard.style.top = t+ "px";
colorBoard.appendChild(colorViews);
colorBoard.appendChild(colorInput);
colorBoard.appendChild(colorClose);
colorBoard.appendChild(colorBank);
document.body.appendChild(colorBoard);
//Sai da paleta
para(b=0;b<6;b++){
for(a=0;a<3;a++){
para(i=0;i<6;i++){
colorItem = document.createElement("div");
colorItem.style.backgroundColor="#"+ColorHex[a]+ColorHex[i]+ColorHex[b];
colorBank.appendChild(colorItem);
}
}
}
para(b=0;b<6;b++){
for(a=3;a<6;a++){
para(i=0;i<6;i++){
colorItem = document.createElement("div");
colorItem.style.backgroundColor="#"+ColorHex[a]+ColorHex[i]+ColorHex[b];
colorBank.appendChild(colorItem);
}
}
}
para(i=0;i<6;i++){
colorItem = document.createElement("div");
colorItem.style.backgroundColor="#"+ColorHex[0]+ColorHex[0]+ColorHex[0];
colorBank.appendChild(colorItem);
}
para(i=0;i<6;i++){
colorItem = document.createElement("div");
colorItem.style.backgroundColor="#"+ColorHex[i]+ColorHex[i]+ColorHex[i];
colorBank.appendChild(colorItem);
}
para(i=0;i<6;i++){
colorItem = document.createElement("div");
colorItem.style.backgroundColor="#"+SpColorHex[i];
colorBank.appendChild(colorItem);
}
var colorItems = colorBank.getElementsByTagName("div");
for(i=0; i<colorItems.length;i++){
colorItems[i].onmouseover = function(){
a = this.style.backgroundColor;
if(a.comprimento>7){
a = formatoRgb(a);//
}
colorViews.style.background = a.toUpperCase();
colorInput.value = a.toUpperCase();
}
colorItems[i].onclick = function(){
a = this.style.backgroundColor;
if(a.comprimento>7){
a = formatoRgb(a);//
}
agoraColor.value = a.toUpperCase();
pageColorViews.style.background = a.toUpperCase();
document.body.removeChild(colorBoard);
}
}
}
//função de formato
função formatoRgb(rgb){
rgb = rgb.replace("rgb","");rgb = rgb.replace("(","");rgb = rgb.replace(")","");
formato = rgb.split(",");
a = eval(formato[0]).toString(16);
b = eval(formato[1]).toString(16);
c = eval(formato[2]).toString(16);
rgb = "#"+checkFF(a)+checkFF(b)+checkFF(c);
função verificarFF(str){
if(str.comprimento == 1){
str = str+""+str;
retornar string;
}outro{
retornar string;
}
}
retornar rgb;
}
//getBody()
função getBody(){
varBody;
if (typeof document.compatMode != 'indefinido' && document.compatMode != 'BackCompat') {
Corpo = documento.documentElement;
}
senão if (typeof document.body! = 'indefinido') {
Corpo = documento.corpo;
}
retornar Corpo;
}
//scrollPos
função getScrollPos(){
vart,l;
if (typeof window.pageYOffset != 'indefinido'){
t = janela.pageYOffset;
l = janela.pageXOffset;
}
outro{
t = getBody().scrollTop;
l = getBody().scrollLeft;
}
retornar {t:t,l:l};
}
</script>
</head>
<corpo>
<largura da tabela="500" border="1">
<tr>
<td><input type="text" value="" id="nowColor" /></td>
<td><div id="pageColorViews" style="background:#000; largura:30px; altura:30px;"></div></td>
<td><a href="javascript:;" onclick="colorSelect('nowColor','pageColorViews',event)">Clique em mim e a paleta aparecerá</a></td>
</tr>
</tabela>
</body>
</html>