Nomi Colori HTML — Tutti i 148 Colori CSS con Ricerca e Filtro
Tutti i nomi dei colori HTML in un riferimento consultabile: la lista completa dei colori CSS con nome, i valori HEX, RGB e HSL, campioni dal vivo e copia con un clic. A differenza delle tabelle statiche, qui puoi filtrare per famiglia di colore — tutti i blu, tutti i verdi — e ordinare per tonalità, luminosità o saturazione, proprio come un designer sceglie un colore nella pratica.
La specifica CSS Color Level 4 definisce esattamente 148 keyword di colore: 141 nomi unici più 7 grafie britanniche "grey". Molti riferimenti citano ancora 140 — la specifica dice altro. La pagina include anche uno strumento per trovare il colore con nome più vicino: incolla qualsiasi codice hex e ottieni la keyword CSS ufficiale più simile, ordinata per distanza percettiva ΔE (CIELAB).
Come Usare il Riferimento dei Colori HTML
Trovare e copiare un colore richiede pochi secondi:
- Digita un nome o un codice hex nella ricerca — la griglia si filtra in tempo reale mentre scrivi, accettando nomi come
tomatoe frammenti di hex comeff63. - Filtra per famiglia o cambia l'ordinamento — scegli "Blu" e ordina per luminosità per vedere tutti i blu del CSS, dal più chiaro al più scuro.
- Clicca su un campione per copiarne subito l'HEX — oppure clicca sul nome per aprire i dettagli con RGB, HSL, snippet CSS pronti da incollare e banner condivisibili per Instagram, WhatsApp e X.
- Trova il colore con nome più vicino a qualsiasi hex — incolla un codice come
#517CBDnello strumento e ottieni la keyword ufficiale più vicina con la distanza esatta.
Esempi di Nomi Colori HTML
Alcune ricerche reali per mostrare cosa restituisce il riferimento:
| Input | Output |
|---|---|
tomato |
#FF6347 · rgb(255, 99, 71) · hsl(9, 100%, 64%) |
rebeccapurple |
#663399 · rgb(102, 51, 153) · hsl(270, 50%, 40%) |
#4682B4 nello strumento |
SteelBlue — corrispondenza esatta, ΔE 0.0 |
#517CBD nello strumento |
SteelBlue (ΔE ≈ 9) davanti a CornflowerBlue e RoyalBlue |
grey nella ricerca |
Gray (#808080) — trovato tramite l'alias, perché entrambe le grafie sono CSS valido |
Lo strumento accetta anche il formato corto a 3 cifre: #fa0 viene espanso in #FFAA00 prima del confronto.
Cosa Sono i Colori CSS con Nome
I colori con nome sono keyword testuali che funzionano come valore in qualsiasi proprietà di colore CSS: color: rebeccapurple viene reso identico a color: #663399. Il browser risolve il nome in RGB durante il parsing — non c'è alcuna differenza di prestazioni tra una keyword e un codice hex.
I 16 nomi di base (black, white, red, lime, navy, teal…) risalgono a HTML 4.01 (1997). Gli altri nascono dal sistema di colori X11, usato nelle interfacce Unix dagli anni '80, adottato da SVG e poi integrato ufficialmente in CSS3 — ecco perché la lista contiene curiosità come PapayaWhip, Bisque e NavajoWhite. CSS Color Level 4 ha aggiunto l'ultima voce nel 2014: rebeccapurple.
La Storia di RebeccaPurple
rebeccapurple (#663399) è l'unico colore CSS che porta il nome di una persona. Rebecca Meyer, figlia del pioniere del CSS Eric Meyer, morì di tumore al cervello il 7 giugno 2014 — il giorno del suo sesto compleanno. Lo stesso giorno, la comunità del web propose di aggiungere alla specifica la tonalità di viola che lei amava, e il CSS Working Group approvò in poche ore. Fu usato il nome completo "Rebecca" su richiesta del padre: aveva appena lasciato il soprannome "Becca". Ancora oggi gli sviluppatori usano la keyword come omaggio.
Casi d'Uso Comuni
- Prototipi e demo:
background: cornflowerbluesi scrive più in fretta e si legge meglio in un esempio di codice rispetto a un hex — per questo i colori con nome dominano i tutorial. - Trovare un nome semantico per il colore del brand: incolla il tuo hex nello strumento e scopri se esiste una keyword ufficiale abbastanza vicina per mockup veloci.
- Scegliere una tonalità dentro una famiglia: filtra "Verdi" e ordina per luminosità per scorrere i 23 verdi del CSS in ordine, invece di cercare in una tabella alfabetica.
- Didattica e documentazione: nomi come
tomatoepapayawhipsi ricordano facilmente — ideali per spiegare il CSS ai principianti. - Email e Markdown: i colori con nome sopravvivono al copia-incolla in ambienti senza selettore di colore.
Errori Comuni con i Colori CSS
- Usare
greenvolendo il verde puro:greenè#008000, una tonalità a metà luminosità. Il verde puro (rgb(0, 255, 0)) èlime— un'eredità di HTML 4.01 che sorprende ancora. - Scrivere
greycome keyword isolata: solograyè valida nella forma semplice. La grafia britannica funziona soltanto nei nomi composti —darkgrey,slategreye altri cinque sono alias validi. - Pensare che i colori con nome corrispondano alle classi Tailwind:
text-purple-700erebeccapurplevengono da palette del tutto separate. Se serve una corrispondenza esatta, confronta gli hex — quasi mai coincidono. - Contare su 140 colori: la specifica definisce 148 keyword. Una validazione basata su vecchie liste da 140 voci respingerà keyword valide.
Domande Frequenti
Quanti nomi di colori HTML esistono?
La specifica CSS Color Level 4 definisce esattamente 148 keyword di colore, oltre ai valori speciali transparent e currentColor. Si tratta di 141 nomi unici più 7 alias con la grafia britannica "grey". I 16 nomi di base vengono da HTML 4.01; il resto deriva dal set X11/SVG, e rebeccapurple è stato aggiunto nel 2014.
Perché esiste un colore CSS chiamato rebeccapurple?
Fu aggiunto nel 2014 in memoria di Rebecca Meyer, la figlia di sei anni del pioniere del CSS Eric Meyer, morta di tumore al cervello il giorno del suo compleanno. La comunità del web propose il colore lo stesso giorno e il CSS Working Group approvò in poche ore. È l'unico colore CSS che porta il nome di una persona reale.
Qual è la differenza tra lime e green in CSS?
lime è il verde puro alla massima luminosità: #00FF00. green è la tonalità più scura #008000, a metà luminosità. La nomenclatura viene dal set originale di 16 colori di HTML 4.01, dove green era definito come tono medio. Per il verde più brillante possibile, usa lime.
Grey è un nome di colore CSS valido?
Non come keyword isolata — solo gray (#808080) è valida nella forma semplice. Entrambe le grafie funzionano però nei nomi composti: darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey e le varianti slate sono tutte legali — proprio per questo il totale delle keyword è 148 e non 141.
Posso trovare il nome CSS più vicino a un codice hex?
Sì — incolla l'hex nello strumento di ricerca del colore con nome di questa pagina. Converte il tuo colore e le 148 keyword nello spazio CIELAB e ordina i risultati per distanza ΔE, che modella la percezione umana molto meglio della distanza RGB grezza. Ottieni la corrispondenza migliore più le alternative più vicine.
Risorse
- MDN — <named-color> — La lista canonica dei colori con nome nella documentazione dei browser, con campioni renderizzati.
- W3C — CSS Color Module Level 4 — La tabella ufficiale della specifica che definisce tutte le 148 keyword e i loro valori RGB esatti.
- Eric Meyer — In Memoriam, 2 — Il post dietro la storia di rebeccapurple, scritto dal padre di Rebecca.