Foros del Web » Creando para Internet » HTML »

Todo sobre colores

Estas en el tema de Todo sobre colores en el foro de HTML en Foros del Web. Hola amigos: Estaba haciendo una página sobre colores, que se puede ver en este link La cuestión es que encontré la definición de los colores ...
  #1 (permalink)  
Antiguo 03/04/2003, 17:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Todo sobre colores

Hola amigos:

Estaba haciendo una página sobre colores, que se puede ver en este link

La cuestión es que encontré la definición de los colores del sistema y los puse en este array:

Código PHP:
var coloresSistema = [
    
"ActiveBorder",
    
"ActiveCaption",
    
"AppWorkspace",
    
"Background",
    
"ButtonFace",
    
"ButtonHighlight",
    
"ButtonShadow",
    
"ButtonText",
    
"CaptionText",
    
"GrayText",
    
"Highlight",
    
"HighlightText",
    
"InactiveBorder",
    
"InactiveCaption",
    
"InactiveCaptionText",
    
"InfoBackground",
    
"InfoText",
    
"Menu",
    
"MenuText",
    
"Scrollbar",
    
"ThreeDDarkShadow",
    
"ThreeDFace",
    
"ThreeDHighlight",
    
"ThreeDLightShadow",
    
"ThreeDShadow",
    
"Window",
    
"WindowFrame",
    
"WindowText"
]; 
Preparé un select, pero me da problemas porque quiero saber cada uno de los componentes del color (rgb), pero no sé como se hace la conversión... por ejemplo en vez de "MenuText" obtener #000000 (o el color que corresponda)

Saludos
  #2 (permalink)  
Antiguo 03/04/2003, 18:01
Avatar de Gurrutello  
Fecha de Ingreso: enero-2002
Ubicación: Ontario,Toronto [Canada]
Mensajes: 2.017
Antigüedad: 22 años, 2 meses
Puntos: 6
caricatos
me sorprende que no pongas este mensaje en el foro javascript
saludos
__________________
Un Saludo
www.tutores.org
Asp | Php | Javascript | Perl | Coldfusion | Flash | +- 2000 codigos
  #3 (permalink)  
Antiguo 03/04/2003, 18:08
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 3 meses
Puntos: 61
Mi querido caricatos!

Creo que lo que pides es bien sencillo. Los colores en formato #000000 indican el color en RGB pero en formato hexadecimal, es decir las 2 primeras cifras son el rojo las dos siguientes el verde y las 2 últimas el azul.

Si te fijas 16*16 son 256 que son los 255 (más el cero) de los colres RGB de toda la vida. Así A equivale a 10, B equivale a 11, C equivale a 12, D equivale a 13, E a 14 y F a 15.

Así el valor #FF0000 equivale a RGB (255,0,0) o #AB3FEE equivale a RGB (171,63,238) es decir (16*10+11,16*3+15,16*15+15)

Entonces para convertirlo no creo que sea muy complicado.

He sacado esta función de una página de internet:

Código:
function xd(x)
{
 max = 8;
 document.DezHex.Wert.value = "";
 
 var e = new Array();
 var z = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
 var d = 0, chk = 0;
 x = x.toUpperCase();

 for(i=0;i<x.length;i++)
  {
   for(j=0;j<=16;j++)
    {
     if(x.substring(i,i+1) == z[j])
      { chk = 1; e[i] = j; }
        }
   if(chk == 0)
    { document.DezHex.Wert.value = "¡La cifra no es permitida!"; return; }
  }
 for(i=0;i<x.length;i++)
   d = d + e[i] * Math.pow(16,x.length-i-1)
 document.DezHex.Wert.value = d;
}

Habría que adaptarlo para que tomara los valores de 2 en 2.

O me he confundido al responder o no sé por qué preguntas esto en HTML... supongo que será lo primero...

Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #4 (permalink)  
Antiguo 04/04/2003, 01:29
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

La verdad es que dudaba entre ponerlo en javascript y ponerlo aquí, ya que los descriptores de colores (o como de diga) creo que son html, y la forma de transformarlos es javascript...
De todos modos si el foro no es el adecuado, no creo que les importe a nuestros amigos moderadores (¡Hola! )

Amigo KarlanKas:

Cita:
O me he confundido al responder o no sé por qué preguntas esto en HTML... supongo que será lo primero...
Sin dudas es lo primero...

De paso de diré que lo tienes algo más difícil que lo que yo hago...

