In questo post parleremo di come vengono gestiti e implementati i colori all'interno dei fogli di stile.
Indice
- Notazione Esadecimale
- Notazione Esadecimale abbreviata
- Notazione RGB
- Notazione RGBA
- Notazione HSL
- Notazione HSLA
In CSS i colori possono essere definiti semplicemente scrivendo il loro nome in inglese:
p { color: red; } /* il colore del paragrafo è blu*/
Ci sono 140 colori specificati dal proprio nome. Questi colori sono supportati da tutti i browser.
Per avere una tabella di tutti i nomi clicca qui.
1. Notazione Esadecimale
Per avere una palette completa di colori possiamo impostare individualmente i valori per il rosso, il verde e il blu.
Ogni componente di colore è composta da due cifre esadecimali, e tutta la serie di sei cifre che compone il colore è preceduta dal simbolo del cancelletto #RRGGBB.
L'esadecimale indica il conteggio in base 16, quindi le cifre valide sono da 0 a 9 e da A ad F. Ogni coppia rosso-verde-blu può variare da 00 a FF o da 0 a 255 in notazione decimale. Tutto questo fornisce un set composto da 16 milioni di colori da scegliere.
p { color: #FF0000; } /* Rosso: 255, Verde: 0 e Blu:0 */
Di seguito trovate un tool che vi permetterà di sperimentare nella scelta dei colori.
Esempio 1
Colore:Eesempio 2
Esadecimale:2. Notazione Esadecimale abbreviata
Esiste anche una notazione esadecimale abbreviata, dove possiamo specificare un colore utilizzando solo 3 cifre esadecimali anziché 6. Questa notazione può essere convertita in una esadecimale normale semplicemente duplicando le cifre.
p { color: #F00; } /* uguale a #FF0000 */
La notazione esadecimale abbreviata è utile quando non serve per forza la forma estesa.
3. Notazione RGB
La funzione rgb() consente di specificare un valore di colore come tre intensità di
valori per le componenti di colore rosso, verde e blu. Il valore può essere un numero intero compreso tra 0 e 255 o una percentuale.
p { color: rgb(255, 0, 0); }
p { color: rgb(100%, 0%, 0%); }
Questa notazione consente la stessa precisione nella specifica del colore esattamente come per quella esadecimale. Quale notazione tra le due? Dipende da una questione di preferenza; ma la notazione esadecimale è spesso preferita perché è più corta e più facile da passare come valore a programmi di grafica (come ad esempio Photoshop).
4. Notazione RGBA
Con CSS3 si è introdotta la notazione RGBA, che aggiunge il valore alpha che specifica la trasparenza del colore. Il valore alpha è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (totalmente opaco).
/* Colore verde con trasparenza al 60% */
p { color: rgba(0%, 100%, 0%, 0.6); }
I browser che ancora non supportano la notazione RGBA, ignorano la dichiarazione per il valore alpha, applicando un'opacità 1.0 di default.
5. Notazione HSL
Un valore di colore può essere impostato con la funzione hsl() (che sta per tonalità,
saturazione e leggerezza). La tonalità è un grado su un cerchio colorato da 0 a
360, dove 0 e 360 sono rossi, 120 è verde e 240 è blu.
La saturazione è un valore percentuale, con 0% che dà una sfumatura di grigio e 100% che dà il colore pieno. La luminosità è specificata come percentuale, dallo 0% (scuro) a 100% (luminoso).
p { color: hsl(0, 100%, 100%); }
6. Notazione HSLA
Così come è possibile farlo per la funzione RGB, anche con HSL possiamo estendere i valori del colore aggiungendo il canale alpha per la trasparenza.
/* Rosso con 70% di trasparenza */
p { color: hsla(0, 100%, 100%, 0.7); }
