color
Puoi colorare il tuo carattere come meglio ti aggrada. Prima di vedere la direttiva CSS, tuttavia, mi soffermerò ora sulle varie scale che puoi utilizzare: Così come hai diverse dimensioni per i caratteri, hai anche diverse scale colorimetriche da poter utilizzare.
RGB esadecimale
Di solito quella più utilizzata, presenta la definizione dei 3 canali sotto forma di coppie di valori esadecimali, preceduti dal simbolo #; ad esempio, #000000.
RGB
Con rgb() puoi definire la quantità di colore per ogni singolo canale, da 0 a 255; ad esempio, rgb(0,0,0).
RGBA
Analogo a rgb(), con l’eccezione che puoi definire anche il grado di opacità del colore (canale alpha), da 1 a 0; ad esempio, rgba(0,0,0,.5).1
HSL
In hsl() puoi definire il colore secondo la sua intensità, luminosità e saturazione, con valori da 0 a 100%; ad esempio, hsl(0,0,0).
HSLA
Analogo a hsl(), con l’eccezione che puoi definire anche il grado di opacità del colore (canale alpha), da 1 a 0; ad esempio, hsla(0,0,0,.5).2
Nome colore
Ad alcuni colori è stato assegnato un nome universalmente riconosciuto da tutti i browser; ad esempio, Black.3
Come si evince da quanto riportato sopra, per questioni di praticità, la più utilizzata è l’esadecimale: vuoi perché è più semplice ricordare 6 valori (piuttosto che il livello di colore in rgb o il nome del colore), vuoi perché i vari tool grafici, come ad esempio Adobe Photoshop, ti danno anche quel codice, facilmente copia-incollabile direttamente nel tuo codice CSS.
La sintassi del colore è, dunque:
Il codice del colore non è case sensitive; ciò significa che se lo scrivi in maiuscolo o in minuscolo non fà differenza. Inoltre, se (e solo se!) il codice del colore prevede 6 caratteri uguali — ad esempio #000000 — allora esso può essere ridotto a 3 caratteri per praticità. Per cui, nell’esempio di prima, potrebbe essere scritto #000.