25

9

RGBA: colores transparentes

En HTML y CSS la forma más básica de establecer un color es con el sistema de color RGB en notación hexadecimal (por ejemplo: #FF2600), pero también se puede expresar de forma decimal del número 0 al 255 y actualmente gracias a CSS3 podemos añadirle el canal alpha (con el que establecemos el nivel de transparencia del color).

Estructura de RGBA

Con la notación RGB establecemos por separado la cantidad de luz de color rojo (r), verde (g), y azul (b) para crear el color final, teniendo en cuenta que si no hay luz (#000000) el color será el negro y si hay mucha (#FFFFFF) el color será blanco.

Para usar este sistema de color debemos de usar rgba(R,G,B,a), que lo podemos usar como habitualmente usábamos el sistema de color hexadecimal.

Estructura: rgba(R,G,B,a)

1. /* Con esto pondremos el fondo del DIV negro y 30% de transparente y la letra verde con 80% de transparencia */
   
2. div{
   

color:rgba(138,221,45,0.8);


background:rgba(0,0,0,0.3);


3. }
   

Elegir el color

Para elegir el color podemos transformar un código hexadecimal a decimal o usar una paleta de colores para conseguirlo.
Cambiar la opacidad no tiene ninguna complicación, simplemente establecemos del 0 al 1 el grado de opacidad, siendo 1 totalmente opaco, 0.5 semi-transparente y 0 transparente.

1. /* Es el color de los DIV de arriba del primero al último */
   
2. background:rgba(138,221,45,1);
   
3. background:rgba(138,221,45,0.8);
   
4. background:rgba(138,221,45,0.6);
   
5. background:rgba(138,221,45,0.4);
   
6. background:rgba(138,221,45,0.2);
   
7. background:rgba(138,221,45,0);
   

Podemos transformar manualmente el código en notación hexadecimal o usando cualquier conversor.

#8add2d

rgba(136,221,45,1)

En el color hexadecimal tenemos que separar los dígitos en grupos de dos y transformarlo en decimal.