I colori in CSS permettono di modificare e personalizzare l'aspetto visivo degli elementi di una pagina web. È possibile rendere una pagina più attraente, oppure suscitare emozioni diverse. Inoltre, l'uso dei colori può migliorare l'esperienza utente, facilitando la lettura e la navigazione.
In questa lezione, vediamo come usare i colori in CSS.
In CSS/HTML, i colori possono avere forma diversa:
Prima di approfondire le varie tipologie di colore, diamo un'occhiata a qualche esempio del loro utilizzo.
I colori vengono utilizzati davvero tanto nelle pagine web. Ad esempio, possiamo colorare il testo di un link di colore verde scuro (approfondiremo i colori dei testi nelle lezioni successive):
<a href="biadets.com">Vai a biadets.com</a>
<style>
a {
color: DarkGreen;
}
</style>Oppure, possiamo colorare lo sfondo di un elemento di arancio (che vedremo nella lezione sugli sfondi degli elementi):
<h1>Questo testo è evidenziato di arancio</h1>
<style>
h1 {
background-color: orange;
}
</style>Negli anni si è scelto di creare uno standard di nomi di colori che potessero essere più semplici da ricordare. Fino ad ora, sono disponibili 140 colori HTML/CSS standard che abbiamo raccolto nella lista dei colori standard.
Ad ogni colore, corrisponde un valore HEX che si può utilizzare in sostituzione del nome.
Tutti i diversi browser supportano questi colori predefiniti.
Per utilizzarli, basta utilizzare il nome del colore:
<h1>Questo testo è evidenziato di blu</h1>
<style>
h1 {
background-color: DeepSkyBlue;
}
</style>Utilizzare il valore esadecimale è il modo più semplice, oltre al nome, per scrivere un colore. Infatti, esistono milioni di colori diversi, e non tutti hanno un nome proprio. Diventa essenziale, quindi, poterli scrivere tramite HEX.
La sintassi è: #RRGGBB
Oltre al cancelletto, deve essere scritta una sequenza di 6 caratteri:
Ogni carattere può essere un numero da 0 a 9 oppure una lettera da A a F. Il valore 0 rappresenta la minima intensità del colore. Il valore F rappresenta la massima intensità del colore.
Ad esempio, #FF0000 rappresenta il rosso puro, perché:
FF per il rosso indica la massima intensità.00 per il verde e il blu indicano la minima intensità.<h1>Questo testo è evidenziato di verde</h1>
<style>
h1 {
background-color: #00FF00;
}
</style>Nell'esempio, il valore HEX rappresenta il verde puro, perché FF indica la massima intensità per il verde e 00 la minima intensità per gli altri colori.
Potrebbe capitarti all'interno di qualche file CSS di notare un valore HEX di 3 caratteri invece che 6.
I colori HEX a 3 cifre sono una variante del sistema di colori HEX che utilizza solo 3 caratteri invece dei 6 standard per rappresentare un colore.
La sintassi è molto simile: #RGB
Dopo il cancelletto, segue una sequenza di 3 caratteri:
I colori HEX abbreviati sono ottenuti ripetendo ogni carattere due volte. In pratica, ogni carattere rappresenta l'intensità sia della prima componente che della seconda di quel colore.
Ad esempio, il colore #F00 rappresenta il rosso puro. È equivalente al codice HEX completo #FF0000.
Il codice #0F0 rappresenta il verde puro ed equivale a #00FF00.
<h1>Questo testo è evidenziato di verde</h1>
<style>
h1 {
background-color: #0F0; /* Uguale a #00FF00 */
}
</style>L'acronimo RGB sta per Red, Green, Blue, ovvero rosso, verde e blu. Questi tre colori primari della luce, combinandosi in diverse proporzioni, creano l'intera gamma di colori visibili dall'occhio umano.
Come funziona? Immaginiamo una tavolozza di tre pitture: una con vernice rossa, una con vernice verde e una con vernice blu. Mescolando queste vernici in diverse proporzioni, possiamo ottenere qualsiasi colore desiderato. L'intensità di ogni colore è rappresentata da un valore numerico compreso tra 0 e 255: 0 indica l'assenza di colore, mentre 255 indica la massima intensità di colore.
La sintassi è: rgb(R, G, B)
Ecco a cosa corrispondono R, G e B:
Ad esempio, il colore rosso puro può essere rappresentato dal codice rgb(255, 0, 0)rgb(0, 255, 0)rgb(255, 255, 255)
<h1>Questo testo è evidenziato di verde</h1>
<style>
h1 {
background-color: rgb(0, 128, 0); /* Verde scuro */
}
</style>Oltre al semplice RGB, esiste anche il formato RGBA (Red, Green, Blue, Alpha), che è un'estensione del formato RGB che aggiunge un canale alfa (ecco perché la "A" in più) per la gestione della trasparenza.
La sitassi rimane simile: rgba(R, G, B, A)
Il valore Alfa è rappresentato da un numero compreso tra 0 e 1, dove:
<h1>Questo testo è evidenziato di rosso</h1>
<style>
h1 {
background-color: rgba(255, 0, 0, 0.5); /* Rosso semitrasparente */
}
</style>Il formato di colore HSL (Hue, Saturation, Lightness) rappresenta un metodo alternativo per definire i colori basato su tre componenti: tonalità, saturazione e luminosità.
La sintassi è: hsl(H, S%, L%)
Ecco come funziona:
Ad esempio, ecco come creare il verde:
<h1>Questo testo è evidenziato di verde</h1>
<style>
h1 {
background-color: hsl(120, 100%, 50%); /* Verde acceso */
}
</style>Il formato colore HSLA (Hue, Saturation, Lightness, Alpha) in CSS è un'estensione del formato HSL che aggiunge un canale alfa per la gestione della trasparenza.
La sintassi è: hsla(H, S%, L%, A)
Il canale alfa è rappresentato da un valore decimale compreso tra 0 e 1, dove 0 indica trasparenza totale, ovvero il colore sottostante è completamente invisibile, e 1 indica opacità totale, ovvero il colore è completamente visibile.
<h1>Questo testo è evidenziato di blu</h1>
<style>
h1 {
background-color: hsla(240, 100%, 50%, 0.5); /* Blu semitrasparente */
}
</style>Se ti serve, ecco la lista completa dei colori HTML/CSS.