Vai al contenuto
SPCXTools

Convertitore di Colori

Converti qualsiasi colore tra HEX, RGB, HSL, HSV e CMYK e verificane il contrasto.

Funziona localmente: i file non lasciano mai il tuo dispositivo

Caricamento strumento…

Come usare Convertitore di Colori

  1. 1Digita o incolla un colore in qualsiasi formato — ad esempio #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) o un nome CSS come tomato — oppure usa il selettore colori.
  2. 2Leggi lo stesso colore in HEX, RGB, HSL, HSV e CMYK e copia il formato di cui hai bisogno.
  3. 3Controlla il rapporto di contrasto su bianco e nero per vedere se il testo in questo colore è leggibile.
  4. 4Clicca su un campione nella scala di tinte e sfumature per esplorare le versioni più chiare e più scure.

Converti i colori tra tutti i formati più comuni

Designer, sviluppatori e marketer devono spesso convertire i colori tra strumenti che parlano lingue diverse: il CSS richiede HEX o HSL, le linee guida di un brand indicano RGB e CMYK, e un'app di design mostra HSB. Questo convertitore di colori accetta un colore in qualsiasi formato e lo mostra in tutti gli altri contemporaneamente, pronti da copiare con un clic. Verifica anche il contrasto del testo per l'accessibilità e genera una scala di tinte e sfumature.

Funzionalità

  • Qualsiasi formato di input: HEX (a 3, 4, 6 o 8 cifre), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, triplette numeriche e nomi dei colori CSS.
  • Tutti i risultati contemporaneamente: HEX, RGB, HSL, HSV e CMYK, ognuno con un pulsante copia.
  • Supporto per la trasparenza — i valori alfa vengono mantenuti in HEX8, RGBA e HSLA.
  • Color picker nativo per scegliere un colore visivamente.
  • Verifica del contrasto WCAG su sfondo bianco e nero, con risultati AA per testo normale e grande.
  • Tinte e sfumature dal 10% al 90% di luminosità; clicca su qualsiasi campione per caricarlo.

Guida ai formati colore

  • HEX — #RRGGBB in esadecimale, il formato più comune nel web design. Una quarta coppia opzionale imposta la trasparenza.
  • RGB — rosso, verde e blu da 0 a 255; il modo in cui gli schermi creano effettivamente i colori.
  • HSL — tonalità (la posizione sulla ruota dei colori), saturazione (intensità) e luminosità. Facile da regolare a mano: basta cambiare la luminosità per ottenere versioni più chiare o più scure dello stesso colore.
  • HSV / HSB — tonalità, saturazione e valore (luminosità), usato dalla maggior parte dei color picker nei programmi di grafica.
  • CMYK — percentuali di inchiostro ciano, magenta, giallo e nero (key) usate per la stampa.

Esempio

L'azzurro cielo #0EA5E9 è rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) e circa cmyk(94%, 29%, 0%, 9%). Il suo contrasto sul bianco è di circa 2.8:1 — ottimo per titoli grandi e icone, ma troppo basso per il corpo del testo, che richiede 4.5:1. Sul nero raggiunge circa 7.6:1, superando agevolmente il test.

Consigli per lavorare con i colori

  • Crea le palette in HSL. Mantieni fisse tonalità e saturazione e varia la luminosità per creare stati dei pulsanti, sfondi e bordi coerenti.
  • Controlla il contrasto fin da subito. Molti colori dei brand sono troppo chiari per il testo su bianco; usa una tonalità più scura della scala per il testo e quella originale per gli accenti.
  • Non affidarti solo al colore per trasmettere un significato — aggiungi icone o etichette per chi ha deficit nella percezione dei colori.
  • Considera le differenze in stampa. I colori RGB brillanti, specialmente i blu e i verdi vivaci, spesso risultano più spenti in CMYK.

Lavori anche con le immagini? Il Convertitore di Immagini converte i formati tra JPG, PNG e WebP. Per codificare una piccola immagine o icona per il CSS, usa Base64.

Domande frequenti

Come convertire HEX in RGB?
Un colore HEX ha tre coppie di cifre esadecimali per rosso, verde e blu. Converti ogni coppia dalla base 16 alla base 10: in #FF8800, FF = 255, 88 = 136 e 00 = 0, quindi il colore è rgb(255, 136, 0). Nelle abbreviazioni a tre cifre come #F80, ogni cifra viene prima raddoppiata.
Qual è la differenza tra HSL e HSV (HSB)?
Entrambi descrivono un colore tramite tonalità (0–360°) e saturazione, ma usano un terzo valore diverso. In HSL, la luminosità al 50% è il colore puro, allo 0% è nero e al 100% è bianco. In HSV/HSB, il valore o brillantezza al 100% è il colore puro a piena saturazione, e allo 0% è nero. Le app di design come Photoshop e Figma usano spesso HSB nei selettori di colore, mentre il CSS usa HSL.
La conversione in CMYK è accurata per la stampa?
I valori CMYK sono una conversione matematica dall'RGB, utile come punto di partenza. La stampa reale dipende da stampante, inchiostro e carta, definiti dai profili colore ICC. Per lavori di stampa professionali, esegui la conversione nel tuo software di design usando il profilo della tua stampante.
Cosa significano i rapporti di contrasto?
Le Web Content Accessibility Guidelines (WCAG) misurano il contrasto tra testo e sfondo da 1:1 a 21:1. Il testo normale richiede almeno 4.5:1 per superare il livello AA, mentre il testo grande (circa 24 px, o 18.7 px in grassetto) richiede 3:1. Lo strumento mostra se il colore supera il test su sfondo bianco e su sfondo nero.
Quali formati di input sono supportati?
HEX a 3, 4, 6 o 8 cifre (con o senza #), rgb() e rgba(), hsl() e hsla(), hsv() o hsb(), cmyk(), tre semplici numeri come 255 136 0 e i nomi dei colori CSS come rebeccapurple. Funzionano sia la sintassi separata da virgole che la moderna sintassi separata da spazi, incluso il canale alfa come rgb(14 165 233 / 50%).

Strumenti correlati

Convertitore di ImmaginiConverti foto e grafiche in JPG, PNG, WebP e AVIF — in blocco e senza caricamenti.Convertitore Maiuscole MinuscoleCambia il testo in qualsiasi formato — da Iniziali Maiuscole a snake_case — e visualizza tutte le versioni contemporaneamente.Codifica e Decodifica Base64Converti testo e file in Base64 e viceversa, con pieno supporto per UTF-8 e Base64URL.Generatore di Box ShadowPerfeziona ombre morbide, nette, a livelli o interne con un'anteprima in tempo reale e copia il CSS.Simulatore di daltonismoVisualizza in anteprima le tue immagini attraverso gli occhi di chi ha un deficit della percezione dei colori per garantire che i tuoi design siano accessibili.Controllo Contrasto ColoriVerifica se il tuo testo è sufficientemente leggibile e ottieni il colore più simile conforme alle WCAG.