Convertitore di colori per il lavoro UI reale

Converti valori colore, controlla il contrasto ed esplora palette correlate prima che un token di design entri in produzione.

Fai clic per scegliere un colore
4.70vs Black
4.46vs White
Controllo del contrasto WCAG
Un rapporto di contrasto di 4,5:1 è la consueta linea di base WCAG per il corpo del testo normale. Il testo di grandi dimensioni ha una soglia inferiore, ma un contrasto debole danneggia comunque gli utenti reali.
HEX
RGB
HSL
CMYK

Relazioni cromatiche suggerite

Complementare
#6366f1
#f1ef63
Analogo
#63acf1
#6365f1
#a863f1
Sfumature
#6467f2
#2529ec
#1013bd
#0b0d7e
#05063f

Guida al formato colore

HEX

Un formato compatto ampiamente utilizzato nel web design, generalmente scritto come valore esadecimale a sei cifre.

RGB

Un modello di colore orientato allo schermo basato sui valori di luce rossa, verde e blu.

HSL

Un modello più leggibile dall'uomo costruito attorno a tonalità, saturazione e luminosità. È utile quando si creano stati dell'interfaccia utente più chiari, più scuri o correlati.

CMYK

Un modello orientato alla stampa basato su ciano, magenta, giallo e nero. Alcuni colori brillanti dello schermo possono cambiare aspetto quando vengono convertiti per la stampa.

Contrasto

Il contrasto influisce su moduli, dashboard, tabelle dei prezzi, stati di errore e ogni luogo in cui un utente deve leggere rapidamente.

Domande frequenti

Perché le conversioni RGB e CMYK variano leggermente?

Il colore dello schermo e il colore di stampa funzionano in spazi colore diversi. Alcuni colori RGB semplicemente non possono essere riprodotti esattamente in CMYK.

Cosa significa il punteggio di contrasto WCAG?

Misura la leggibilità dei colori di primo piano e di sfondo insieme. Valori più alti generalmente significano una migliore leggibilità del testo.

I colori del marchio dovrebbero essere utilizzati per il corpo del testo?

No. Un colore di marca che funziona bene per loghi o accenti potrebbe non funzionare nel corpo del testo. Usa neutri più solidi o tonalità corrette quando la leggibilità è importante.

Perché i colori appaiono diversi tra gli strumenti?

Display, profili colore, browser e flussi di lavoro di stampa diversi possono rappresentare lo stesso valore numerico in modo diverso. Considera la conversione come una guida pratica, quindi provala nel mezzo di destinazione.