Paso de un valor hexadecimal a decimal:
var valoresHexa = "0123456789ABCDEF";
function aDecimal(hexaValor) {// para cadenas de 2 dígitos
return valoresHexa.indexOf(hexaValor.charAt(1)) * 16 + valoresHexa.indexOf(hexaValor.charAt(0));
}

Paso de un valor decimal a hexadecimal:
function aHexadecimal(n){// para números entre 0 y 255
return valoresHexa.charAt(parseInt(n / 16)) + valoresHexa.charAt(n % 16)
}

Faltaría algún chequeo (mayúsculas, rangos...) Puede que no vaya a la primera porque lo puse a ojo...

La pregunta era otra:
¿Cómo puedo saber el valor hexadecimal de coloresSistema[n]
donde coloresSistema es el array que puse en el post anterior...

Por ejemplo se puede poner:
<div style="background-color: InfoBackground" >...</div>
y el fondo se queda tal como esté definida esa variable de sistema... pero quisiera saber si se pueden obtener los valores R G B

Saludos
  #5 (permalink)  
Antiguo 04/04/2003, 02:46
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Hola, caricatos.

En esta Página hay un contertidor hexadecimal->RGB y viceversa. Echale un vistazo al código fuente que puede ayudarte (la función se llama HexToDec)

Por cierto, está muy bien tu página. Me ha resultado curioso lo de seleccionar el color con las barritas de colores.

Saludos,
  #6 (permalink)  
Antiguo 04/04/2003, 02:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

Para que se vea mejor, modifiqué la página del enlace poniendo un select con los colores del sistema...

En el recuadro grande donde se ven los cambios, al pinchar sobre él, sale un alert con el contenido leído de su propiedad background-color...

En explorer se muestran en formato #RRGGBB, y en netscape url(R,G,B)... los valores de netscape son decimales, así que hay que hacer una conversión...

Aprovecho para mostrar el script de conversión de formato:
var rgb = color.split(")")[0].split("(")[1].split(",");

