Nomi dei colori HTML: tutti i 148 con HEX, RGB, HSL e OKLCH | We.Inc
Tutti i 148 nomi dei colori CSS e HTML con codici HEX, RGB, HSL e OKLCH, contrasto su bianco e su nero, la classe Tailwind più vicina e ordinamento per tonalità, luminosità o famiglia.
Nomi dei colori HTML
Il CSS definisce 148 nomi di colori, da aliceblue a yellowgreen, e ogni browser li riconosce in HTML e CSS. Nove sono grafie alternative di un altro nome, come grey per gray e cyan per aqua, quindi i colori distinti sono 139. La tabella qui sotto riporta per ciascuno i valori HEX, RGB, HSL e OKLCH, il contrasto del testo e la classe Tailwind più vicina.
Fatti sui colori con nome
Domanda
Risposta
Quanti nomi?
148 (139 colori distinti)
Distinguono maiuscole e minuscole?
No: Red, RED e red sono uguali
Dove sono definiti?
CSS Color Module Level 4
Nome più recente
rebeccapurple (#663399), aggiunto nel 2014
Cerca per nome o HEX, filtra per famiglia di colore, ordina per tonalità, luminosità o nome, e copia qualsiasi valore con un clic. Ogni riga mostra anche se il testo nero o bianco è leggibile su quel colore e qual è il colore Tailwind più vicino.
Scrivi una parte di un nome o un codice HEX nella casella di ricerca per filtrare la tabella.
Scegli una famiglia, come Blu o Marrone, per vedere solo quei colori. Le famiglie sono raggruppate per tonalità percepita.
Ordina per nome, per tonalità (per vedere i colori come uno spettro) o per luminosità (dal scuro al chiaro).
Clicca un valore qualsiasi per copiarlo. Le colonne del contrasto mostrano il rapporto per il testo bianco e per quello nero su quel colore.
I colori con nome sono comodi per prototipi ed esempi, ma un design reale di solito richiede valori di brand esatti. Sostituisci i nomi con HEX o custom properties prima del lancio.
Alcuni nomi ingannano: darkgray (#A9A9A9) è più chiaro di gray (#808080), e lightgoldenrodyellow è un crema pallido più che un giallo.
Usa transparent e currentColor insieme ai nomi. Sono anch'esse parole chiave CSS, ma non fanno parte dei 148 perché non sono colori fissi.
Controlla il contrasto prima di usare un colore con nome per il testo. Molti di quelli brillanti, come yellow, gold e lime, non superano il test su sfondo bianco.
Domande frequenti
Quanti sono i nomi dei colori HTML?
Ci sono 148 colori con nome nel CSS Color Module Level 4, che l'HTML usa. Nove coppie sono alias dello stesso colore: aqua e cyan, fuchsia e magenta, e sette nomi che si possono scrivere con gray o grey, come darkgray e darkgrey. Quindi la lista descrive 139 colori distinti.
I nomi dei colori funzionano in tutti i browser?
Sì. Tutti i 148 nomi sono supportati da ogni browser attuale. I 16 nomi originali di HTML 4, come red, navy e teal, funzionano da decenni; gli altri vengono dalla lista di colori X11 e sono supportati anch'essi da tempo.
Perché darkgray è più chiaro di gray?
I nomi vengono da due fonti diverse. gray è stato definito in HTML al 50% di luminosità (#808080), mentre darkgray viene dalla più vecchia lista di colori X11, dove era #A9A9A9. Quando le liste sono state unite, entrambi i valori sono rimasti com'erano.
Che cos'è rebeccapurple?
È #663399, aggiunto al CSS nel 2014 in memoria di Rebecca Meyer, la figlia dell'autore CSS Eric Meyer. È il nome di colore più recente aggiunto al CSS.
Meglio usare i nomi dei colori o i codici HEX?
Per il lavoro di design in produzione usa valori HEX, RGB, HSL o OKLCH, idealmente salvati come custom properties, perché i nomi coprono solo 148 punti fissi. I nomi vanno bene per prove rapide, documentazione e insegnamento, dove la leggibilità conta più della precisione.
Da dove vengono i nomi
HTML 4 ha definito 16 nomi di colori di base: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal e aqua. I browser avevano anche adottato una lista molto più lunga dall'X Window System, e CSS3 l'ha resa ufficiale. CSS Color Level 4 aggiunge rebeccapurple e lascia invariato il resto.
Poiché i nomi X11 sono stati scelti da persone e non da una formula, sono disomogenei. Ci sono molti quasi bianchi e diversi verdi quasi identici, mentre alcune tonalità non hanno alcun nome. Ordinare la tabella per tonalità mostra chiaramente i vuoti.
Leggere le colonne aggiuntive
OKLCH descrive un colore come luminosità, croma (quanto è saturo) e tonalità, in uno spazio progettato in modo che passi uguali appaiano uguali. È utile per costruire palette a partire da un colore con nome, perché cambiando solo la luminosità la tonalità resta visivamente la stessa.
Le colonne del contrasto usano la formula WCAG 2. Serve 4.5:1 o più per il testo normale e 3:1 per il testo grande. La colonna Tailwind indica la classe della palette predefinita di Tailwind che appare più vicina, con un valore di differenza: sotto 2 è difficile distinguerli.
Nome
HEX
RGB
HSL
OKLCH
Su bianco
Su nero
Tailwind più vicino
Rosso
Rosa
Arancione
Giallo
Marrone
Verde
Ciano
Blu
Viola
Bianco
Nero e grigio
Copia
Tutti i 148 in un colpo d'occhio, per tonalità
Tutti i 148 nomi dei colori
Cerca nome o HEX
Ordina per
Nome
Tonalità (spettro)
Luminosità (dal scuro al chiaro)
{n} mostrati
· Copiato {v}
Famiglia di colore
Tutti
Colori con nome CSS e HTML
Campione
differenza {d}
I valori di contrasto in verde raggiungono 4.5:1, sufficiente per il testo normale. Il campione Aa usa il nero o il bianco, a seconda di quale si legge meglio.