Esercitazione HTML

HTML HOME Introduzione all'HTML Editor HTML HTML di base Elementi HTML Attributi HTML Intestazioni HTML Paragrafi HTML Stili HTML Formattazione HTML Citazioni HTML Commenti HTML Colori HTML CSS HTML Collegamenti HTML Immagini HTML Favicon HTML Tabelle HTML Elenchi HTML Blocco HTML e in linea Classi HTML ID HTML Iframe HTML JavaScript HTML Percorsi di file HTML Testa HTML Layout HTML HTML reattivo Codice informatico HTML Semantica HTML Guida allo stile HTML Entità HTML Simboli HTML Emoji HTML Set di caratteri HTML Codifica URL HTML HTML e XHTML

Moduli HTML

Moduli HTML Attributi del modulo HTML Elementi del modulo HTML Tipi di input HTML Attributi di input HTML Attributi del modulo di input HTML

Grafica HTML

Tela HTML HTML SVG

Supporto HTML

Supporto HTML Video HTML Audio HTML Plug-in HTML YouTube HTML

API HTML

Geolocalizzazione HTML Trascina/rilascia HTML Archiviazione Web HTML Lavoratori Web HTML HTML SSE

Esempi HTML

Esempi HTML Quiz HTML Esercizi HTML Certificato HTML Riepilogo HTML Accessibilità HTML

Riferimenti HTML

Elenco tag HTML Attributi HTML Attributi globali HTML Supporto browser HTML Eventi HTML Colori HTML Tela HTML Audio/video HTML Tipi di documenti HTML Set di caratteri HTML Codifica URL HTML Codici HTML Lang Messaggi HTTP Metodi HTTP Convertitore da PX a EM Tasti rapidi

Colori HTML HSL e HSLA


HSL sta per tonalità, saturazione e luminosità.

I valori di colore HSLA sono un'estensione di HSL con un canale alfa (opacità).


Valori colore HSL

In HTML, un colore può essere specificato utilizzando tonalità, saturazione e luminosità (HSL) nella forma:

hsl( tonalità , saturazione , luminosità )

La tonalità è un grado sulla ruota dei colori da 0 a 360. 0 è rosso, 120 è verde e 240 è blu.

La saturazione è un valore percentuale, 0% indica una sfumatura di grigio e 100% è il colore pieno.

Anche la luminosità è un valore percentuale, 0% è nero e 100% è bianco.

Sperimenta mescolando i valori HSL di seguito:

hsl(0, 100%, 50%)

TINTA

0

SATURAZIONE

100%

LEGGEREZZA

50%

Esempio

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)


Saturazione

La saturazione può essere descritta come l'intensità di un colore.

100% è colore puro, senza sfumature di grigio

Il 50% è grigio al 50%, ma puoi ancora vedere il colore.

0% è completamente grigio, non puoi più vedere il colore.

Esempio

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)


Leggerezza

La luminosità di un colore può essere descritta come quanta luce vuoi dare al colore, dove 0% significa nessuna luce (nero), 50% significa 50% luce (né scuro né chiaro) 100% significa piena luminosità (bianco).

Esempio

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)


Sfumature di grigio

Le sfumature di grigio sono spesso definite impostando la tonalità e la saturazione su 0 e regolando la luminosità da 0% a 100% per ottenere sfumature più scure/più chiare:

Esempio

hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)


Valori colore HSLA

I valori di colore HSLA sono un'estensione dei valori di colore HSL con un canale alfa, che specifica l'opacità di un colore.

Un valore di colore HSLA è specificato con:

hsla( tonalità, saturazione , luminosità, alfa )

Il parametro alfa è un numero compreso tra 0,0 (completamente trasparente) e 1,0 (per niente trasparente):

Sperimenta mescolando i valori HSLA di seguito:

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

TINTA

0

SATURAZIONE

100%

LEGGEREZZA

50%

ALFA

0,5

Esempio

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)