de esta manera se genera un array de tres valores decimales que luego debería convertirse (con el ejemplo del anterior post:
var convertido = "#" + aHexadecimal(rgb[0]) + aHexadecimal(rgb[1]) + aHexadecimal(rgb[2]);

... los colores asignados mediante las constantes del sistema, se leen como una cadena...

Si se asigna el color como una cadena (blue, red, magenta...), se leen convirtiéndose a los formatos mencionados antes (según el explorador)...

Me recorrí unas cuantas webs y no descubrí nada...

Saludos
  #7 (permalink)  
Antiguo 04/04/2003, 03:08
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 3 meses
Puntos: 61
Amigo caricatos... sigo sin entender que quieres... ¿Y si metes la cadena en un eval()?

Es que no sé... estoy más perdido que un pulpo en un garaje...

Parece que preguntas pero en realidad dices lo que haces sin pregntar... o al menos es lo que me parece a mi que soy bastante torpe de entendederas...

Preguntalo otra vez, por favor!! Pero esta vez para tontos, vale?

Graciaaas
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #8 (permalink)  
Antiguo 04/04/2003, 03:21
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

KarlanKas y JavierB (amigos )

La pregunta es:
¿Como puedo saber los valores rgb de los colores del sistema (el array del primer post lo indica)?
Por ejemplo de los valores predefinidos sabemos que blue se corresponde con #0000FF, black sería #000000...
pero "ActiveCaption" ...

Cuando pones el color de un elemento como ActiveCaption en mi sistema se pone azul (supongo que cada usuario tendrá los colores que quiera)

Seguramente se pueda saber buscando en el registro del sistema, pero pensé que habría un truco (html/css/javascript) para saberlo desde una página.

De todos modos me parece que es una de esas cosas que no se pueden responder...

Un abrazo
  #9 (permalink)  
Antiguo 04/04/2003, 03:42
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 3 meses
Puntos: 61

Muchas gracias!!

Ahora lo entiendo!

He estado jugueteando con eso y nunca da el valor del color...

Pero voy a seguir un poco a ver...
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #10 (permalink)  
Antiguo 04/04/2003, 13:14
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
La pregunta es HTML. Se pregunta cómo encontrar las equivalencias para convertir los colores en sus valores hexadecimales. No tiene ningún problema con ningún script, así que es el forum adecuado (Yo por disipar dudas, vió?)

Caricatos... una chulada eso que has hecho

Cambiando de tema ....

<offtopic> Felíz Cumpleaños, Caricatos! </offtopic>
  #11 (permalink)  
Antiguo 04/04/2003, 16:21
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola:

<big><Gracias> </Gracias></big>

Quería hacer una página completita, pero me topé con un poblema

Lo de los colores del sistema, aunque se actualizan, voy a aparcarlo y poner otras cosillas...

Me gustaría mejorar la selección de colores mediante barras de desplazamiento (si a alguien se le ocurre...)

Otra vez muchas gracias...

Saludos
  #12 (permalink)  
Antiguo 07/04/2003, 14:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

Puse otro recuadro en la página hecho con un script...

La verdad es quería usar el foro como debate, y recibir opiniones.

Rebuscando por otros sitios, me enteré que la "paleta web" está compuesta por 216 colores, y se consiguen combinando los valores hexadecimales 00, 33, 66, 99, CC, FF...
El nuevo recuadro que he comentado se hace mediante un script con tres bucles...

Otra cosa de los colores es la transparencia, que se puede aplicar al fondo de los elementos, pero no en el "frente"...
"style.backgroundColor" y NO "style.color"

También sé que hay distintos grados de opacidad/transparencia (filtros alfa)... pero sobre eso, realmente sé muy poco.

Si alguién sabe algo más, me gustaría que lo dijera.

saludos
  #13 (permalink)  
Antiguo 22/04/2003, 07:15
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Impresionante tu página sobre Colores ( o, más bien, tus códigos usando como excusa los colores ).

Aunque no es mucho lo que puedo aportar, me gustaría saber si entendí bien algunos de tus comentarios que tienen que ver con HTML.

Cita:
"... Otra cosa de los colores es la transparencia, que se puede aplicar al fondo de los elementos, pero no en el "frente"...
"style.backgroundColor" y NO "style.color" ..."
Me desorientó un poco la referencia CSS; pero cuando abrí los select y vi que tenían color de fondo y no de texto; los asocié con tu comentario. No sé en qué navegadores no funciona el color : de opciones, yo uso IE 5.5 y no tuve ese problema; pero sí tuve otros de "edición" y formato, que terminé resolviendo de manera radical : fabricando mis propios select .

La cuestión original era poder editar el contenido del select cuando el valor buscado no estaba entre las opciones; como no hallé el modo, hice una versión en HTM, CSS y algo de JS que, por supuesto, habrá que adaptar para poder verla en cualquier navegador, pero que ya no va a tener las limitaciones de formato de los verdaderos select .
Éste sería un ejemplo simple a modo de muestra :

Código:
<html> 
<head> 
<title> FALSO 'SELECT' 
EDITABLE.</title> 
<SCRIPT>
<!-- 
function verColor(){
vCol.style.background=editable.value}

function opciones(){
if(contOpc.style.display=='none'){
contOpc.style.display='';}
else{
contOpc.style.display='none';}
}

function pasar(v){
editable.value=v;
}
// --> 
</SCRIPT> 
<STYLE>
<!--
.opc{width:118px}
.opcs{width:118px; background:Highlight; color:HighlightText}
// -->
</STYLE>
</head> 
<body >
<h2>Tabla imitando un 
<tt>select</tt> editable.</h2>

<table align=center cellpadding=0 
cellspacing=0 height=40> <tr>
<td width=100>
<div style="display:none; position:absolute; 
background:white; cursor:default; border:1px solid black; 
margin-top:20px; font:13px sans-serif" id=contOpc>
<span class=opc 
onmouseover="this.className='opcs';" 
onmouseout="this.className='opc';" 
onmousedown=pasar('BLUE')> 
<font style="background:blue; color:blue; 
 position:relative; float:right"> _ _.</font>BLUE</span><br> 
<span class=opc 
onmouseover="this.className='opcs';" 
onmouseout="this.className='opc';" 
onmousedown=pasar('GREEN')> 
<font style="background:green; color:green; 
 position:relative; float:right"> _ _.</font>GREEN</span><br> 
<span class=opc 
onmouseover="this.className='opcs';" 
onmouseout="this.className='opc';" 
onmousedown=pasar('RED')> 
<font style="background:red; color:red; 
 position:relative; float:right"> _ _. </font>RED</span> </div>
<input id=editable value='BUTTONFACE' style="width:100px; 
font:13px sans-serif">
</td><td><button 
style="font:12px; margin-top:-1px; width:20px;" 
onblur=opciones() onclick=opciones() tabindex="-1">
▼</button></td>
</tr></table>
<p>
<center><button onclick=verColor() id=vCol style="height:100px; 
width:150px; border-width:8px; background:buttonface">
<font style="background:buttonface"</font>
VER COLOR</button> </center>
</body> 
</html>
Aún no estoy seguro de que éste haya sido el motivo de tu comentario, pero ya que tenía el código hecho ...

Cita:
"...También sé que hay distintos grados de opacidad/transparencia (filtros alfa)... pero sobre eso, realmente sé muy poco. ..."
Aquí cabe una aclaración : el filtro alpha , como mask , wave , etc., tienen copyright de Microsoft, y sólo funcionan en su navegador. Fueron hechos originalmente para imágenes, aunque en algunos casos funcionan en texto y elementos coloreados, pero no directamente sobre los colores.

Código:
 
<html> 
<head> 
<title> FILTROS IE CON 
COLORES.</title>  
<STYLE>
<!--
td{border:1px inset; white-space:nowrap; text-align:center}
.btn{width:300px}
// -->
</STYLE>
</head> 
<body bgcolor=#DDDDDD>
<table cellspacing=20 align=center><tr>
<td id=mA>&nbsp</td><td> 
<input onfocus="mA.style.filter=''" value="#FFFFFF" size=14 
name=gs> &nbsp; <input type=button value="Ver Color" 
onclick="mA.style.background=gs.value;"> <br> 
<input type=button value="Cambiar a Tono de Gris" 
onclick="mA.style.filter='gray()'" class=btn></td>
</tr><tr>
<td id=mB>&nbsp</td><td> 
<input onfocus="mB.style.filter=''" value="#FFFFFF" size=14 
name=ng > &nbsp; <input type=button value="Ver Color" 
onclick="mB.style.background=ng.value;"> <br> 
<input type=button value="Cambiar a Negativo" 
onclick="mB.style.filter='invert()'" class=btn></td>
</tr><tr>
<td id=mC0> 
<div style="height:100px; width:75px" id=mC1></td> 
<td align=center> 
<input value="#FFFFFF" size=14 name=fo 
onfocus="mC1.style.background='transparent'"> &nbsp; 
<input type=button value="Ver Color Fondo" 
onclick="mC0.style.background=fo.value; mC1.style.background=
'transparent'"> <br> 
<input 
onfocus="mC1.style.filter=''; 
mC1.style.background=fr.value" value="transparent" 
size=14 name=fr > &nbsp; 
<input type=button value="Ver Color Frente" 
onclick="mC1.style.filter=''; 
mC1.style.background=fr.value;"> <br> 
<input value="50" size=3 name=op 
onblur="if(this.value>100 || this.value<0){alert
('Escriba un Porcentaje de 'Opacidad entre 0 y 100.')
; op.value='50'}">% de Opacidad Color Frente. <br> 
<input type=button value="Mezclar Colores" 
onclick="mC1.style.background=fr.value; 
mC0.style.background=fo.value; 
mC1.style.filter=
'alpha(opacity='+op.value+')'" class=btn></td>
</tr></table>
</body> 
</html>
Cita:
"... En explorer se muestran en formato #RRGGBB, y en netscape url(R,G,B)... "
Por último, no me puse a contarlos, pero usando el ojímetro me pareció que usaste los 140 colores de la paleta IE. Netscape o Linux tienen bastantes nombres más ( LIGHTGOLDENROD VIOLETRED LIGHTSLATEBLUE FUCHSIA ), hasta algunos incompatibles entre navegadores. Ya que tu página funciona en todos, sería conveniente hacer la aclaración.

Sinceramente te felicito por tu página, voy a empezar a estudiarla para ver si aprendo algo.

Saludos.
Furoya.


http://www.v-d-l.com/tut_fm_colors.html

http://users.rcn.com/giant.interport...Specifier.html

http://javascriptkit.com/script/script2/colorbar.htm

http://www.dynamicdrive.com/dynamici...lter/index.htm
  #14 (permalink)  
Antiguo 22/04/2003, 09:56
 
Fecha de Ingreso: diciembre-2002
Ubicación: Aquí
Mensajes: 192
Antigüedad: 21 años, 3 meses
Puntos: 0
Hola Caricatos,

Estuve investigando y aparentemente lo que quieres hacer no se puede en javascript.

Entre lo que vi en el web, hay una función getderivedhex, pero involucra un control y es para lenguajes compilados. Da la impresion que se puede usar el control en una página alojada en un servidor Windows.
http://msdn.microsoft.com/library/de...derivedhex.asp

Por otro lado, segun http://www.w3.org/TR/css3-color/#css-system, los nombres de los colores del systema, como ActiveBorder, ActiveCaption, etc, son en sí mismos definiciones de color. Y se pueden usar precisamente para que página web tenga un aspecto que combine con el sistema del usuario, especialmente util si el usuario ha definido colores especiales por motivos de incapacidades visuales.

Espero eso te sirva de algo.

saludos,
__________________
Nugar
  #15 (permalink)  
Antiguo 22/04/2003, 17:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola amigos:

Pido disculpas por tardar tanto en responder, pero por momentos no uso el ordenador, y las referencias que me han dejado me parecen excelentes y las quería ver con detenimiento.

Voy a contestar sin profundizar mucho, para intentar simplificar...

El tema de las transparencias es poner entre los estilos "transparent"... cuando de pone en elementos de fondo funcionan perfectamente, pero si se usa con el estilo "color", en vez de transparentarse, las letas se muestran negras (al menos en mi ordenador)

El tema de el filtro alpha, existe en netscape el equivalente que se llama moz, lo he aplicado en alguna ocasión, pero debo admitir que me pasaron el código, y me despreocupé un poco en aprender su uso.

Bueno, mañana probaré algunas cosas que he visto en los enlaces y comentarios, y veré si puedo mejorar algo la página.

Saludos
  #16 (permalink)  
Antiguo 25/04/2003, 02:36
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

A partir de uno de los enlaces que me han pasado (creo que de furoya ), recogí una lista de colores mucho más extensa (creo que son 455 o algo así), aunque si bien hay tantos colores, desde las nuevas definiciones no funcionaban en explorer... , y como las que tenía de antes las había sacado de una página de microsoft (msdn), hice una mezcla en donde las nuevas tienen el color del texto más apagado.
La dirección es la misma (ésta )

Sobre los listados, No los he editado, sino que los adjunto leyendo la capa en donde están cada uno de ellos con innerHTML, así que si hay algo generado mediante un script, posiblemente se hallen en el listado ambas cosas, por lo que si alguien piensa usar el código, lo mejor es que edite la página y no copie el contenido del textarea.

En un tema del foro de javascript, puse una explicación de como hice estas últimas modificaciones.

Creo que lo siguiente será manejar algo la opacidad (filtro alfa), y si puedo, intentar realizar una selección de colores por componentes rgb, mejorada.

Saludos
  #17 (permalink)  
Antiguo 25/04/2003, 10:59
Avatar de Carlitos
Usuario no validado
 
Fecha de Ingreso: mayo-2001
Ubicación: Zaragoza
Mensajes: 1.304
Antigüedad: 22 años, 10 meses
Puntos: 25
Qué bueno!!!

  #18 (permalink)  
Antiguo 25/04/2003, 11:13
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

Gracias Carlitos...

Hice un pequeño arreglo para poder usar el color transparente, pero no está muy depurado ya que si se activa un color del sistema, y se pone tranparente, luego, al quitar la transparencia, el color que se activa no es el del sistema. No creo que sea importante implementarlo, pero se puede hacer.

He puesto por recuadro una foto y un checkbox que activa/desactiva la transparencia de una capa superior (mostrando/ocultando la imagen)...

Lo que quiero hecer ahora es poner algo con distinto nivel de opacidad para la capa superior así se podrá ver la imagen del fondo traslúcida...

Si a alguien se le ocurre un script sencillo, está bienvenido a participar.

Saludos
  #19 (permalink)  
Antiguo 02/05/2003, 13:16
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Hola Caricatos:

casi te posteo un truco para ver la composición de los Colores de Sistema.
Pero no funcionó.

Verás, uso W98 y recordé que en WIN.INI hay una lista de los colores, así que me hice una copia ( WIN.TXT ) y empecé a probar cómo extraer esa lista para verla en una página WEB. Terminé usando un script muy bruto, que me puso los nombres y su composición decimal dentro de un textarea; ya estaba por convertirlo en una tabla, cuando se me ocurrió probarlo en el archivo original . . . ¡y el IExplorer me sacó carpiendo! Parece que por cuestiones de seguridad, puedo extraer líneas de un .TXT, pero no de un .INI. En fin, era lógico.

Pero el tema es otro. Ya entendí lo de background y color ( aún así, insisto en que en los colores más oscuros, tus option siguen ilegibles ), pero me parece que el tema pasa más por la elección de los nombres del standard que llevan a confusiones.

background es en realidad un color, pero cuando anidamos elementos los primeros quedan detrás y funcionan como background ( <table> detrás de <td> detrás del texto ) .

color es para texto exclusivamente -hasta donde recuerdo, es lo único que se ve sin necesidad de "etiquetarlo", aunque para darle color haya que hacerlo desde un tag- . Como no existen colores semitransparentes en HTML o CSS, admitir color : transparent desaparecería el texto, y para eso ya están display y visibility.

Pero ésto puede funcionar:

Código:
<HTML> 
<BODY bgcolor=black>
<table border=2 align=center STYLE="background: 
URL(file:C:\WINDOWS/WEB/WVline.gif) repeat; 
margin-top:16ex">
<tr><td align=center><font size=6 color=#0000FF //AZUL!//
style="filter:chroma(color=#0xff0000) //AZUL!//; background:black; 
height:5ex; width:28ex" //DEBE TENER ANCHO Y ALTO// >
<B>Texto con Filtro Chroma e Imagen Background.</B>
</font></td></tr></table>
</BODY> 
</HTML>
Si el fondo con los colores de Windows™ no se ve, habrá que cambiar la ruta o la imagen, claro.

El filtro semitransparente para IE y NS / Mozilla estaba en las FAQs de HTML:

style="filter:alpha(opacity=50);-moz-opacity:0.5;"
  #20 (permalink)  
Antiguo 03/05/2003, 16:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

Quise poner una selección de opacidad mediante una barra deslizante, pero no sé porqué en explorer no se ve correctamente, con calma trataré de arreglarlo.
Curiosamente se ve mejor en netscape que en explorer. La página sigue siendo la misma.

Furoya: Hay se vé la aplicación del filtro alfa, de manera que también se vea en netscape.

He notado que netscape no tiene el método add para agregar opciones a un select, así que también hice unos cambios en esas rutinas, pero no estoy seguro de si serán ya definitivas.
Coioncido contigo en que los colores del select no están bien, pero no sé muy bien que hacer, ya que había puesto los colores que no admite explorer, en tono gris... también podría poner un asterisco o cualquier marca para esos colores...

Si se te ocurre alguna forma de seleccionar colores, te escucho...
Yo había pensado sumar las tres componentes que darían un resultado en un rango 0..768 (256 * 3), si haciendo esa suma diera un valor mayor que la mitad (384) las letras las pondría blancas y sino negras.

Bueno, haré unas pruebas, y veré.

También puse otro ejemplo de la selección de la opacidad alfa en este otro link .

Sobre el uso de colores transparentes en el texto, si existiera se podrían hacer bonitos efectos, como el ejemplo que pusiste, pero para cualquier navegador.

Saludos
  #21 (permalink)  
Antiguo 05/05/2003, 13:18
 
Fecha de Ingreso: diciembre-2002
Ubicación: Aquí
Mensajes: 192
Antigüedad: 21 años, 3 meses
Puntos: 0
Cita:
Mensaje Original por caricatos
Hola otra vez:

Hice un pequeño arreglo para poder usar el color transparente, pero no está muy depurado ya que si se activa un color del sistema, y se pone tranparente, luego, al quitar la transparencia, el color que se activa no es el del sistema. No creo que sea importante implementarlo, pero se puede hacer.

Hmmm, quizas no sea importante, pero si tienes el color del sistema y al ponerlo transparente y luego quitar la transparencia toma el mismo color pero sin ser por definicion del sistema, entonces ya tienes tu proto-conversor!
__________________
Nugar
  #22 (permalink)  
Antiguo 05/05/2003, 16:02
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola:

Nugar: ¿Qué es proto-conversor!... ?

Lo que no pude averiguar es el valor rgb de los colores del sistema, que se pueden usar en páginas web...

Por ejemplo si usas un color menu o un color scrollbar (por darte dos nombres fáciles) en la página aplicas los mismos colores que usa el sistema para mostrar un menú o un "scrollbar"...

La verdad es que quise decir que no he depurado esa rutina para que quede bien, y que en realidad creo que no es importante... aunque no me gusta dejar las cosas a medias, pero por ser una página hecha por ocio, la arreglaré sin prisas.

Saludos
  #23 (permalink)  
Antiguo 05/05/2003, 19:35
 
Fecha de Ingreso: diciembre-2002
Ubicación: Aquí
Mensajes: 192
Antigüedad: 21 años, 3 meses
Puntos: 0
Me salio futurista el termino eh?


Fijate, segun he entendido del post este, uno de tus objetivos era lograr conseguir el valor hex de los colores del sistema.

Segun vi, no se puede saber este valor en js aunque en otros lenguajes aparentemente si.

Pero si con hecho de poner color de sistema > transparencia > sin transparencia el color queda cambiado a valores hex (como creo entender de tu post), ya tienes en si una manera de conseguir los valores, que aunque sea por las ramas, sea efectiva.

Proto-conversor es un precursor del conversor o convertidor de colores :)
__________________
Nugar
  #24 (permalink)  
