Función CSS hsla()

CSS 函数Funciones CSS

Ejemplos

Define el color HSL y establece la transparencia:

#p1 {background-color:hsl(120,100%,50%,0.3);} /*Verde*/ #p2 {background-color:hsl(120,100%,75%,0.3);} /*Verde claro*/ #p3 {background-color:hsl(120,100%,25%,0.3);} /*Verde oscuro*/ #p4 {background-color:hsl(120,60%,70%,0.3);} /*Verde suave*/

Pruébalo »

Definición y uso

La función hsla() define colores mediante tono, saturación, luminosidad y transparencia.

HSLA significa tono, saturación, luminosidad y transparencia (en inglés: Hue, Saturation, Lightness, Alpha).

  • Tono (H)Es la propiedad básica del color, es decir, el nombre del color como se dice comúnmente, como rojo, amarillo, etc.
  • Saturación (S)Se refiere a la pureza del color: cuanto mayor es, más puro es el color; cuanto menor es, más se vuelve gris. Toma valores de 0-100%.
  • Luminosidad (L)Toma valores de 0-100%. Si se aumenta la luminosidad, el color tiende al blanco; si se disminuye, el color tiende al negro.
  • Transparencia (A)Toma valores entre 0 y 1, y representa la transparencia.

Versión compatible: CSS3

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite esta función.

Función
hsla() 1.0 9.0 1.0 3.1 9.5

Sintaxis CSS

hsla(hue, saturation, lightness, alpha)
Valor Descripción
hue - tono Define el tono (0 a 360) - 0 (o 360) es rojo, 120 es verde, 240 es azul
saturation - saturación Define la saturación; 0% es gris, 100% color completo
lightness - luminosidad Define la luminosidad: 0% es oscuro, 50% es normal, 100% es blanco
alpha - transparencia Define la transparencia de 0 (totalmente transparente) a 1 (totalmente opaco)

CSS 函数Funciones CSS

Otras extensiones