Header Ads Widget

Ticker

6/recent/ticker-posts

Colores HSL (y HSLa) en CSS

 CSS tiene una hsl()función que se utiliza para definir los colores en el formato HSL que significa H ue, Saturación y L ightness. Todos estos tres valores se pueden configurar en la hsl()función en su orden respectivo.

El componente de tono de HSL especifica el ángulo (grados) en la rueda de colores.

Rueda de color HSL Rueda de color HSL de Erin Sowards .

  • El rojo tiene un tono de 0 ° o 360 °,
  • El verde tiene un tono de 120 °,
  • El azul tiene un tono de 240 °.

La saturación HSL define la cantidad de color, el 100% es un color completamente saturado y el 0% es un color desaturado (gris)

La luminosidad HSL define la luminancia o el brillo del color (el 100% de la luminosidad corresponde al color blanco para cualquier valor de tono, el 0% de la luminosidad corresponde al negro y el 50% de la luminosidad corresponde al estado normal del color definido en tono)

Echemos un vistazo al siguiente ejemplo de CSS:

:root {
    background-color: hsl(0, 100%, 50%);
}

Definimos un color rojo saturado total y de luminosidad normal para el fondo en el :rootselector que corresponde al <html>elemento.

Lo que más me gusta de HSL es que al recordar los valores de 120, 240, 360 para el verde, el azul y el rojo, puedes definir fácilmente una gama de hermosos colores jugando con los porcentajes de saturación y luminosidad.

¿Qué pasa con HSLA (tono, saturación, luminosidad, alfa)?

HSL tiene una contraparte alfa que tiene un valor de transparencia. Es la hsla()función, el último argumento especifica la transparencia (0 corresponde a transparencia total y 1 corresponde a opacidad total). Por ejemplo:

:root {
    background-color: hsla(0, 100%, 50%, 1);
}

Publicar un comentario

0 Comentarios