Colores RGBA, HSL y HSLA en CSS3

Tradicionalmente en CSS los valores de los colores se han expresado en valores RGB. CSS3 da una vuelta a este sistema y añade por un lado el canal alfa, y por el otro los sistemas HSL y HSLA.

Estos nuevos sistemas nos ayudan mucho cuando estamos trabajando con SASS o STYLUS...

COLORES RGBA

CSS3 nos permite añadir un canal alfa (de transparencia) al sistema de color RGB, esta nueva notación a la que llamaremos rgba permite gracias a su cuarto canal la posibilidad de indicar la opacidad en tantos por 1, es decir, tomando 0 como la máxima transparencia y 1 como la máxima opacidad.

Antes cuando se queria crear alguna capa con transparencia creabamos una imagen png con la opacidad que deseeabamos y guardabamos conservando el canal alfa. Después en el css definiamos esa imagen de fondo y eventualmente le dabamos el valor 

transparent.

Ahora" class="redactor-autoparser-object">https://gist.github.com/379384... solamente necesitamos definir el color con el modelo RGBA. Su uso es el mismo que rgb(r,g,b); pero añadiendo el cuarto valor:

Además" class="redactor-autoparser-object">https://gist.github.com/379384... este tipo de color actúa sobre cualquier elemento susceptible de atribución de color, como los textos, pero para no perder las costumbres, Internet Explorer 8 no da soporte a este modelo por lo que para verlo tendremos que usar una versión 9 o superior del programa de Microsoft.

COLORES HSL Y HSLA

CSS3 añade además un nuevo modelo de color conocido como HSL. Estas siglas provienen del inglés Hue, Saturation, Ligthness o lo que es lo mismo, tono, saturación y brillo. ( Tabla )

El modelo hsl es tal vez el más intuitivo de los modelos de color digitales, la sintaxis es la siguiente:

Nótese" class="redactor-autoparser-object">https://gist.github.com/379393... que el valor tono puede tomar valores del 0 al 360 donde:

• 0, sería el rojo.
• 120, sería el verde.
• 240, sería el azul.
• 360, volvería a ser rojo.

Además, como en el caso del modelo RGB, al HSL se le puede añadir un canal alpha para definir la transparencia del color. El resultado en código sería el siguiente: