Colores hsl y hsla
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 eshsl(0,100%, 50%)
, donde H = 0;
El parámetro H del color complementario ( diametralmente opuesto ) será de 180, o seahsl(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 rojohsl(0,100%,50%)
los otros dos colores tríadicos son: verdehsl(120,100%,50%)
y azulhsl(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);