Foros del Web - Ver Mensaje Individual - Como convertir un "#006699" a otro color muuucho mas claro?

Panino5001 · #2 (**permalink**) 05/07/2007, 10:14

A ver si te sirve esto:

Código:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function addCss(cssCode,i) {
	control=document.getElementById(i)
	if(control)
		document.getElementsByTagName("head")[0].removeChild(control)
   var styleElement = document.createElement("style");
   styleElement.type = "text/css";
   styleElement.id =i;
   if (styleElement.styleSheet) {
   styleElement.styleSheet.cssText = cssCode;
   } else {
   styleElement.appendChild(document.createTextNode(cssCode));
   }
   document.getElementsByTagName("head")[0].appendChild(styleElement);
  }
function decimal_a_hexadecimal(dec)
{
var Char_hexadecimales = "0123456789ABCDEF";
var low = dec % 16;
var high = (dec - low)/16;
hex = "" + Char_hexadecimales.charAt(high) + Char_hexadecimales.charAt(low);
return hex;
}
function hexadecimal_a_decimal(hex) {
return parseInt(hex,16);
}
function rossPope(colorHex){
colores_b=[];
colores_g=[];
colores_r=[];
b=hexadecimal_a_decimal(colorHex.substr(5,2));
g=hexadecimal_a_decimal(colorHex.substr(3,2));
r=hexadecimal_a_decimal(colorHex.substr(1,2));
for(j=8,i=0;i<9;i++){
colores_b[i]=decimal_a_hexadecimal(b+((255-b)/j)*i);
colores_g[i]=decimal_a_hexadecimal(g+((255-g)/j)*i);
colores_r[i]=decimal_a_hexadecimal(r+((255-r)/j)*i);
d=document.createElement('div');
d.id='d'+i;
pant=document.getElementById(d.id)
	if(pant)
		document.getElementsByTagName('body')[0].removeChild(pant);
d.innerHTML='&nbsp;';
cssCode='#d'+i+'{width:20px;height:20px;float:left;background-color:#'+colores_r[i]+colores_g[i]+colores_b[i]+';border:1px solid #000000;margin-right:1px;}';
document.getElementsByTagName('body')[0].appendChild(d);
n='n'+i
addCss(cssCode,n)

}

}
window.onload=function(){
document.getElementById('color').style.backgroundColor=document.getElementById('color').value;
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input name="color" type="text" id="color" value="#FF0000" onblur="this.style.backgroundColor=this.value" />
  <input type="button" name="Submit" value="Generar Escala de Ross Pope" onclick="rossPope(color.value)" />
</form>
</body>
</html>