Nomi dei Colori e Codici Hex

Trova i valori hex, RGB e HSL di qualsiasi nome di colore, o il nome più vicino a un codice. Con sfumature, tinte e rapporti di contrasto WCAG per 148 colori CSS.


Scrivi il nome di un colore oppure incolla un valore hex, RGB o HSL. Funzionano tutti e quattro i formati.
Cancella

Tutti i colori con nome di CSS

Tutti i 148 nomi di colore integrati in CSS, con i relativi valori hex e RGB. Clicca una riga qualsiasi per aprirla qui sopra.

Come funzionano i codici hex

Un codice hex non è altro che tre numeri scritti in base 16: quanto rosso, quanto verde e quanto blu, ciascuno da 00 a FF. Perciò #FFD700 significa rosso alla massima intensità, verde a 215 su 255 e nessun blu, che l'occhio interpreta come oro. Contano soltanto le coppie di due cifre, ed è per questo che #FFF e #FFFFFF indicano entrambi il bianco.

Hex, RGB e HSL a confronto

Tutti e tre descrivono gli stessi colori, veicolano solo informazioni diverse. L'hex è compatto ed è la scelta consueta in CSS. L'RGB riporta gli stessi numeri in decimale, più comodi per i calcoli. L'HSL separa la tonalità dalla saturazione e dalla luminosità, il che rende molto più semplice costruire una palette a mano: mantieni la tonalità, cambia la luminosità e ottieni una sfumatura abbinata.

Perché il contrasto è importante

Il testo deve staccarsi dallo sfondo quanto basta per essere letto da chi ha una vista ridotta o da uno schermo poco luminoso. Le linee guida sull'accessibilità fissano un rapporto di 4,5 a 1 per il testo normale (AA) e di 7 a 1 per il livello più severo AAA. Al testo grande è concesso 3 a 1. Questo strumento calcola il rapporto sia sul bianco sia sul nero, così vedi subito quale usare sopra.

Utile sapere

  • CSS ha 148 colori con nome e diversi sono duplicati: grey e gray, come aqua e cyan, sono identici.
  • La forma abbreviata dell'hex funziona solo quando ogni coppia si ripete, quindi #FFCC00 si può scrivere #FC0 ma #FFD700 non si può accorciare.
  • Aggiungere altre due cifre hex imposta la trasparenza, per cui #FFD70080 è oro a circa metà opacità.
  • Per costruire una palette, mantieni la tonalità in HSL e varia solo la luminosità. I colori sembreranno sempre imparentati.

Domande frequenti

Il colore CSS chiamato gold è #FFD700, cioè rgb(255, 215, 0). È un giallo dorato brillante più che un tono metallico, dato che un colore piatto non può riprodurre la lucentezza dell'oro vero. Per un effetto più metallico i progettisti lo abbinano di solito a ori più scuri come #B8860B, che in CSS si chiama darkgoldenrod.

Scrivi il nome nella casella qui sopra e ottieni insieme i valori hex, RGB e HSL. Funziona per tutti i 148 colori con nome di CSS e funziona anche al contrario: incolla un codice hex e lo strumento indica il colore con nome più vicino insieme alla distanza esatta.

Contengono esattamente la stessa informazione in notazioni diverse. L'hex scrive ciascuno dei tre canali con due cifre in base 16, quindi #FF7F50 è rosso 255, verde 127, blu 80. L'RGB scrive gli stessi numeri in decimale come rgb(255, 127, 80). Nessuno dei due è più preciso; l'hex è semplicemente più breve da digitare in CSS.

Tonalità, saturazione e luminosità. La tonalità è la posizione sulla ruota dei colori da 0 a 360 gradi, la saturazione indica quanto è vivace il colore e la luminosità va dal nero allo 0% al bianco al 100%. È il formato più pratico per progettare, perché mantenere la tonalità cambiando solo la luminosità produce una serie di sfumature che stanno evidentemente insieme.

La specifica CSS comprende 148 colori con nome, compreso transparent. Diversi nomi rimandano a valori identici, in particolare grey e gray, aqua e cyan, magenta e fuchsia. L'elenco completo con valori hex e RGB si trova in questa pagina.

Le linee guida sull'accessibilità chiedono almeno 4,5 a 1 per il testo normale e 3 a 1 per il testo grande, cioè il livello AA. Il livello più severo AAA chiede 7 a 1. Questo strumento calcola il rapporto del tuo colore rispetto al bianco e al nero e indica quale supera la soglia, così scegli subito l'opzione leggibile.

Sì. Un codice hex a otto cifre aggiunge due cifre di alfa in fondo, dove 00 è completamente trasparente e FF completamente opaco. Perciò #FF000080 è rosso a circa il 50% di opacità. Tutti i browser attuali lo supportano, anche se la vecchia notazione rgba() resta molto diffusa.

Perché i 148 colori con nome sono un campione minuscolo dei circa 16,7 milioni che uno schermo può mostrare. Se il tuo valore non coincide con uno di quei punti esatti, questo strumento cerca il colore con nome più vicino misurando la distanza tra i due nello spazio RGB, e ti avverte che si tratta di un'approssimazione e non di una corrispondenza.

Qual è il codice hex di un colore?

Scrivi il nome di un colore e ottieni in una volta i valori hex, RGB e HSL, oppure incolla un codice qualsiasi per trovare il colore CSS con nome più vicino. Gold è #FFD700, coral è #FF7F50 e teal è #008080. Ogni risultato mostra anche sfumature, tinte e il rapporto di contrasto rispetto al nero e al bianco.