Colores RGBA en CSS 3

  • Por
  • CSS
Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.
Como sabemos, los colores en HTML se expresan en valores RGB, igual que en CSS, que admite diversas notaciones para definir el color, a través de números en hexadecimal e incluso en decimal. Todo esto suponemos no será un misterio para los lectores, que sin duda habrán experimentado con CSS y probablemente estén familiarizados con las distintas notaciones para especificar color en las hojas de estilo.

Ahora queremos hablar de una nueva notación, que no es simplemente una manera nueva de expresar lo mismo, sino una que nos permite definir colores por medio de valores adicionales. Se trata de la notación RGBA, que a partir de CSS 3 está disponible para los desarrolladores.

La notación RGBA es una manera de especificar colores en la que se definen cuatro valores. Los tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parámetro es el canal Alpha, que no es más que el grado de transparencia u opacidad del color. El canal Alpha es un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco.

En el mundo del diseño quizás ya habremos visto otros formatos o sistemas que soportan colores con canal Alpha y por ello puede que estemos familiarizados con este parámetro. El formato de imagen PNG, que tanto nos gusta por soportar transparencia que se ve correctamente en todos los fondos posibles, implementa justamente este canal alpha en la definición del color para conseguir una transparencia ideal.

Ahora, por medio de los colores en RGBA en CSS 3, podremos aplicar nuevas transparencias a los colores que especificamos con CSS, abriendo nuevas posibilidades a los diseñadores sin necesidad de complicarse con pequeños trucos como el uso de imágenes de fondo semitransparentes en PNG, etc. Además, como los colores RGBA se pueden aplicar a cualquier elemento que soporte asignación de color, las aplicaciones aumentan todavía más. El único pero, al menos a la hora de escribir este artículo, es que CSS 3 no está ampliamente soportado por todos los navegadores. Por ejemplo Internet Explorer 8 no lo soporta por el momento.

Nota: En DesarrolloWeb.com hemos publicado varios artículos sobre CSS 3, que se pueden acceder desde el siguiente enlace: introducción a CSS3.

Notación de color RGBA

Para definir un color RGBA, se deben especificar cuatro valores, de la siguiente manera:

rgba(255, 125, 0, 0.5);

Los tres primeros valores son números en sistema decimal, que corresponden con los valores de rojo, verde y azul. Siempre tienen que ser números entre 0 y 255.

El cuarto valor es un número entre 0 y 1. Por ejemplo 0 sería totalmente transparente, 1 sería totalmente opaco y 0.5 sería una transparencia al 50%, es decir, mitad opaco mitad transparente.

Ejemplos de estilos CSS con colores definidos por RGBA

Ahora veamos varios ejemplos de colores definidos con CSS y la notación RGBA.

<div style="background-color: rgba(0, 0, 255, 0.1);">Esta capa tiene fondo azul, casi transparente</div>

<span style="color: rgba(0,255,0,0.8);">Este texto es verde y tiene un poco de transparencia</span>

Pero aparte de estos ejemplos, lo ideal es ver el efecto de transparencia en marcha, para poder hacernos una idea más aproximada de las posibilidades. Para ello hemos construido una página donde se muestran varias capas con colores y transparencias, tanto en el fondo como en el texto.

Ver ejemplo de colores CSS RGBA.

Pero nuevamente llamamos la atención de los lectores sobre el hecho que, dependiendo del navegador que se utilice, se verán o no los distintos colores, puesto que las CSS 3 no son compatibles con todos los sistemas. Este ejemplo funcionará bien en navegadores que cumplen los estándares, como Firefox, Chrome o Safari, pero no en navegadores como Internet Explorer, que hacen la guerra por su cuenta.

El código del anterior ejemplo es el siguiente:

<html>
<head>
   <title>Colores RGBA con CSS 3</title>
<style type="text/css">
div.cuadrado{
   width: 150px;
   height: 40px;
   border: 1px solid #dddddd;
   margin: 5px;
}
div.textogrande{
   font-family: verdana, arial, helvetica;
   font-weight: bold;
   font-size: 40pt;
}
</style>
</head>

<body>
<h1>Colores RGBA con CSS 3</h1>

