Corso di CSS - Tutorial 2: I colori in CSS | CSS colors

🙏 Fai una donazione → www.paypal.com...
🌍 Scrivimi attraverso il modulo contatti del mio sito → www.fantastica...
💻 #CSS - #Tutorial 2: I colori in CSS
In questo secondo tutorial in italiano del corso di CSS parleremo di #colori.
In CSS i colori vengono specificati utilizzando in alternativa:
🔹 nomi di colori predefiniti (oggi i browser moderni, supportano ben 140 diversi nomi di colore)
🔹 valori RGB / RGBA
🔹 valori HEX
🔹 valori HSL / HSLA
▶ Colori RGB
In HTML, un colore può essere specificato come valore RGB, utilizzando questa formula:
rgb(red, green, blue)
Ognuno di questi parametri definisce l'intensità del colore con un valore compreso tra 0 e 255.
▷ Valori in RGBA
I valori di colore RGBA sono un'estensione dei valori di colore RGB con un canale alfa, che specifica l'opacità di un colore.
Un valore di colore RGBA è specificato con:
rgba(red, green, blue, alpha)
Il parametro alfa è un numero compreso tra: 0,0 (completamente trasparente) e 1,0 (per niente trasparente); sono ammessi tutti i valori intermedi, per esempio impostandolo a 0,5 si otterrà una semitrasparenza del colore.
▶ Colori HEX
In HTML, un colore può essere specificato in questa forma:
#rrggbb
dove rr (rosso), gg (verde) e bb (blu) sono valori esadecimali compresi tra 00 e ff (00 corrisponde allo 0 decimale e ff corrisponde a 255).
▷ Valore esadecimale a tre cifre
Il codice esadecimale a 3 cifre è un'abbreviazione per alcuni codici esadecimali a 6 cifre.
Il codice esadecimale a 3 cifre ha la forma seguente:
#rgb
Dove r, g e b rappresentano i componenti rosso, verde e blu con valori compresi tra 0 e f.
Il codice esadecimale a 3 cifre può essere utilizzato SOLO quando entrambi i valori (RR, GG e BB) sono gli stessi per ciascun componente.
Quindi, ad esempio:
#ff00cc può essere scritto in questo modo: #f0c
▶ Colori HSL
In HTML un colore può essere specificato utilizzando tonalità, saturazione e luminosità e definito in questa forma:
hsl(tonalità,saturazione,lumnosità)
dove:
la tonalità corrisponde a un grado sulla ruota dei colori, va quindi da 0 a 360;
la saturazione ovvero l’intensità del colore è un valore percentuale che va da 0% (sfumatura di grigio) a 100% (colore pieno);
la luminosità ovvero la quantità di luce che si desidera dare al colore è un valore percentuale che va da 0% (nessuna luce: nero) a 100% (piena luce: bianco).
▷ Valori in HSLA
HSLA è un'estensione di valori HSL con un canale alfa che specifica l'opacità.
Un valore di colore HSLA è così specificato:
hsla(hue, saturation, lightness,alpha)
dove il parametro alfa è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (per niente trasparente).
Buona visione
💼 Ing. Francesca Martorana