Colores en CSS3
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>