31 ene 2012

CSS | Colores HSL y HSLA

Colores HSL
Los valores de color HSL  son compatibles con IE9 +, Firefox, Chrome, Safari, Opera.
HSL es sinónimo de matiz, saturación y luminosidad. es un modelo de representaciones considerado "natural", ya que se acerca bastante a la percepción fisiológica del color que tiene el ojo humano.


El modelo HSL consiste en descomponer el color según criterios fisiológicos:
  • Matiz, que corresponde a la percepción del color,
  • Saturación, que describe la intensidad o palidez del mismo,
  • Luminosidad, que indica el grado de claridad u oscuridad de un color.


"Matiz" es un valor que representa el ángulo en el circulo de color (de 0 a 360), 0 o 360 es rojo, 120 es de color verde, 240 es de color azul. La "saturación" es un valor porcentual y la "luz" también 0% es de color negro, 100% es de color blanco.


A simple vista parece complicado trabajar con este formato pero no lo es, el valor de color HSL se considera mas intuitivo que el RGB, de hecho, cuando tenemos definido un color, es decir un matiz, podemos hacernos una idea preconcebida de lo que pueden generar los cambios tanto en la saturación como en la luminosidad.

Colores HSLA

Valores de color HSLA  son una extensión de los valores de color HSL con un canal alfa - que especifica la opacidad del objeto.  la sintaxis es la siguiente:


El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (totalmente opaco).Tomando como referencia el ejemplo anterior le añadiremos un canal alfa al color de fondo:



Hasta la próxima!!!

No hay comentarios:

Publicar un comentario