Nomi dei colori CSS

Un nome di colore è una parola chiave leggibile dall'uomo — come red, tomato o rebeccapurple — che puoi usare ovunque CSS si aspetti un valore di colore, al posto di una notazione numerica come #FF0000 o rgb(255 0 0). I nomi sono il modo più semplice per scrivere un colore: sono auto-documentanti ed è impossibile sbagliare a scriverli in un diverso colore valido come può accadere con i codici esadecimali.

Questo capitolo elenca tutti i colori con nome, spiega quando conviene usare un nome rispetto a un valore esadecimale o rgb(), e illustra le poche parole chiave speciali (transparent, currentColor) che non sono presenti nella tabella.

Usare un nome di colore

Inserisci direttamente la parola chiave in qualsiasi proprietà colore. I nomi sono case-insensitive, quindi Tomato, tomato e TOMATO sono identici:

h1 {
  color: tomato;
}

button {
  background-color: SeaGreen;
  border: 2px solid darkslategray;
}

Queste forme sono intercambiabili con i valori esadecimali e rgb() — color: tomato colora esattamente gli stessi pixel di color: #FF6347 o color: rgb(255 99 71). Usa i nomi per la leggibilità durante lo sviluppo; ricorri all'esadecimale quando hai bisogno di un colore di brand preciso che non ha una parola chiave corrispondente.

I colori con nome

Tutti i 147 nomi di colori riportati di seguito sono supportati da ogni browser moderno. Ogni riga mostra la parola chiave e il relativo valore HEX equivalente:

Come i valori HEX si relazionano ai nomi

Ogni nome nella tabella è semplicemente una scorciatoia per un colore RGB — una combinazione di luce Rossa, Verde e Blu. CSS esprime questa combinazione come valore esadecimale (HEX): un # seguito da sei cifre, due per canale. Il valore minimo di un canale è 0 (esadecimale 00) e il massimo è 255 (esadecimale FF).

#FF6347   →   FF = red 255   63 = green 99   47 = blue 71   →   "tomato"

Il formato HEX è case-insensitive, quindi #FFFFFF e #ffffff sono lo stesso colore (bianco). Quando tutti e tre i canali condividono entrambe le cifre, puoi usare la forma abbreviata a 3 cifre — #FFF si espande a #FFFFFF e #F00 a #FF0000.

Conoscere questa corrispondenza è utile quando uno strumento di design ti fornisce un codice esadecimale che quasi corrisponde a una parola chiave: puoi sostituire il nome leggibile solo quando i valori coincidono esattamente.

Parole chiave colore speciali

Due parole chiave si comportano come nomi di colori ma non sono presenti nella tabella:

• transparent — un colore completamente trasparente, equivalente a rgba(0, 0, 0, 0). Usalo per nascondere un bordo o uno sfondo senza rimuovere la proprietà.
• currentColor — si risolve al valore color corrente dell'elemento. È utile per mantenere automaticamente sincronizzati il colore di un bordo o di un SVG con il colore del testo.

.ghost-button {
  color: royalblue;
  background-color: transparent;
  border: 2px solid currentColor; /* follows the royalblue text color */
}

Capitoli correlati

• Proprietà CSS color — imposta il colore del testo di un elemento.
• Proprietà CSS background-color — riempie lo sfondo di un elemento.
• Colori HTML — i modelli di colore RGB / HEX / HSL spiegati.

Esercitazione