Gestire il colore con i CSS

Questa lezione è dedicata alla gestione del colore nei CSS. Esamineremo prima le diverse possibilità per definire i valori dei colori, per poi analizzare usi e sintassi della proprietà color.

Definizione dei colori

I colori possono essere espressi in vari modi nel contesto di una regola CSS.

Parole chiave

Si tratta di sedici keyword che definiscono i colori della palette VGA standard di Windows:

Figura 1 – I sedici colori della palette VGA standard

Ecco la lista completa:

black | navy | blue | maroon | purple | green | red | teal | fuchsia |
olive | gray | lime | aqua | silver | yellow | white

L’ordine è quello dei colori visualizzati nell’immagine.

Notazione esadecimale: #RRGGBB

Le sedici parole chiave non esauriscono ovviamente la gamma dei colori visualizzabili su un monitor moderno. È dunque possibile impostare il colore di un elemento servendosi di codici con notazione esadecimale. In essi, le prime due lettere (o numeri) corrispondono ai valori per il colore rosso (RED), la seconda coppia fa riferimento al verde (GREEN), l’ultima al blue (BLUE). Il codice va preceduto dal simbolo del cancelletto (#).

Un esempio:

color: #CC0000

Il codice qui sopra rappresenta una tonalità di rosso.

Notazione RGB

Molti dei codici esadecimali sono rappresentati da valori duplicati. È possibile usare per essi una sintassi abbreviata in cui i valori per il rosso, il verde e il blue sono definiti solo dalla prima lettera o numero. Il colore dell’esempio precedente può essere definito anche così:

color: #C00

Nell’uso di questa sintassi vanno valutati i risultati con colori che non presentino coppie di valori duplicati. Il risultato può essere leggermente diverso a livello di tonalità a seconda dei casi.

Notazione decimale con RGB

Un altro modo per rappresentare i colori è quello di usare per i tre elementi base del sistema RGB una lista di valori separati da una virgola. I valori possono essere espressi in percentuale (da 0% a 100%) o con una scala che va da 0 (il nero) a 255 (il bianco).

Per indicare il nero useremo, ad esempio:

color: rgb(0%, 0%, 0%);
color: rgb(0, 0, 0);

La proprietà color

Visti i sistemi per rappresentare i colori, dobbiamo ora chiarire un aspetto importante. Per ogni elemento si possono definire almeno tre colori:

1. il colore di primo piano;
2. il colore di sfondo;
3. il colore del bordo;

La proprietà color definisce esclusivamente:

• il colore di primo piano, ovvero quello del testo;
• il colore del bordo di un elemento quando non si imposti esplicitamente quest’ultimo con le proprietà border o border-color.

Sintassi ed esempi

La proprietà color si applica a tutti gli elementi ed è ereditata. Significa che se si imposta il colore per un elemento esso sarà ereditato da tutti gli elementi discendenti per cui non si definisca esplicitamente un altro colore. La sintassi è semplice:

selettore {color: valore;}

I valori possibili sono:

• qualunque valore di un colore definito con i metodi visti sopra;
• la parola chiave inherit: con essa si dice esplicitamente al browser di ereditare le impostazioni definite per l’elemento parente.

p {color: black;}
div {color: #CC0000;}

Approfondimenti CSS3

• Definire colori con trasparenza: la notazione RGBa
• Definire colori con trasparenza: la notazione HSLa