Manuale di riferimento CSS

Regole @CSS (RULES)

Completo delle proprietà CSS

Funzione hsl() CSS

La funzione hsl() CSS può essere utilizzata per fornire valori di colore durante l'uso di CSS. Permette di specificare il valore del colore specificando i componenti del tono, della saturazione e della luce del colore.

Funzione CSS

Esempio online

Definire il colore HSL:

Esempio

<!DOCTYPE html>
<title>Corso di base (oldtoolbag.com)</title>　
<style>
body {
　　　　background: hsl(30, 100%, 50%);
　　　　color: hsl(30, 100%, 75%);
　　　　font-size: 1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>Prenderà un po' di tempo per fare cose che non abbiamo mai fatto...</p>

Testa per vedere ‹/›

Definizione e uso

La funzione hsl() utilizza il tono, la saturazione, la luminosità per definire il colore.

HSL è il tono, la saturazione, la luminosità (inglese: Hue, Saturation, Lightness).

Tono (H)è l'attributo fondamentale del colore, che è il nome del colore comune, come il rosso, il giallo, ecc.
Saturazione (S)è la purezza del colore, più alta è la purezza del colore, più puro è il colore, più bassa diventa gradualmente grigio, con valori da 0-100%.
Luminosità (L)，aumentare la luminosità dal 0-100%，il colore si avvicinerà al bianco; ridurre la luminosità, il colore si avvicinerà al nero.

HSL è una rappresentazione del punto nel sistema di coordinate cilindriche del modello di colore RGB. Queste due rappresentazioni cercano di essere più intuitive rispetto all'RGB basato sul sistema geometrico cartesiano.

Versione supportata: CSS3

Compatibilità del browser

I numeri nella tabella rappresentano la versione del primo browser che supporta la funzione.

Funzione
hsl()	1.0	9.0	1.0	3.1	9.5

Sintassi CSS

hsl(hue,　saturazione,　luminosità)

Valore	Descrizione
tonalità - tonalità	Definisci la tonalità (da 0 a 360) - 0 (o 360) come rosso, 120 come verde, 240 come blu
saturazione - saturazione	Definisci la saturazione; 0% come grigio, 100% come colore pieno
luminosità - luminosità	Definisci la luminosità 0% come scuro, 50% come normale, 100% come bianco

Esempio di cambiamento del colore

Nella seguente tabella, tutti gli esempi di campione hanno la tonalità e la luminosità completamente identiche. L'unica differenza è la saturazione.

`hsl(240, 100%, 50%)`
`hsl(240, 90%, 50%)`
`hsl(240, 80%, 50%)`
`hsl(240, 70%, 50%)`
`hsl(240, 60%, 50%)`
`hsl(240, 50%, 50%)`
`hsl(240, 40%, 50%)`
`hsl(240, 30%, 50%)`
`hsl(240, 20%, 50%)`
`hsl(240, 10%, 50%)`
`hsl(240, 0%, 50%)`

Nell'immagine sottostante, tutti gli esempi di campione hanno la tonalità e la saturazione completamente identiche. L'unica differenza è il livello di luminosità.

`hsl(240, 100%, 100%)`
`hsl(240, 100%, 90%)`
`hsl(240, 100%, 80%)`
`hsl(240, 100%, 70%)`
`hsl(240, 100%, 60%)`
`hsl(240, 100%, 50%)`
`hsl(240, 100%, 40%)`
`hsl(240, 100%, 30%)`
`hsl(240, 100%, 20%)`
`hsl(240, 100%, 10%)`

Funzione CSS

Regola @charset CSS Funzioni CSS