<h2>Ejemplo de capas con fondo azul y varias transparencias</h2>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 1);"></div>

<h2>Ejemplo de capas con fondo verde y varias transparencias, sobre una capa con fondo amarillo</h2>
<div style="background-color: #ff3; padding: 10px;">
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 1);"></div>
</div>

<h2>Ejemplo de capas con fondo naranja y varias transparencias, sobre una capa con una imagen de fondo</h2>
<div style="background-image: url(http://www.desarrolloweb.com/articulos/ejemplos/photoshop/fondo-nieve/nieve.gif); padding: 10px;">
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 1);"></div>
</div>

<h2>Ejemplo de texto de color rojo y varias transparencias, sobre una capa con una imagen de fondo</h2>
<div style="background-image: url(http://www.desarrolloweb.com/articulos/ejemplos/photoshop/fondo-nieve/nieve.gif); padding: 10px;">
<div class="textogrande" style="color: rgba(200, 0, 0, 0.3);">Este texto está para que se vea que puede ser también medio transparente</div>
<div class="textogrande" style="color: rgba(200, 0, 0, 0.7);">Este texto está para que se vea que puede ser también medio transparente</div>
</div>

</body>
</html>

Si se permite mi opinión, es una pena que esta gestión de color con canal alpha no esté disponible en Internet Explorer 8, en el momento de escribir estas líneas, porque así se hace complicado usar este tipo de efectos. No obstante, es de suponer que las personas de Microsoft pondrán al día su navegador un año de estos, para hacerlo compatible con las CSS 3 y los colores RGBA.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Elfowan

27/8/2009
soporta hexadecimal
Buenas he visto vuestro articulo, y lo que no se es si es posible dar los valores de los colores en hexadecimal, ff,ab,c3 , lo he probado y no me ha funcionado , quisiera saber si coje valores ne hexadecimal, si no hiciera me parece una autentica putada. A ver si alguien me lo puede confirmar. Gracias.

Joaquin

01/9/2009
Colores RGB
Esto avanza muy rápido cada día pero avanza en mal sentido, puesto que después no funciona en IE o firefox o Safari, etc y encima en nuestros trabajos se creen que es nuestra culpa.
Lo mejor dejar este mundillo de avances no seguros y mierdas de sueldos.

Manuel

01/9/2009
No funciona JE JE
Hoal gracias por el tutorial pero no funciona IE 6 asi que no es de gran ayuda para mi por que desafortunamete este navegardo es usado por el 30% de usuarios en internet mietras win xp sea el sistema preferido por muchos este navegador no sedaparesera
gracias

frafun.com

04/9/2009
Hexadecimal PHP
Algo has tenido que hacer mal, porque sí es posible realizar esa operación con los colores.

mktmarco

23/12/2009
excelente articulo
es lo que buscaba gracias por tan buen articulo facil de entender

GNU-Tony

27/9/2011
Es un gran avance, si señor
Es magnifico... cada día alucino mas con CSS 3, no solo libera un montón de código, las transparencias son un recurso estético del que me encanta abusar, siempre han aportado diseño y elegancia, y gracias a CSS 3 hay un sinfín de posibilidades que antes solo se podían hacer con imágenes y por lo tanto librando peso.
Respecto a los usuarios de I.E., si no les importa sacrificar estilo a cambio de.... ¿nada?, considero que es su elección, al igual que a los usuarios de Windows en general, a no ser que les encanten los videojuegos o trabajen con flash... aunque si CSS continua evolucionando de esta manera, me da a mi que su tendencia va a ser la de desaparecer...

Felicidades y gracias a DesarrolloWeb.com

cesar

13/1/2012
respuesta coman sus palabras
es divertido ver que las personas no quieren salir del cascaron, leo los comentarios del 2009 y se quejan que no funciona, que hay que salir del mundo de las pruebas.

Como quiera volver atras y aprender esto con mas anticipacion, EL FUTURO DE AYER ES EL PRESENTE DE HOY

Edwin

20/6/2014
funciona..
ami me funciono ala perfeccion, gracias por este aporte colores RGBA en CSS3. me anda de maravilla porque uso Linux..