DevToolPal
IT

Convertitore di colori (HEX, RGB, HSL)

Converti colori tra HEX, RGB, HSL, HSV e CMYK, con anteprima in tempo reale e contrasto su bianco e nero.

Eseguito in locale, mai caricato

Opzioni

Colore

Risultato

Il risultato apparirà qui

Cosa fa

Il convertitore di colori accetta un colore in qualsiasi notazione CSS comune e lo mostra contemporaneamente in tutte le altre: HEX, RGB, HSL, HSV e CMYK. Mostra anche un campione di anteprima, il nome del colore CSS quando c’è una corrispondenza esatta e il rapporto di contrasto con bianco e nero, così puoi verificarne la leggibilità.

Come si usa

  1. Scrivi o incolla un colore nel campo Colore, oppure usa il selettore di colore accanto.
  2. Tutte le notazioni si aggiornano mentre scrivi. Clicca su Copia accanto a quella che ti serve.
  3. Attiva HEX maiuscolo se la tua guida di stile scrive gli esadecimali in maiuscolo.
  4. Controlla le righe del contrasto prima di usare il colore per il testo: un badge verde indica che supera il livello WCAG AA.

Esempio

#1e90ff è il colore CSS dodgerblue. Si converte in:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Il suo contrasto su bianco è 3.24:1, sufficiente per titoli grandi ma non per il testo normale.

I modelli di colore in breve

  • HEX e RGB descrivono quanta luce rossa, verde e blu emette uno schermo. Sono i formati che browser e strumenti di design usano internamente.
  • HSL descrive tonalità (l’angolo sulla ruota dei colori), saturazione e luminosità, il che rende facile creare varianti più chiare o più scure dello stesso colore.
  • HSV (detto anche HSB) è usato dalla maggior parte dei selettori di colore nei software di design.
  • CMYK descrive gli inchiostri ciano, magenta, giallo e nero per la stampa.

I colori con trasparenza, come #1e90ff80 o rgb(30 144 255 / 50%), vengono mostrati con un canale alfa in HEX, RGB e HSL.

Domande frequenti

› Come si converte un colore da HEX a RGB?

Dividi le sei cifre esadecimali in tre coppie e leggi ogni coppia come un numero da 0 a 255. Per #1e90ff si ha 1e = 30, 90 = 144 e ff = 255, quindi rgb(30, 144, 255). Questo strumento lo fa per te mentre scrivi.

› Quali formati posso incollare?

HEX con o senza # (3, 4, 6 o 8 cifre), rgb() e rgba(), hsl() e hsla() sia con virgole sia con spazi, percentuali, unità angolari come deg e turn, e tutti i 148 nomi di colore CSS.

› Cosa significa il rapporto di contrasto?

È il contrasto WCAG 2 tra il colore e uno sfondo bianco o nero. Il testo normale richiede almeno 4.5:1 per il livello AA; il testo grande (circa 24px, o 19px in grassetto) richiede 3:1.

› Perché il CMYK è solo approssimativo?

Le stampanti usano profili d'inchiostro che dipendono da carta e macchina da stampa. Il CMYK mostrato qui è la formula standard indipendente dal dispositivo: un buon punto di partenza, ma non sostituisce un profilo di stampa.