Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion Funziona localmente nel tuo browser
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
Il convertitore di colori traduce un singolo colore tra HEX, RGB, HSL e HSV e mostra il rapporto di contrasto WCAG rispetto al bianco e nero in modo da poter vedere immediatamente se il testo in quel colore è leggibile. HEX e RGB sono i formati che copi tra gli strumenti, ma HSL è quello effettivamente utile per il lavoro di progettazione: separa la tonalità dalla luminosità, in modo da poter produrre una tinta o un'ombra che mantenga la stessa tonalità invece di scivolare verso il grigio come fa l'ingenua matematica RGB. I valori esadecimali e rgba a otto cifre portano un canale alfa e il convertitore gestisce anche quelli.
Where people use the
- Trasformare il valore esadecimale di un marchio nella sintassi RGB prevista da uno strumento di progettazione.
- Produzione di una serie coerente di sfumature da una tonalità di marca utilizzando HSL.
- Controllare se il colore di un collegamento è leggibile su uno sfondo scuro.
- Corrispondenza di un colore scelto da uno screenshot al valore esadecimale più vicino.
How to use the
- 1
Inserisci il colore in qualsiasi formato
Incolla un valore esadecimale come 2f6fed o una funzione rgb o hsl oppure utilizza il selettore. Gli altri formati si aggiornano durante la digitazione.
- 2
Leggi tutte le rappresentazioni contemporaneamente
Hex, RGB, HSL e HSV vengono visualizzati insieme con il canale alfa separato.
- 3
Controlla i rapporti di contrasto
I rapporti rispetto al bianco e nero indicano se il colore è utilizzabile come colore del testo o come sfondo. Il corpo del testo richiede un rapporto di 4,5 a 1, il testo di grandi dimensioni e i bordi dell'interfaccia richiedono un rapporto di 3 a 1.
- 4
Copia il modulo richiesto dal tuo codice
Ogni campo ha il proprio pulsante di copia, quindi ottieni esattamente la sintassi prevista dal tuo foglio di stile anziché riformattarla manualmente.
Suggerimenti e migliori pratiche
- Regola la luminosità in HSL anziché aggiungere bianco o nero in RGB; la tonalità rimane intatta.
- Testare il contrasto alla dimensione più piccola in cui verrà effettivamente utilizzato il testo, non alla dimensione dell'intestazione.
- Mantieni una tavolozza documentata di cinque o sei valori invece di inventarne una nuova per componente.
Domande frequenti
Come viene convertito un colore esadecimale in RGB?
Ogni coppia di cifre esadecimali rappresenta un canale, letto come base 16. In 2f6fed, 2f è 47 rosso, 6f è 111 verde ed ed è 237 blu. Una scorciatoia a tre cifre come f0a raddoppia ogni cifra, quindi diventa ff00aa.
Perché la luminosità HSL non è la stessa cosa della luminosità percepita?
Perché l'occhio è molto più sensibile al verde che al blu. Il blu puro e il giallo puro possono condividere un valore di luminosità mentre il giallo appare molto più luminoso. Questo è il motivo per cui il contrasto deve essere misurato con una formula di luminanza anziché giudicato dal numero HSL.
Cosa significa la quarta coppia di cifre in un colore esadecimale?
Alfa, da 00 completamente trasparente a ff completamente opaco. Il formato esadecimale a otto cifre è supportato in tutti i browser attuali ed è l'equivalente esadecimale di rgba.
La conversione CMYK è accurata per la stampa?
No, e nessuno strumento del browser può esserlo. CMYK dipende dall'inchiostro, dalla carta e dal profilo della stampante. Utilizza questo valore come punto di partenza e convertilo tramite il profilo ICC del tuo fornitore di stampa per tutto ciò che conta.
Come faccio a scegliere un testo leggibile per uno sfondo colorato?
Confronta il rapporto di contrasto tra il colore del testo e lo sfondo. Se né il bianco né il nero raggiungono 4,5 a 1, lo sfondo è troppo saturo per il corpo del testo e deve essere scurito o schiarito prima di essere utilizzato dietro la copia.
Perché lo stesso esadecimale appare diverso su due schermi?
Perché i display differiscono per gamma, calibrazione e luminosità. Uno schermo ad ampia gamma mostra colori saturi che un pannello sRGB standard non è in grado di riprodurre. Lavora in sRGB a meno che tu non abbia un motivo specifico per non farlo.