Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

HSLA: colores transparentes

En el artículo anterior veíamos la notación de color RGBA, donde establecíamos el color modificando el grado de luz roja, verde y azul (y además con el canal alpha la opacidad).
Con HSLA podemos establecer el color especificando el tono (hue), saturación (saturation), brillo (lightness) y el canal alpha.

hsla(0,100%,100%,1)

hsla(120,100%,100%,1)

hsla(240,100%,100%,1)

hsla(0,100%,75%,1)

hsla(120,100%,75%,1)

hsla(240,100%,75%,1)

hsla(0,100%,50%,1)

hsla(120,100%,50%,1)

hsla(240,100%,50%,1)

hsla(0,50%,50%,1)

hsla(120,50%,50%,1)

hsla(240,50%,50%,1)

hsla(0,0%,50%,1)

hsla(120,0%,50%,1)

hsla(240,0%,50%,1)

Estructura HSLA

El sistema HSL no es un sistema que comúnmente se haya usado en diseño web, pero si es usado en otros ámbitos como en el de la edición fotográfica o en el del diseño (en general).
La diferencia entre RGB y HSL es que el primero se establece la cantidad de luz y el segundo tomamos un color y le cambiamos la saturación y el brillo.
Parámetros de HSLA:

Tono (hue): puede ser cualquier valor entre 0º y 360º y forma una "rueda de color", donde podemos establecer cualquier color ([0º=rojo], [120º=verde], [240º=azul]).
Saturación (saturation): este valor es un porcentaje (de 0% a 100%) donde 0% conseguimos que no haya color, es decir que tengamos una escala de grises, y con el 100% tenemos la totalidad del color.
Brillo (lightness: este valor también es porcentual, y controla el brillo del color, con el 0% tenemos el color negro, con el 100% el color blanco y con el 50% tenemos color.
Alpha: este valor va del 0 al 1, donde 0 es transparente y 1 es opaco.


							Estructura: hsla(H,S,L,a)	



						
								/* Con esto pondremos el fondo del DIV rosa y 30% de transparente y la letra azul con 80% de transparencia */

								div{

							
									color:hsla(245,100%,60%,0.8);

									background:hsla(320,75%,60%,0.3);

							
								}

Usar fácilmente los colores

La gran ventaja que tiene este sistema ante RGB es que se puede variar el color con mucha más facilidad, ya que con cambiar el tono cambiamos el color, sin afectar en el brillo y la saturación.
En el siguiente ejemplo veremos como verticalmente varia el color y permanece teniendo una intensidad similar.

Comentarios