Antiguo 07/05/2003, 00:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola Nugar:

Entiendo lo que quieres decir, y no funciona, ya que al consultar el color de fondo después de ponerlo transparente, no responde al evento onclick, y al volverlo a poner, devuelve el identificador que se le asignó por el sistema ("scrollbar" por ejemplo)

Lo que quería decir en el post es que no estaba implementado, pero ya lo hice, porque tan solo se trataba de poner una variable global indicando si el color era del sistema (es el mismo link)...

Saludos
  #25 (permalink)  
Antiguo 22/05/2003, 12:48
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Hola de nuevo caricatos!

No sé si estaré llegando tarde con el tema ( hace mucho que no me conecto ), y tampoco estoy seguro de que éste sea el foro para el actual mensaje ( no encontré ese que mencionas más arriba, el de Javascript ), pero te dejo una idea para ver los colores de sistema en Hexa.

Código:
 
<HTML> 
<HEAD> 
<TITLE> VER COMPOSICIÓN HEXA DE COLORES DE SISTEMA.</TITLE> 
<SCRIPT>
function color(cs){
document.body.style.backgroundColor=cs;
vh.value=document.bgColor;
vh.value=vh.value.toUpperCase();
}
</SCRIPT> 
<SCRIPT>
function enlaces(){
L=document.linkColor;
VL=document.vlinkColor;
AL=document.alinkColor;
cL.style.backgroundColor=L;
cVL.style.backgroundColor=VL;
cAL.style.backgroundColor=AL;}
function color(cs){
document.body.style.backgroundColor=cs;
vh.value=document.bgColor.toUpperCase();}
</SCRIPT> 

