CSS3 además de las formas ya existentes (hexadecimal, rgb, hexadecimal reducido y color ) proporciona 3 formas nuevas de representar los colores: Colores RGBA, Colores HSL, y colores HSLA además de la propiedad opacity.

Colores RGBA. CSS3

Es soportado por E9+, Firefox 3+, Chrome, Safari y en Opera 10+.

Añade un nuevo parámetro, el parámetro alpha o transparencia: rgba (rojo, verde, azul, transparencia). Donde los colores pueden tomar valores del 0 al 255 o del 0% al 100% y donde la transparencia puede ir del 0.0 (totalmente transparente) al 1.0 (totalmente opaco).

Ejemplo:

p
{
background-color:rgba(255,0,0,0.5);
color:rgba(0,100%,0,0.5); 
} 
<p> Los parrafos tienen fondo rojo y el texto es de color verde traslucido</p>

Colores HSL. CSS3

Los colores HSL están soportados en IE9+, Firefox, Chrome, Safari y en Opera 10+.

Los colores HSL (Matriz, Saturación, Luminosidad). La matriz se define de 0 a 360 grados donde 0-360 son rojo, 120 es verde, y 240 es azul. La saturación es un porcentaje del 0% (gris) al 100% (color claro). La luminosidad es otro porcentaje del 0% al 100% donde el 0 es negro y el 100 es blanco.

Ejemplos:

<p style='background-color:hsl(0, 0%, 100%)'    > Blanco </p>
<p style='background-color:hsl(0, 0%, 0%)'      > Negro  </p>
<p style='background-color:hsl(0, 100%, 50%)'   > Rojo   </p>
<p style='background-color:hsl(120, 100%, 50%)' > Verde  </p>
<p style='background-color:hsl(240, 100%, 50%)' > Azul   </p>

Colores HSLA. CSS3

Los colores HSLA están soportados en IE9+, Firefox 3+, Chrome, Safari y en Opera 10+.

Los colores HSLA (Matriz, Saturación, Luminosidad, transparencia). La matriz se define de 0 a 360 grados donde 0-360 son rojo, 120 es verde, y 240 es azul. La saturación es un porcentaje del 0% (gris) al 100% (color claro). La luminosidad es otro porcentaje del 0% al 100% donde el 0 es negro y el 100 es blanco. La transparencia puede ir del 0.0 (totalmente transparente) al 1.0 (totalmente opaco).

Ejemplos:

<p style='background-color:hsla(0, 0%, 100%,0.5)'    > Blanco traslucido </p>
<p style='background-color:hsla(0, 0%, 0%,0.5)'      > Negro traslucido </p>
<p style='background-color:hsla(0, 100%, 50%,0.5)'   > Rojo  traslucido </p>
<p style='background-color:hsla(120, 100%, 50%,0.5)' > Verde traslucido </p>
<p style='background-color:hsla(240, 100%, 50%,0.5)' > Azul   traslucido</p>

Ejemplo:

p
{
background-color:red;
} 
<p> Los parrafos tienen fondo rojo</p>

Próxima entrada

La propiedad Opacity en CSS3