| Artículos | 01 ABR 1998

Sacar los colores

Tags: Histórico
Técnicas y trucos de diseño en Internet
Ramón Montero.

La publicación a través de Internet supone trabajar en color . Esto puede parecer una cuestión simple, ya que estamos acostumbrados a trabajar con monitores de color y nos parece algo de lo más normal, pero coordinar bien los colores de un documento web no es tan fácil como pueda parecer, ya que por un lado existen cuestiones técnicas que nos crean restricciones, y por otro, hay que conocer las reglas fundamentales de contrastes y armonías para obtener composiciones agradables y cómodas de ver . Por otro lado, esta posibilidad de publicar en color no es tan usual como pueda parecer, ya que hasta hace poco tiempo, lo más corriente era que los documentos se imprimiesen en blanco y negro sobre papel, lo que ha llevado a acostumbrar a los usuarios a no preocuparse de las repercusiones prácticas de la utilización del color en sus documentos . Por estos motivos, vamos a ver a continuación algunas cuestiones fundamentales sobre el tratamiento del color .

El color según HTML

La especificación HTML controla los colores de los documentos a través de varias etiquetas . Las que gestionan las entidades a nivel general se especifican como atributos de la etiqueta

< body > , y así, un código como el siguiente

< body bgcolor=?white? text=?black?

link=?red? vlink=?blue?

alink=?yellow? >

indica al navegador que debe mostrar los fondos en blanco ( white ) , los textos en negro ( black ) , los hiperenlaces en rojo ( red ) , los enlaces visitados en azul ( blue ) y en amarillo ( yellow ) el vínculo que se esté activando en el momento . En el recuadro ?Colores HTML? se pueden ver algunas de las especificaciones de colores que reconocen los navegadores más usados, así como una tabla que muestra las equivalencias entre las especificaciones en inglés y en castellano .

Bien, pero hay un problema, ya que el usuario puede configurar su programa navegador para que le muestre algunos de los colores como él defina, en vez de cómo lo indique el documento . Es raro encontrar este tipo de configuración, pero por si acaso, no es mala idea solicitar que el navegante utilice las especificaciones del web que Esto se puede hacer de dos formas: indicarlo claramente con un mensaje similar a ?Si visita esta página con una configuración de colores personalizada, no podrá ver la información de forma adecuada?, o más sutilmente, especificando los colores que se van a utilizar en el documento ( ver la figura 1 ) .

Aunque se definan los colores al comienzo del código, algunos de ellos se pueden modificar de forma puntual en cualquier parte del documento, y si por ejemplo se describen palabras-enlace con diferentes colores, se mostrarán tal como se especifiquen en cada caso . Un código como el de la figura 2 muestra cómo se pueden modificar los espectros de los enlaces . La especificación particular del color de las palabras-enlace anula el valor del atributo general vlink, y siguiendo con el ejemplo anterior, si activamos los tres enlaces, sólo la palabra-enlace del primer párrafo cambiará al azul después de visitar las páginas de prueba, ya que es la única que se rige por las definiciones generales . De forma parecida se pueden cambiar los colores de los fondos y de los textos que aparecen en un documento, pero no es posible variar los adjudicados a los enlaces visitados o a los que se estén activando .

Normalmente, se desea que el visitante utilice los enlaces, así que mi consejo es que se utilice un color llamativo para definir en las páginas web los enlaces sin visitar, de tal manera que destaquen especialmente . Un color ?caliente?, como el ?rojo fuerte? llama la atención y destaca sobre los demás . Los enlaces ya visitados no deben destacar ni llamar la atención, por lo que es adecuado utilizar algún color ?frío? ( azules y verdes ) , o si no se desea un gran contraste, también es muy válido un tono rebajado del rojo, como el ?naranja? .

Descripción del color

Aunque los colores se pueden definir con las descripciones literales ya comentadas, técnicamente es más correcto hacerlo de acuerdo con el modelo de color conocido como RGB ( Red-Green-Blue, rojo-verde-azul ) .

El modelo RGB representa, de una forma exacta, cada posible color a través de una mezcla de los tres colores básicos, de tal manera que para cada uno de ellos hay disponibles 256 tonalidades . El valor 0 ( cero ) implica la menor cantidad de color y el valor 255 proporciona el máximo de dicho color, por lo tanto, una especificación válida tendrá la forma X-Y-Z, con los valores ordenados tal como indica el acrónimo RGB, o sea, primero el rojo, a continuación el verde y después el azul . Un ejemplo sería 18-120-245, que nos indica la mezcla de un rojo muy claro con un verde intermedio y con un azul oscuro .

La mayoría de las aplicaciones informáticas de dibujo y retoque fotográfico permite definir un determinado color, introduciendo los valores numéricos decimales adecuados de la terna de colores básicos ( ver figura 3 ) , pero en la descripción HTML de los colores se utiliza el formato ?hexadecimal? ( sistema numérico con base dieciséis ) , debiendo conocer la correspondencia entre los dos métodos para trabajar correctamente con cualquiera de los sistemas .

Básicamente, las 256 posibilidades en el sistema hexadecimal suponen un valor mínimo igual a 00 y un valor máximo igual a FF ( en hexadecimal se cuenta: 0, 1, . . . , 8, 9, A, B, . . . , E, F, 10, 11, . . . , FE, FF ) , de tal manera que el 88 sería el valor intermedio . Un ejemplo expresado en hexadecimal sería: 33-99-CC, y en formato HTML: #3399CC . La misma primera línea HTML del código anterior sería:

< body bgcolor=?#FFFFFF?

text=?#000000? link=?#red?

vlink=?#0000FF? alink=?#FFFF00? >

Existen muchas utilidades y calculadoras que transforman cantidades de un sistema a otro de forma automática, e incluso las propias aplicaciones de diseño suelen aceptar cualquiera de los dos formatos, resolviendo de esta forma el problema que pueda suponer tener que trabajar con los dos métodos, no obstante, tal como se verá en otro apartado de este artículo, la cuestión práctica se simplifica enormemente si se conocen las características técnicas de la publicación en color por Internet .

Introduciendo el código que se especifica a continuación en una página web, se puede implementar fácilmente la posibilidad de ver la codificación HEX de un determinado color ( ver figura 4 ) . Es muy cómodo tenerlo activo en el documento que estemos creando y eliminarlo cuando esté finalizado .

< form >

< input type=?button?

value=?Descripción de COLOR?

onclick=?var

color=prompt ( ?Escriba color . ? )

document . bgColor=color;

alert ( document . bgColor ) ? >

< /form >

De todas formas, si el lector desea transformar un número hexadecimal ( entre 0 y 256 ) al formato decimal a mano, sólo tiene que realizar la siguiente operación: ( orden_del_primer_carácter x 16 ) + orden_del_segundo_carácter . Por ejemplo, si se desea conocer el equivalente decimal de C6, hay que calcular: ( 12x16 ) +6=198 . Si el dato es FC, la operación será: ( 15x16 ) +12=252 . Si la cantidad HEX es 2A, en decimal será: ( 2x16 ) +10=42, y así sucesivamente . Si se trata de hacer la operación contraria, o sea, pasar una cantidad decimal al formato hexadecimal, hay que dividir el número entre dieciséis y formar el código ( cociente ) ( resto ) . Por ejemplo, si el dato de partida es 24, el cálculo será 24 dividido entre 16 es igual a 1 de cociente y 8 de resto; por tanto, la codificación hexadecimal será 18 . Si el número decimal es 167 y lo dividimos entre 16, obtenemos un resultado de 10 con un resto de 7, luego la

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información