Trova il nome del colore CSS

Come usare

1. Inserisci un valore di colore: digita o incolla un codice hex (#3b82f6), un valore RGB o HSL, o clicca sul selettore per scegliere un colore visivamente.
2. Ottieni il nome del colore: il nome CSS nominato più vicino, un riferimento Pantone e un nome leggibile vengono mostrati all'istante.
3. Esplora i colori vicini: visualizza una palette di colori nominati simili per trovare la migliore corrispondenza o un'alternativa per il tuo design.

Perché usare la ricerca di nomi di colori?

Quando lavori con un design system, una documentazione di accessibilità o una comunicazione con il cliente, disporre di un nome leggibile per un colore è molto più utile di un codice hex. «Cornflower Blue» comunica chiaramente; «#6495ed» no. Questo strumento fa da ponte tra i valori macchina e i nomi umani, aiutando i designer a documentare le palette, spiegare le scelte di colore e ritrovare i nomi CSS standard per i loro valori hex.

Funzionalità

• Nome CSS più vicino: trova il colore CSS nominato più vicino (tra l'elenco completo di 148 colori CSS) per qualsiasi codice hex o RGB.
• Formati di input multipli: accetta hex (#rrggbb), RGB, HSL e HSV.
• Selettore di colore: usa il selettore nativo per una selezione visiva.
• Colori vicini: mostra colori nominati simili per trovare alternative.
• Metadati di colore: mostra tonalità, saturazione, luminosità e luminosità percepita.

Domande frequenti

Come trova lo strumento il nome più vicino?

Lo strumento calcola la distanza percettuale tra il tuo colore e tutti i colori CSS nominati usando la formula di differenza CIEDE2000, che corrisponde bene alla percezione umana delle differenze di colore. La corrispondenza più vicina viene restituita come nome.

Questi colori sono identici alle parole chiave CSS?

Sì. Lo strumento include tutti i 148 colori nominati CSS standard (dalla specifica CSS Color Module Level 4) come «rebeccapurple», «dodgerblue» e «tomato». Puoi usarli direttamente in CSS al posto dei valori hex.

E se il mio colore non ha un nome esatto?

La maggior parte dei colori non ha un nome CSS esatto. Lo strumento restituisce il colore nominato percettualmente più vicino e mostra la differenza (delta E) per indicarti quanto la corrispondenza è vicina.

Da X11 a CSS Color Module Level 4: la lunga strada verso «rebeccapurple»

I colori nominati CSS che la maggior parte delle persone usa oggi sono ereditati dall'elenco di colori X Window System (rgb.txt), assemblato al MIT per l'ambiente grafico X11 nel 1986. L'elenco è cresciuto organicamente nel decennio successivo, pieno di nomi fantasiosi e oscuri come «papayawhip», «peachpuff» e «papayawhip». Quando Mosaic (1993) e poi Netscape Navigator (1994) hanno standardizzato il colore in HTML, hanno mantenuto un sottoinsieme dei nomi X11. CSS1 (dicembre 1996) ha formalizzato solo 16 colori nominati corrispondenti alla palette VGA originale: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 4 (1997) ha aggiunto «orange» come 17°. CSS2.1 (giugno 2011) ha mantenuto i 17. CSS3 Color Module (giugno 2014, finalizzato 2018) ha aggiunto il resto dei nomi X11, portando il totale a 147. Nel giugno 2014, il colore «rebeccapurple» (#663399) è stato aggiunto per onorare la figlia di Eric Meyer Rebecca, morta di cancro al cervello; aveva detto che il viola era il suo colore preferito. È stato aggiunto a CSS Color Module Level 4, portando il totale a 148. Il valore hex #663399 è l'unico colore nominato CSS aggiunto in memoria di una persona specifica.

Colore CSS oltre i colori nominati: oklch, lab, color()

I colori nominati coprono ancora solo un angolo di ciò che i display moderni possono mostrare. CSS Color Module Level 4 (Candidate Recommendation, bozza attuale) introduce un insieme molto più ampio di sintassi di colore. lab() e lch() ti permettono di specificare colori in CIE Lab e LCh, che sono spazi colore percettivamente uniformi. oklab() e oklch() (Björn Ottosson, 2020) sono versioni migliorate che gestiscono meglio i colori saturi brillanti; oklch(70% 0.15 240) è un azzurro cielo vivido. color(display-p3 1 0.5 0) dà accesso al più ampio gamut di colore P3 che gli iPhone, iPad e Mac moderni possono visualizzare, circa il 25% più saturato dell'sRGB a cui i colori nominati sono limitati. La sintassi del colore relativo (oklch(from blue calc(l - 10%) c h)) ti permette di derivare un colore da un altro. Il supporto del browser per tutte e quattro le funzioni di colore ha raggiunto >90% nel 2024. Per i design dell'era 2025, usa colori nominati per la prototipazione, poi porta a oklch() per palette di produzione che funzionino attraverso lo spettro del gamut di colore.

Come viene effettivamente calcolato il «colore più vicino»

La «distanza» tra due colori non è un singolo concetto. Formule diverse danno risposte diverse e ognuna si adatta a casi d'uso diversi.

• Distanza euclidea in sRGB. sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²). Veloce, ma non corrisponde alla percezione umana, due colori che sembrano identici possono essere distanti in RGB e due colori che sembrano molto diversi possono essere vicini. Evita per le query di «nome più vicino».
• Delta E CIE76. Stessa formula euclidea ma nello spazio CIE Lab, che è approssimativamente percettivamente uniforme. Approssimativamente, non esattamente. Buona prima approssimazione; ΔE ≤ 2,3 è considerato «appena percepibile» in condizioni controllate.
• Delta E CIEDE2000. Lo standard industriale attuale, pubblicato dalla CIE nel 2001. Aggiunge correzioni per luminosità, croma e rotazione della tonalità che corrispondono meglio a come gli umani percepiscono effettivamente le differenze di colore. ΔE2000 ≤ 1 è impercettibile per la maggior parte degli osservatori; ≤ 5 sembra un colore simile. Questo strumento usa CIEDE2000 per la «corrispondenza più vicina».
• Distanza euclidea in OKLab. Lo spazio colore 2020 di Björn Ottosson è progettato in modo che la semplice distanza euclidea approssimi ΔE2000 da vicino. Più veloce di ΔE2000 e la qualità percettiva è simile. Sempre più il default nei tool di design.

Dove nominare i colori aiuta davvero

• Documentazione di sistemi di design. «Azione primaria: Royal Blue (#4169e1)» si legge meglio di un semplice valore hex in specifiche di design e linee guida di brand.
• Comunicazione con il cliente. «Usiamo coral e steel blue» funziona in una riunione; «#ff7f50 e #4682b4» no. I nomi ancorano la conversazione prima di impegnarsi a valori esatti.
• Audit di accessibilità. Quando si documenta quali colori falliscono il contrasto WCAG contro uno sfondo, avere nomi umani rende i report di audit utilizzabili dai non sviluppatori.
• Traduzione di codice legacy. I vecchi file CSS spesso usano colori nominati. Quando si migra a token di design o una palette personalizzata, devi sapere a quali colori esatti «lightseagreen» e «mediumaquamarine» corrispondono.
• Prototipi veloci. Digitare background: tomato è più veloce che scegliere un hex da una ruota cromatica. I colori nominati sono default sorprendentemente buoni per abbozzare layout prima che i colori finali siano scelti.
• Nominare colori di brand. Se il tuo rosso di brand è vicino a crimson (#dc143c), chiamarlo «Brand Crimson» internamente è più memorabile di «Red 8».
• Corrispondenza di campioni. I designer incollano un colore campionato da una foto o screenshot e chiedono «a quale colore è vicino questo?» per iniziare una palette da un riferimento del mondo reale.

Errori e sorprese con i colori nominati CSS

• gray vs grey. CSS accetta entrambe le ortografie, ma l'elenco X11 originariamente aveva solo «gray». «grey» è stato aggiunto dopo. lightgray e lightgrey sono alias, stesso colore. Attieniti a un'ortografia in una codebase.
• Le varianti «dark» non sono sempre più scure della base. darkgray (#a9a9a9) è in realtà più chiaro di gray (#808080), una famosa stranezza storica dell'elenco X11 che CSS ha ereditato. Stessa trappola con darkgrey.
• aqua e cyan sono lo stesso colore. Entrambi sono #00ffff. CSS include entrambi come alias legacy. fuchsia e magenta sono anche identici (#ff00ff).
• «orange» è un colore nominato CSS ma le varianti «pink» sono diverse. orange = #ffa500. Ma non c'è un singolo «pink», CSS ha pink, lightpink, hotpink, deeppink, palevioletred, tutti notevolmente diversi.
• «Colore più vicino» dipende da cosa il tuo cervello pensa sia il colore. Due persone che campionano lo stesso chip di vernice possono scegliere nomi diversi. CIEDE2000 cattura la percezione media, non la tua. Controlla sempre i campioni visivamente piuttosto che fidarti solo del numero di distanza.
• I colori nominati sono tutti sRGB. I colori nominati CSS sono definiti come tripli sRGB a 8 bit. Su un display P3 o BT.2020, colori vividi come tomato e fuchsia possono sembrare più spenti della stessa tonalità specificata in color(display-p3 ...). Per i prototipi va bene; per la produzione su hardware moderno, porta alla sintassi wide-gamut.
• I colori nominati da soli non passano i controlli di accessibilità. yellow su white è illeggibile; red su black è marginale. Lo stato nominato di un colore non dice nulla sul contrasto. Abbina sempre una scelta di colore a un controllo di contrasto WCAG.

Altre domande frequenti

Chi ha effettivamente scelto i nomi come «papayawhip» e «peachpuff»?

Nessuna persona singola; il file rgb.txt di X11 è cresciuto attraverso più contributori al MIT e altri fornitori Unix alla fine degli anni '80. Molti nomi venivano da Sinclair Paints e altri cataloghi di vernici dell'epoca. La denominazione è informale e incoerente di proposito, i contributori hanno nominato i colori in base a oggetti che avevano sulla scrivania o fuori dalla finestra. Non c'era un comitato centrale. Quando CSS3 ha adottato in blocco l'elenco X11 nel 2014, tutte le stranezze sono venute con esso.

Dovrei usare rebeccapurple in produzione?

Il supporto del browser è universale dal 2014, quindi funziona ovunque. È esattamente equivalente a #663399. Usa qualunque nome si legga meglio nel tuo codice; «rebeccapurple» è un piccolo ma visibile tributo su ogni pagina che lo usa.

Qual è la differenza tra CIEDE2000 e le formule ΔE più semplici?

ΔE76 (distanza euclidea in CIE Lab) è veloce e dà risposte ragionevoli ma sottostima le differenze nei colori saturi e sovrastima nei colori scuri. CIEDE2000 aggiunge cinque termini di correzione (per luminosità, croma, rotazione della tonalità e due termini incrociati) che si adattano ai dati empirici su come le persone percepiscono effettivamente le differenze di colore. La correzione è significativa; la stessa coppia di colori può dare ΔE76 = 4 e ΔE2000 = 2 (verdetto percettivo molto diverso). Per «questo colore è abbastanza vicino a quello», usa ΔE2000. Per l'elaborazione batch dove la velocità conta, la distanza euclidea OKLab è un'approssimazione veloce.

Posso aggiungere i miei nomi di colore personalizzati?

Non come parole chiave CSS, l'elenco dei colori nominati è fissato dalla spec. Ma le Custom Properties CSS (variabili) ti danno la stessa ergonomia: :root { --brand-coral: #ff7f50; } poi color: var(--brand-coral). I design token sono essenzialmente questa idea formalizzata, e i sistemi di design moderni li usano universalmente.

I miei dati di colore vengono inviati da qualche parte?

No. Tutte le conversioni di colore e i calcoli di distanza girano nel tuo browser. Apri la scheda Rete in DevTools e scegli un colore, vedrai zero richieste in uscita. Sicuro per colori di brand non rilasciati o qualsiasi lavoro di palette interno.