<STYLE>
.mano{cursor:hand}
.mano{cursor:pointer}
TH, TR, H2, SPAN, H4{background-color:white}
</STYLE>
</HEAD> 
<BODY onload=enlaces()>

<H2>  COLORES DE SISTEMA EN 
CSS 2</H2>

<SPAN>  Las muestras de color 
corresponden a este Sistema.
<p>
  Composición de color : <INPUT ID=vh STYLE=border:none 
SIZE=7></SPAN>
<p>
<TABLE BORDER=1 CELLPADDING=5px WIDTH=100% STYLE=color:black>
<COLGROUP SPAN=8> <COL> <COL CLASS=mano> <COL> <COL CLASS=mano> 
<COL> <COL CLASS=mano> <COL> <COL CLASS=mano> </COLGROUP>
<TR BGCOLOR=white STYLE=cursor:default >
<TH><FONT SIZE=1>NOMBRE CSS 2</FONT></TH> 
<TH><FONT SIZE=1>COLOR</FONT></TH> 
<TH><FONT SIZE=1>NOMBRE CSS 2</FONT></TH> 
<TH><FONT SIZE=1>COLOR</FONT></TH> 
<TH><FONT SIZE=1>NOMBRE CSS 2</FONT></TH> 
<TH><FONT SIZE=1>COLOR</FONT></TH> 
<TH><FONT SIZE=1>NOMBRE CSS 2</FONT></TH> 
<TH><FONT SIZE=1>COLOR</FONT></TH>
</TR><TR>
<TD>ActiveBorder</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ActiveBorder ></TD>
<TD>ActiveCaption</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ActiveCaption ></TD>
<TD>AppWorkspace</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:AppWorkspace ></TD>
<TD>Background</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:Background ></TD>
</TR><TR>
<TD>ButtonFace</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ButtonFace ></TD>
<TD>ButtonHighlight</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ButtonHighlight ></TD>
<TD>ButtonShadow</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ButtonShadow ></TD>
<TD>ButtonText</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ButtonText ></TD>
</TR><TR>
<TD>CaptionText</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:CaptionText ></TD>
<TD>GrayText</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:GrayText ></TD>
<TD>Highlight</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:Highlight ></TD>
<TD>HighlightText</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:HighlightText ></TD>
</TR><TR>
<TD>InactiveBorder</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:InactiveBorder ></TD>
<TD>InactiveCaption</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:InactiveCaption ></TD>
<TD>InactiveCaptionText</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:InactiveCaptionText ></TD>
<TD>InfoBackground</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:InfoBackground ></TD>
</TR><TR>
<TD>InfoText</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:InfoText ></TD>
<TD>Menu</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:Menu ></TD>
<TD>MenuText</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:MenuText ></TD>
<TD>Scrollbar</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:Scrollbar ></TD>
</TR><TR>
<TD>ThreeDDarkShadow</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ThreeDDarkShadow ></TD>
<TD>ThreeDFace</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ThreeDFace ></TD>
<TD>ThreeDHighlight</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ThreeDHighlight ></TD>
<TD>ThreeDLightShadow</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ThreeDLightShadow ></TD>
</TR><TR>
<TD>ThreeDShadow</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:ThreeDShadow ></TD>
<TD>Window</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:Window ></TD>
<TD>WindowFrame</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:WindowFrame ></TD>
<TD>WindowText</TD><TD onclick=color(this.style.backgroundColor) 
STYLE=background-color:WindowText ></TD></TR>
</TABLE>

