Colores HTML para páginas Web - Código hexadecimal en RGB

Éste es un buen momento para ver cómo se definen los colores en HTML.

En nuestro ejemplo anterior hemos establecido un color de fondo amarillo (yellow).

Podemos establecer los colores de fondo con su nombre en inglés, por ejemplo: red, pink, skyblue o lightgreen. Esto es válido en la mayoría de los casos.

De hecho, existe una variedad suficiente de nombre de colores como para satisfacer todas nuestras necesidades.

Pero existe una manera alternativa de establecer el color. Para ello necesitamos saber cómo se crean los colores en el monitor.

Para definir un color cualquiera en el monitor se hace a partir de una combinación de tres colores: rojo, verde y azul.

Todos los colores que pueda ver en su monitor están formados a partir de juntar determinadas proporciones de estos tres colores.

Por esta razón los llamamos colores primarios (o también colores básicos).

Y si está pensando que en el colegio nos decía el “profe” que los colores primarios eran el magenta, el cyan y el amarillo, le diré que sí, pero no. Aclarémoslo.

El magenta, el cyan y el amarillo son colores primarios de la tinta. A partir de esos tres se forman los demás colores en tinta (para imprimir).

Por ejemplo, el verde está formado por azul y amarillo. Si mezcla los tres colores primarios tinta, obtendrá el negro. Por esta razón, a la mezcla de estos tres colores-tinta se la conoce como síntesis substractiva.

Sin embargo, el monitor de su ordenador emite luz. Y los colores de la luz, o colores luz, se basan en otros tres colores primarios que son, como hemos dicho, el rojo, el verde y el azul. La mezcla de estos tres colores en la mayor cantidad posible da como resultado el blanco.

Por esta razón se dice que los colores-luz se mezclan por síntesis aditiva. El esquema de esto se ve en la siguiente figura:

Como hemos dicho, nosotros vamos a usar los colores luz, ya que, en definitiva, luz es lo que emite el monitor.Cualquier color que necesitemos crear se forma mezclando distintas proporciones de rojo, verde y azul.

Le podemos indicar a nuestro código HTML un color cualquiera en el que cada uno de los colores primarios reciba un valor entre 0 y 255. Esto hace un total de 256 posibles proporciones para cada uno de tres colores primarios.

Dicho así, a lo mejor no impresiona demasiado, hasta que se pone uno a pensar que el número resultante de posibles combinaciones es de 256*256*256=16,777,216 colores posibles.

Así pues, el amarillo estaría formado por el máximo posible de rojo, el máximo posible de verde y nada de azul, es decir, sería la combinación 255.255.0.

Los valores de los colores primarios los expresaremos siempre en ese orden: en primer lugar la proporción de rojo, después la de verde y por último la de azul. Por eso, a este formato de colores se le conoce como RGB (Red, Green, Blue).

En muchos libros y programas verá que se refiere a este formato con el nombre traducido RVA (de Rojo, Verde, Azul).

Sin embargo, no es tan fácil. Los creadores de HTML decidieron que había llegado el momento de complicarnos un poco la vida y han hecho el lenguaje de tal modo que los valores de los tres colores primarios hay que expresarlos en hexadecimal y con dos dígitos.

Como sabe, la numeración hexadecimal permite emplear las letras de la A a la F, asignándole los valores numéricos de 10 a 15 correspondientemente.

Así pues, el 0 decimal sería 00 hexadecimal, el 15 decimal sería 0F en hexadecimal, el 16 decimal sería 10 en hexadecimal, el 255 decimal sería FF en hexadecimal, y así sucesivamente.

Esto, en realidad, viene dado por una serie de normas y fundamentos de numeración que se establecieron en los primeros tiempos de la informática (si, cuando los ordenadores iban a válvulas) y que siguen vigentes en nuestros días por haber demostrado su eficiencia en muchos terrenos.

Por lo tanto , el color amarillo, que lo definíamos como 255 de rojo, 255 de verde y 0 de azul, expresado en hexadecimal sería FFFF00.

Los primeros dos dígitos expresan la proporción del rojo (FF=255), los dos siguientes la del verde y los dos últimos la de azul. Además HTML nos pide que añadamos, delante de la combinación de colores, el signo # (conocido popularmente como almohadilla o cucarachita).

Por lo tanto la siguiente sentencia:

<body bgcolor="yellow">

Sería equivalente a:

<body bgcolor="#FFFF00">

Este mismo sistema que hemos aprendido para fijar el color de fondo nos servirá para establecer los colores de texto y de otros elementos de la página web.

Existen lo que se llaman colores seguros para la web. Son una paleta de 216 posibles combinaciones.

Son colores seguros para web aquellos que se visualizan exactamente igual en una plataforma PC que en una Macintosh, ya sea con un navegador Internet Explorer o con Firefox.

Una vez más, debemos tener en cuenta que estamos trabajando para la red. Nuestra página puede ser vista por usuarios con distintas plataformas y deben poder verla igual.

Los colores seguros para la web son aquellos que están formados por cualquier combinación de los valores 00, 33, 66, 99, CC o FF. Así pues, los siguientes colores son ejemplo de colores seguros para la web:

• #FF66CC
• #FFFFFF
• #00CC99
• #FF3366

Y, en general cualquiera que cumpla con la condición de que los tres valores (el de rojo, el de verde y el de azul) respondan a uno de los valores especificados.

También debemos de tener en cuenta que el color de texto debe contrastar con el de fondo, de tal forma que la lectura de la página sea cómoda para el usuario. No olvide que, ya de por sí, leer sobre el monitor es mucho más incómodo que leer sobre papel.

Si además el texto apenas destaca sobre el fondo, estaremos invitando al usuario a que se vaya a otra página. En general, optaremos por tonos pastel o tonos apagados para el fondo.

Los colores chillones se emplean casi exclusivamente en páginas de juegos, de música moderna o erótica. La combinación de texto negro sobre fondo blanco suele dar buen resultado en muchas ocasiones.

El valor que se le pasa a un atributo puede ir indistintamente entre comillas o sin ellas. Por ejemplo, las dos sentencias que aparecen a continuación son equivalentes:

• <body bgcolor="#FFFF00">
• <body bgcolor=#FFFF00>

Sin embargo, si ponemos comillas al principio del valor, deberemos ponerlas al final, y viceversa. Por ejemplo, las siguientes sentencias no funcionarían adecuadamente.

• <body bgcolor="#FFFF00>
• <body bgcolor=#FFFF00">

Los valores hexadecimales de los colores los representaremos en letras mayúsculas.

En realidad, funcionaría igual si los pusiéramos en minúsculas. Implementamos mayúsculas para estos valores por una cuestión de legibilidad del código.

Ahora que has leido este artícilo podrás entender el siguiente chiste