RGBA: Los colores transparentes

Cuando queremos que "algo" tenga un determinado color, establecemos ese color utilizando algún código, un valor hexadecimal, un valor expresado como RGB() o una palabra que lo identifica:

color: #FF0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: red;

Todos ellos harán lo mismo, mostrar algo de color rojo. Es lo que se llama el modelo RGB (Red Green Blue) donde cada color está compuesto por una parte de rojo, una parte de verde y una parte de azul y las diferentes proporciones de estos componentes genera todos los colores posibles.

Como cada componente puede variar entre 0 y 255, tenemos 256 variantes que van desde rgb(0,0,0) o #000000 que genera un color negro hasta rgb(255,255,255) o #FFFFFF que genera un color blanco. De esa manera tenemos 256*256*256* = 256^3 = 16777216 colores diferentes.

A medida que la tecnología avanzó, la cantidad de colores disponibles fue aumentando. En algún momento pasaron del "blanco y negro" a soportar 8 colores, luego 16 (4 bits), luego 256 (8 bits), luego 65536 (16 bits) y ahora el llamado TrueColor (24 bits) (más información).

Cualquiera diría que 16 millones de colores es más que suficiente ya que el ojo humano difícilmente distinga ciertas variaciones sutiles pero, ahora nos enfrentamos con una nueva alternativa, los llamados colores RGBA (Red Green Blue Alpha) que agregan un nuevo factor, el alpha channel, es decir, la opacidad o transparencia que sigue el mismo esquema de porcentajes: el 0% representa la transparencia absoluta y el 100% representa la opacidad absoluta que es la forma en que tradicionalmente vemos los colores.

Esto es fácilmente visible cuando vemos algunas imágenes en formato PNG y no es un avance sin costo ya que pasamos de 24 bits a 32 bits es decir, imágenes más pesadas.

Lo interesante es que el uso de este canal alpha no está limitado a las imágenes, también es posible aplicarlo a algunas propiedades CSS aunque sólo está disponible cuando el navegador puede interpretarlo ya que se trata de una posibilidad contemplada en el CSS3, algo que en este momento, sólo soportan algunos navegadores.

El valor, al igual que en la propiedad opacity, es expresado como porcentaje decimal, yendo de 0 (transparencia total) hasta 1 (el valor por defecto). En este ejemplo, al color rojo se le aplicaron diferentes valores al canal alpha:

0.0

0.2

0.4

0.6

0.8

1.0

Ver/Ocultar imagen si el navegador no lo muestra: [+]

color: rgba(255,0,0,0);
color: rgba(255,0,0,0.2);
color: rgba(255,0,0,0.4);
color: rgba(255,0,0,0.6);
color: rgba(255,0,0,0.8);
color: rgba(255,0,0,1);

Funciona correctamente en las versiones más recientes de Filefox 3, Safari, Chrome y Opera 10 pero no así en Internet Explorer, en este navegador, la propiedad será ignorada por lo que no habrá color definido.

Para evitar eso, debemos establecer el color de dos modos, primero, de forma "normal" y luego como rgba(), de esta manera, IE usará la primera y el resto de los navegadores la segunda. Por ejemplo:

Sed porta, turpis eu interdum facilisis, dui quam volutpat lorem, eu consequat dui magna vel arcu.

<div style="background-color:#FF0000;background-color: rgba(255,0,0,0.5);">
 .........
</div>

Los valores de rgba() pueden ser utilizados en las propiedades background, border y color y, teniendo la precausión de verificar los resultados en los diferentes navegadores, es una buena alternativa, diferente de la propiedad opacity ya que sólo afecta a elementos individuales.

Cras porttitor sodales lectus, ut tincidunt lacus posuere non. Mauris nunc urna commodo viverra et, ornare non tellus! Duis ac arcu lorem, in iaculis erat! Nulla quis tellus ut tortor orci aliquam.

efecto onmouseover