Skip to main content

HTML, CSS e i nomi dei colori

Esistono diversi modi di definire i colori nei nostri fogli di stile. Vediamo rapidamente i principali, e cosa è meglio fare secondo GiBiLogic.

Valori numerici

Il metodo più diffuso, universalmente compatibile, e consigliato dal W3C è quello di usare dei valori numerici. Esistono diverse sintassi numeriche, ma quasi tutte si basano sulla notazione RGB, ovvero nell’indicare la quantità di rosso (Red), verde (Green) e blu (Blue) presenti nel colore stesso.

Tra le varie sintassi, la principale è la notazione esadecimale:

color: #A52A2A

Tale notazione va letta come tre gruppi di due cifre esadecimali (nell’esempio, “A5”, “2A, e “2A”) che indicano nell’ordine la quantità di rosso, verde e blu. Questa sintassi presenta una interessante opzione, ovvero il fatto di poter essere abbreviata se le coppie sono costituite da cifre uguali tra loro. Per capirci meglio, il valore:

color: #550066

si può scrivere anche come

color: #506

Usando regolarmente questa sintassi riduciamo la varietà di colori; di fatto usiamo una “paletta” di colori ridotta; tuttavia ne guadagniamo in compatibilità con gli schermi e le schede video più vecchie, e in compattezza dei nostri fogli di stile.

Esistono altre sintassi RGB, che usano valori percentuali, o cifre decimali da 1 a 255:

color: rgb( 10%, 10%, 20% )
color: rgb ( 120, 150, 230 )

Noi non usiamo mai questa notazione, preferendo la più breve esadecimale.

Valori letterali

Esiste anche la possibilità di chiamare i colori con il proprio nome:

color: blue

Per un elenco completo vedi la lista completa del W3C.

Questa modalità è supportata da tutti i maggiori browser, e a noi piace molto, per l’immediatezza di definizione. Tuttavia vanno segnalate tre importanti controindicazioni:

  1. non tutti i colori sono definiti anche con un nome. La lista del W3C ne contiene circa 140, mentre con la notazione esadecimale si arrivano a definire oltre 16 milioni di colori
  2. la traduzione visiva di un colore definito con il nome può variare da sistema operativo a sistema operativo, soprattutto per quelli che sono comuni errori di battitura (es “gray” è giusto, ma anche “grey” viene riconosciuto da alcuni browser)
  3. lo standard w3c prevede solo 16 nomi validi di colori: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Usandone uno diverso, non sarà possibile validare il proprio foglio CSS

Per quanto ci riguarda, le leggere differenze di visualizzazione dei colori non ci turbano, tanto ci sarebbero in ogni caso (monitor di marca diversa, impostazioni diverse del monitor o del sistema operativo… e perchè no, occhi diversi che vedono colori diversi). Per cui non ci illudiamo, sapendo fin dal principio che il colore non sarà quasi mai visualizzato come lo vediamo noi.

E per quanto riguarda la validazione CSS… a volte ci limitiamo a usare i 16 colori base, soprattutto durante i corsi e/o per pagine abbastanza semplici. Altre volte accettiamo il compromesso di non poter validare il CSS. Diamo senz’altro molta più importanza alla validazione HTML.

Considerazioni

Con una leggera preferenza per i nomi, seguita dalla notazione esadecimale compatta (a 3 cifre), l’importante è essere coerenti. Usate sempre la stessa notazione per definire lo stesso colore, e non dimenticate di segnarvi da qualche parte, preferibilmente nel CSS stesso come commento all’inizio delle definizioni, un riepilogo di tutti i colori utilizzati nel vostro sito. Vi verrà senz’altro utile durante le modifiche.