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:

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

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.

1. rgba() non è però supportato da tutti i browser: http://caniuse.com/#search=colors

2. hsl() e hsla() non sono, però, supportati da tutti i browser: http://caniuse.com/#search=colors

3. Per una lista completa dei nomi dei colori visita http://www.w3schools.com/cssref/css_colornames.asp