Colores hsl y hsla

facebook-svg gplus-svg twitter-svg

Como una novedad en el CSS3 ya podemos utilizar los colores hsl en nuestras hojas de estilo.
A diferencia de los colores hex o rgb, los colores hsl son mucho más intuitivos y mas fácil de utilizar, y ya veremos porque.


div{background-color:hsl(0,100%,50%)/* hsl( hue, saturation%, lightness% )*/;}

Pero ¿que son los colores hsl?
HSL es el acrónimo de hue ( matiz ), saturation ( saturación ), lightness ( luminosidad ).
Mirémoslos detenidamente y por partes:

Hue ( matiz )

Pensemos un momento en la rueda de los colores. Cada grado de esta rueda es un color. De aquí que "hue" es un número de 0 a 359. A lo largo de los 360° el color cambia de rojo ( 0° ) a verde (120°) a azul ( 240°) y de nuevo a rojo ( 360° ).

Puedes hacer clic en la rueda de los colores para ver el valor hsl del color.

Conociendo el valor "hue" de un color podemos calcular fácilmente, casi de manera intuitiva, el color complementario de este: o sea el color diametralmente opuesto.

Por ejemplo:
El código hsl para rojo es hsl(0,100%, 50%), donde H = 0;
El parámetro H del color complementario ( diametralmente opuesto ) será de 180, o sea hsl(180,100%,50%), un color a medio camino entre verde y azul.

Por colores tríadicos entendemos un grupo de tres colores situados a 120° uno del otro en el círculo cromático.
De nuevo: calcular los colores tríadicos es una tarea casi imposible si conocemos solo el código hex o rgb de nuestro color, pero vuelve a ser una tarea muy fácil si conocemos el código hsl de nuestro color.

Por ejemplo:
En el caso del rojo hsl(0,100%,50%) los otros dos colores tríadicos son: verde hsl(120,100%,50%) y azul hsl(240,100%,50%)

Convierte facilmente tus colores de hex a rgb a hsl

Saturation ( saturación )

La saturación de un color se representa en porcientos. Por lo cual la saturación puede tomar valores de 100% a 0% ( grises ).

100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%

Lightness ( luminosidad )

Representamos la luminosidad de un color en porcientos. Por lo cual la luminosidad puede tomar valores entre 100% ( blanco ) y 0% ( falta de color o sea negro ).

100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%

Colores hsla

Además de los códigos hsl podemos utilizar los códigos hsla donde a, exactamente como en el caso de los colores rgba, representa el valor alpha.

background-color: hsla(0, 100%, 50%, .8);