<P><TABLE BORDER=1 CELLPADDING=5px STYLE=color:black ALIGN=center> 
<TR BGCOLOR=white STYLE=cursor:default>
<TH><FONT SIZE=1>DESCRIPCIÓN</FONT></TH>
<TH><FONT SIZE=1>COLOR</FONT></TH>
<TH><FONT SIZE=1>DESCRIPCIÓN</FONT></TH>
<TH><FONT SIZE=1>COLOR</FONT></TH>
<TH><FONT SIZE=1>DESCRIPCIÓN</FONT></TH>
<TH><FONT SIZE=1>COLOR</FONT></TH>
</TR><TR>
<TD>Enlace no visitado</TD>
<TD ID=cL CLASS=mano title='document.linkColor' onclick=color(this.style.backgroundColor)></TD>
<TD>Enlace visitado</TD>
<TD ID=cVL CLASS=mano title='document.vlinkColor' onclick=color(this.style.backgroundColor)></TD>
<TD>Enlace activo</TD>
<TD ID=cAL CLASS=mano title='document.alinkColor' onclick=color(this.style.backgroundColor)></TD>
</TR></TABLE>

<H4>  Soportados por IE5+ 
y NS5+.</H4>

</BODY> 
</HTML>
Con respecto a los select , no te preocupes mucho; yo insisto sólo para justificar algún código que 'postié' más arriba.

Saludos

furoya

NOTA : Agregué a la tabla los colores de enlace que, si bien no pertenecen a la lista de colores de sistema CSS, son colores de Windows que pueden extraerse con JavaScript.


Última edición por furoya; 07/01/2004 a las 17:45
  #26 (permalink)  
Antiguo 23/05/2003, 05:57
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Furoya: Me has dejado perplejo...

Te felicito porque es ideal...
Voy a ver si se puede adaptar sin tener que cambiar el fondo de la página... Tal vez en otro elemento que acepte bgcolor...
Y perdona por no hacer lo de el select... Te prometo hacerlo pronto...

Saludos
  #27 (permalink)  
Antiguo 23/05/2003, 14:37
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Gracias por tus aplausos ...

... y sí, hay otra forma : fgColor ( foreground color ) en el documento; sólo tienes que darle su propio color a todos los demás textos de la página.

Saludos

furoya
  #28 (permalink)  
Antiguo 25/05/2003, 00:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola:

Como lo prometido es deuda, hice una implementación para que los colores oscuros tengan texto blanco, y los claros lo tengan negro, basándome en que la suma de los tres componentes RR, GG y BB suman un valor entre 0 y 768, los que dieran un valor mayor que 384 los dejé negros y el reto blancos.

La función es ésta:

Código PHP:
var ponderando 256 /2;
function 
ponderar(color)    {
    var 
rojo color.substring(13);
    var 
verde color.substring(35);
    var 
azul color.substring(57);
    var 
RR hhex.indexOf(rojo.charAt(0)) * 16 hhex.indexOf(rojo.charAt(1));
    var 
GG hhex.indexOf(verde.charAt(0)) * 16 hhex.indexOf(verde.charAt(1));
    var 
BB hhex.indexOf(azul.charAt(0)) * 16 hhex.indexOf(azul.charAt(1));
    var 
ponderado = (RR GG BB ponderando) ? "#000000" "#FFFFFF";
    return 
ponderado;

Y la página es la misma...

Ya estuve haciendo pruebas para implementar los colores del sistema, pero es más complicado de lo que pensaba...

Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:36.