Como convertir un "#006699" a otro color muuucho mas claro?

MaBoRaK · #1 (**permalink**) 04/07/2007, 16:32

loading..........

Tengo un sistema donde los bordes de una caja.. estan en BD.... la idea es a partir de ese color ... hacerlo massss blanco para su fondo...

ejemplo :

#006699 <-- su color casi fundido sería... nosé.. talvez #000000

y aplicar el color original al borde y el opaco.. al fondo. me dejo entender?

gracias.

connection closed.

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>

derkenuke · #3 (**permalink**) 05/07/2007, 19:38

Cita:

Iniciado por MaBoRaK

#006699 <-- su color casi fundido sería... nosé.. talvez #000000

Si lo que es es tirarlo al blanco.. será más #ffffff que #000000. Todo depende de lo que quieras tirarlo al blanco.

Hice un código para hacer degradados de un color a otro. Convertíamos el color #rrggbb con valores hexadecimales a rbg(r,g,b) con valores numéricos, y entonces calculamos la diferencia entre los dos tonos rojos, los dos tonos verdes, y los dos tonos azules.

Esa diferencia total (por cada uno de los colores) se divide entre el número de pasos totales, y se multiplica ese valor por el paso en que estés (0 es el paso 0, el color inicial; y pasosTotales es el color final, variando en ese rango de 0 a pasosTotales).

En fin, todo esto tiene la aplicación práctica de decir:
gradacion(color1,color2,pasoActual,pasosTotales);
gradacion("006699", "ffffff", 5, 10);

y te lo dejaría en un color matemáticamente intermedio entre el #006699 y el #ffffff. Si pones el pasoActual 7 y el pasosTotales igual, a 10, entonces conseguirás un tono más blanquecino.

Útil para conseguir varios tonos de un mismo color hacia otro.

Lo siento pero no tengo la función, pero caricatos posteó algo relacionado con degradar que contenía esas funciones de transformado, y calculado del array con todos los pasos (con todos los colores que le pidas entre dos dados). Creo que básicamente lo que hace Panino

, pero agregando una norma CSS para el estilo del color obtenido

Un saludo.