Close
Image Alt

Utilizando CSS3 hoy (2): Colores y opacidad utilizando RBGA

RGB (red, green, blue, es decir rojo, verde, azul) es un modelo que permite obtener cualquier color a partir de la combinación de esos tres colores. Los que conocéis CSS estáis habituados a especificar un color por su valor hexadecimal, por ejemplo #000000 para el negro. Pero todo color tiene también su valor RGB, que en el caso del negro es R:0 G:0 B:0. En el extremo contrario estaría el blanco que sería R:255 G:255 B:255.

Hasta ahora podíamos definir un color no sólo mediante su valor hexadecimal, sino también según sus valores RGB. Por ejemplo. para poner un fondo negro a un div:

rgb

Pero gracias a CSS3 podemos incluir un valor más para cada color: su opacidad. Entonces hablaríamos de RGBA, siendo A=Alpha, que nos permitirá especificar la opacidad del color. El valor de A es un número entre 1 y 0, siendo 1 totalmente opaco y 0 totalmente transparente. Si seguimos el ejemplo anterior del fondo negro y queremos que tenga una opacidad del 50% haremos:

rgba

Como vemos hemos situado su opacidad al 50% por lo que si hubiera algo debajo de ese DIV se vería.

Existe ya una propiedad en CSS3 para conseguir la opacidad de un elemento. Se trata de opacity. Por ejemplo:

Hemos definido el color del fondo y luego le aplicamos “opacity”. El resultado parece ser el mismo:
opacity

A primera vista no hay diferencias, hasta que incluimos algo dentro del div. Vamos a verlo. Supongamos que, simplificando al máximo, tenemos:

Es decir un elemento “div” que tiene en su interior un elemento “p” con la palabra “TEXTO”. Vemos que hemos aplicado al elemento p el color negro (#000;) lo mismo que al fondo del elemento DIV. Pero además al elemento DIV le hemos aplicado una opacidad del 50% Esto es lo que vemos:
opacity2

¿Donde está el texto? No se ve por una razón: con opacity no sólo se altera la opacidad del elemento sino además se altera también la opacidad de cualquier elemento que se encuentre dentro del primero, en este caso el elemento p. Es decir, el elemento p tiene aquí también una opacidad del 50% y entonces tiene el mismo color que el elemento div y por eso no se ve.

Vamos a hacerlo ahora con RGBA:

Ahora lo que veremos es esto:
rgba2

Como vemos con RBGA se afecta sólo a la opacidad del elemento sobre el que se aplica la propiedad, sin afectar a los elementos que se encuentren en su interior.

La propiedad RGBA en estos momentos la soporta Safari, Chrome, Firefox 3 y Opera 10. Internet Explorer (que raro) no la soporta. Entonces si se quiere utilizar un fondo para un elemento (seguimos con el ejemplo del negro) y utilizar la propiedad RGBA para los navegadores más avanzados deberíamos establecer también el fondo para Internet Explorer:

Si, en Internet Explorer se verá distinto, sin opacidad. Pero si esto no afecta a la usabilidad ni a la accesibilidad del sitio es totalmente válido su uso.

Por último señalar la facilidad que nos da RGBA para el uso de una gama de colores en una web determinada. Supongamos que queremos utilizar distintas tonalidades a partir del mismo verde. Utilizando distintos niveles de opacidad podemos tener variaciones diferentes para utilizar por ejemplo como color de los enlaces y del hover de los enlaces:

rgba3

Otras lecturas recomendadas

Lea Verou, propone un método para poder utilizar fondos RGBA en Internet Explorer: Bulletproof, cross-browser RGBA backgrounds, today
24Ways.com: Working With RGBA Colour

Comments

  • Antonio

    Muy bueno.. no daba con ello! Sigue funcionando en el 2012 😉
    Gracias

    31 October, 2012
    reply
  • Cuesta encontrar tutoriales donde ademas de ponerte codigo, lo entiendas y este bien explicado.
    Aqui está coloreado hasta el texto (copiable) de los [code], perfectamente explicado y tan simple que hasta me puse un momento para probarlo y en que navegadores funciona (A dia de hoy en todos).
    Yo usaba una imagen png y la transparentaba y luego ponia texto, donde vas a parar… teniendo esta maravilla.

    Como lo expliques todo tan bien… jaja Un saludo.

    8 November, 2012
    reply
  • Gracias! me sirvio mucho y esta muy bien explicado

    22 February, 2013
    reply
  • Alalá

    Por poco no encontraba cómo quitar la opacidad al texto, muchas gracias!!

    12 September, 2013
    reply
  • Mauricio

    excelente, muchas gracias, llevaba un buen tiempo con dolores de cabeza (2013) :like:

    7 October, 2013
    reply
  • Ulises

    Hola!
    Tengo una duda. Utilizando RGB, en todos los navegadores se ve bien, pero al abrir la página en Google Chrome todos los colores utilizados en RGB se ven en “negativo”. ¿Cómo puedo evitar esto? Gracias.

    13 September, 2014
    reply
  • mau

    util informacion!! Gracias!

    11 November, 2015
    reply
  • Roos Bautista

    Justo lo que necesitaba, Gracias!

    16 February, 2016
    reply
  • like para este post

    11 January, 2017
    reply
  • Muy buen post, muchas gracias. Me ha solucionado un duda que tenia.

    20 February, 2018
    reply
  • Muchísimas gracias por la información. Está muy bien explicado. Siempre me hacía un lío con la opacidad.

    4 April, 2018
    reply
  • Me ayudo bastante para mi proyecto, más de lo que pensaba.

    9 October, 2018
    reply
  • exellente articulo !!!

    17 November, 2018
    reply

Post a Comment