Usando el método HSL para seleccionar colores en CSS3

Una de los puntos fuertes de CSS3 es el uso del color para nuestros desarrollos. Al tratamiento habitual con RGB, podemos sumarle otro método llamado HSL: Hue (matiz), Saturation (saturación) y Lightness (luminosidad).

Con este método tenemos un color base, que tiene un rango de 0 a 360, y un porcentaje de saturación y otro de luminosidad. A partir de este color base o matiz, podemos modificar los porcentajes de saturación (reduciéndolo nos acercamos a tonos grises y aumentándolo subimos su intensidad) y de luminosidad (aumentándolo nos acercamos al blanco y reduciéndolo al negro) y encontrar variaciones del mismo color que nos pueden ser muy útiles para crear una paleta adecuada en nuestro desarrollo.
Su representación es muy sencilla. Para poner el color #E100FF  de fondo en un div tendríamos que indicar lo siguiente en nuestra hoja de estilos:

#contenedor { background-color: hsl(293, 100%, 50%); }

Si queremos obtener además una transparencia del 75% en nuestro div, solo tendremos que cambiar el selector y usar hsla:

#contenedor { background-color: hsla(293, 100%, 50%, 0.75); }

Como herramienta útil os dejo HSL Color Picker de Brandon Mathis, que a partir de un color en RGB podemos obtener su equivalente en HSL y “jugar” con su matiz, saturación y luminosidad para obtener el color que deseemos.
http://hslpicker.com
Os dejo también enlace a la recomendación del W3C:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color

Write a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *