Los colores son los componentes más importantes utilizados para dar una mejor apariencia a cualquier aplicación o sitio web. Puede agregar colores a los elementos HTML utilizando diferentes propiedades de CSS. En CSS, hay tres métodos avanzados, como RGB, código HEX y HSL, que se pueden utilizar para especificar los colores a los elementos HTML.

Esta publicación lo guiará sobre los métodos de color HSL y HSLA. Entonces, vamos a sumergirnos!

¿Qué son los colores HTML HSL??

Los colores HTML se pueden usar especificando el tono, la saturación y la ligereza utilizando el método HSL (). El formato de función que usamos para indicar que el color HSL se menciona a continuación:

HSL (tono, saturación, ligereza)

Discutamos uno por uno!

• "matiz": Hue es el color básico en la rueda de color. Se selecciona de la rueda especificando el grado de 0 a 360 en la rueda de color. Por ejemplo, 0 indica rojo, 120 representa verde y 240 produce el color azul.
• "saturación": La intensidad del color se conoce como saturación. Es el valor porcentual donde el 100% indica el color puro, el 50% indica que el color tiene un tono de gris 50% y el 0% representa el gris completo, lo que significa que no podemos ver ningún color.
• "ligereza": La ligereza muestra cuánta luz queremos agregar al color. También es un valor porcentual donde el 100% de la ligereza define el blanco, el 0% define el color negro y el 50% define el color normal.

Ejemplo

En el archivo HTML, primero, agregue un DIV y agregue un encabezado, y un párrafo dentro de él:

Nombre del tema: equipo

Somos un equipo. Trabajamos para una misión común.

Ahora, peinaremos de la siguiente manera:

• El "ancho"El valor de la propiedad del DIV se establece como"100%".
• "altura" como "200px".
• Asignar el "color de fondo"Propiedad como"HSL (233, 63%, 89%)", Donde 233 indica HUE, el 63% representa la saturación y el 89% representa la ligereza.
• El "tamaño de fuente"El valor se establece como"30px".
• El "texto alineado"El valor de la propiedad se establece como"centro".

div
Ancho: 100%;
Altura: 200px;
color de fondo: HSL (233, 63%, 89%);
tamaño de fuente: 30px;
Text-Align: Center;

Ahora, diseñe el

etiqueta al proporcionarle color HSL. Para aplicar color al texto, utilizaremos el "color"Valor de propiedad como"HSL (273, 99%, 28%)":

H1
Color: HSL (273, 99%, 28%);

Asignemos un color HSL diferente al

etiqueta. Para hacerlo, el "color"El valor de la propiedad se establece como"HSL (12, 94%, 25%)":

pag
Color: HSL (12, 94%, 25%);

Aquí hay un resultado de los colores HSL agregados:

Hay una extensión del método de color HSL conocido como HSLA.

¿Qué son los colores HSLA??

Los colores HSLA se pueden definir como el modelo de color HSLA, ya que es una extensión de HSL. La sintaxis de la función hsla () se da de la siguiente manera:

hsla (tono, saturación, ligereza, alfa)

Aquí, el valor alfa tiene un rango entre "0.0" a "1.0", Donde 0.0 produce completamente transparente y 1.0 produce completamente opaco.

Ejemplo

Tomemos un ejemplo para aplicar los colores HSLA a los encabezados adicionales:

HSLA (89, 100%, 64%, 0.5)

HSLA (89, 100%, 64%, 1)

A continuación, aplique los colores HSLA como fondo a los encabezados adicionales con "0.5" y "1"Valores alfa, respectivamente. Tenga en cuenta que los valores de los otros parámetros son los mismos:

.encabezado1
Color de fondo: HSLA (89, 100%, 64%, 0.5);

.encabezado2
Color de fondo: HSLA (89, 100%, 64%, 1);

La imagen a continuación representa los dos mismos colores con diferentes valores alfa:

Hemos compilado la información esencial relacionada con los colores HTML HSL y HSLA.

Conclusión

Usando el método HSL (), los colores HSL HTML se pueden aplicar especificando el valor del tono, la saturación y la ligereza. Sin embargo, HSLA es una extensión de HSL con el canal alfa. Este modelo de color se puede aplicar con la ayuda de la función HSLA (). Este blog explicó qué son los colores HTML HSL y HSLA y cómo aplicarlos a los componentes HTML.