Cores HSLA

A propriedade CSS3 hsla destina-se a definir cores e transparência com uso de valores para Hue, Saturation e Lightness.

A sintaxe geral para aplicar cores é mostrada a seguir.


seletor { propriedade: hsla(H, S, L, A); } 

Na sintaxe mostrada propriedade é qualquer propriedade CSS que aceite um valor para cores (por exemplo: color, background, border-color, etc).
O valor A é opcional e varia de 0 (transparente) até 1 (opaco). O valor H (hue) e expresso em graus (0 a 360 graus). Os valores S (saturação) e L (brilho) são expressos por porcentagem de 0% até 100%.

Interativo

Acione os sliders para definir a cor de fundo e transparência.

H = 0o.
S = 0%
L = 0%
A = 1


seletor { background: hsla(0, 0%, 0%, 1); }