Vai al contenuto principale
Bethemesh
Immagini e grafica

Convertitore di colori

Passa rapidamente da una notazione di colore all’altra tra HEX, RGB e HSL e recupera i valori corrispondenti per i tuoi progetti web.

  • Appunti

Integra questo widget

Personalizza il risultato, controlla l’anteprima e copia il codice.

Anteprima

Tipo di codice di integrazione

Codice da copiare

Responsive e ridimensionato automaticamente da Bethemesh.

Colore

Codice HEX (#3366FF, #36F), rgb(51, 102, 255) o hsl(225, 100%, 60%), con trasparenza facoltativa.

Risultato

Questo strumento ti è stato utile?

Come funziona questo strumento?

Lo stesso colore si può scrivere in più modi in CSS: #3366FF, rgb(51, 102, 255) o hsl(225, 100%, 60%). Questo convertitore legge una di queste notazioni e mostra subito le altre due, trasparenza compresa, per passare da un mockup al codice, uniformare un foglio di stile o scoprire tonalità e luminosità di un codice esadecimale.

Inserisci un colore nel campo: codice HEX a 3, 4, 6 o 8 cifre (#36F, #3366FF80), rgb() o rgba() con virgole o spazi, oppure hsl() e hsla() con la tonalità in gradi, giri (turn) o radianti. Puoi anche fare clic sul campione per scegliere un colore nel selettore del sistema.

La conversione è immediata. HEX è mostrato in maiuscolo, RGB in interi da 0 a 255 e HSL con al massimo un decimale. Una trasparenza inferiore al 100 % aggiunge un quarto byte al codice HEX e produce rgba() e hsla(). I valori fuori intervallo vengono riportati al limite: rgb(300, 0, 0) diventa rgb(255, 0, 0).

Ogni risultato ha il suo pulsante Copia. I nomi di colore CSS come «red» o «navy» non vengono riconosciuti: inserisci il loro codice.

Come usare questo strumento

  1. Inserisci il colore

    Digita un codice HEX, un valore rgb() o hsl(), oppure sceglilo nel selettore.

  2. Leggi le equivalenze

    I campi HEX, RGB e HSL si aggiornano a ogni digitazione; un messaggio segnala un input non riconosciuto.

  3. Copia il risultato

    Fai clic sull’icona Copia accanto alla notazione che ti serve.

Da RGB a HSL

I tre canali sono riportati tra 0 e 1; il massimo M, il minimo m e la differenza Δ = M − m danno luminosità, saturazione e tonalità.

Luminosità

L = (M + m) ÷ 2

Media tra il canale più forte e il più debole.

Saturazione

S = Δ ÷ (1 − |2L − 1|)

Nulla quando i tre canali sono uguali (grigio).

Tonalità

H = 60° × ((G − B) ÷ Δ mod 6, (B − R) ÷ Δ + 2 o (R − G) ÷ Δ + 4)

La formula dipende dal canale più forte; il risultato è riportato tra 0 e 360°.

R, G, B
canali rosso, verde e blu divisi per 255
M, m
il maggiore e il minore dei tre canali
Δ
differenza M − m

Casi d’uso

Dal mockup al CSS

Trasforma il codice HEX di un mockup in hsl() per creare facilmente varianti più chiare o più scure.

Uniformare un foglio di stile

Rendi coerenti colori scritti a volte in HEX e a volte in rgb() nello stesso progetto.

Capire un colore

Leggi tonalità, saturazione e luminosità di un codice per capire perché appare spento o troppo acceso.

Esempi

Un blu di brand in tre notazioni

33, 66 e FF in esadecimale valgono 51, 102 e 255. Domina il blu: tonalità 225°, saturazione massima, luminosità 60 %.

Input

#3366FF

Risultato

HEX #3366FF; RGB rgb(51, 102, 255); HSL hsl(225, 100%, 60%)

Un colore HSL con trasparenza

Il colore HSL viene convertito in canali da 0 a 255 arrotondati, poi l’opacità del 50 % diventa il byte 80 in esadecimale (128 su 255).

Input

hsl(210 70% 50% / 50%)

Risultato

HEX #2680D980; RGB rgba(38, 128, 217, 0.5); HSL hsla(210, 70%, 50%, 0.5)

Consigli e buone pratiche

  • Per schiarire o scurire un colore senza cambiarne la tonalità, passa a HSL e modifica solo la luminosità.
  • Un codice HEX a 3 cifre raddoppia ogni cifra: #36F equivale a #3366FF.
  • L’HEX a 8 cifre (#RRGGBBAA) funziona nei browser attuali, ma alcuni programmi di grafica accettano solo 6 cifre.
  • Convertire HSL in HEX arrotonda i canali all’intero: due valori HSL molto vicini possono dare lo stesso codice HEX.

Fonti e riferimenti

Domande frequenti

Quali notazioni posso inserire?

HEX a 3, 4, 6 o 8 cifre, con o senza #, rgb() e rgba(), hsl() e hsla(), con le virgole o con la sintassi moderna a spazi e «/» per l’opacità.

I nomi di colore come «tomato» sono accettati?

No. Vengono lette solo notazioni numeriche; cerca il codice HEX del nome del colore e inseriscilo.

Perché la tonalità vale 0 per un grigio?

Un grigio non ha tonalità: i tre canali sono uguali, la saturazione è nulla e la tonalità è fissata a 0 per convenzione.

Come viene convertita la trasparenza?

L’opacità da 0 a 1 è moltiplicata per 255 e forma il quarto byte del codice HEX: 0,5 dà 80, con 1 il byte viene omesso.

La conversione è esatta?

HEX e RGB sono equivalenti bit per bit. HSL è calcolato senza arrotondamenti intermedi e mostrato con un decimale; il passaggio a HEX arrotonda ogni canale all’intero.

Il colore viene inviato da qualche parte?

No. La conversione è un calcolo eseguito nel tuo browser, senza richieste di rete.

Strumenti correlati

Continua con questi strumenti

Strumenti simili o complementari a questo.

Strumenti simili

Generatore di palette di colori

Crea una tavolozza complementare, analoga, triadica o monocromatica a partire da un colore.

Immagini e graficaUsa questo strumento

Simulatore di daltonismo

Visualizza un’immagine come può essere percepita con diversi tipi di daltonismo.

Immagini e graficaUsa questo strumento

Leggi anche

RiferimentoConcetti e tecnologiePrincipiante

RGB, HEX o HSL: quale notazione scegliere?

Comprendi come RGB, HEX e HSL descrivono i colori sRGB per scegliere una notazione CSS leggibile e convertire i valori senza confusione.

31 agosto 20263 min
GuidaBuone pratichePrincipiante

Contrasto WCAG: come rendere accessibili i colori?

Comprendi le soglie di contrasto WCAG, misura una combinazione di colori e correggi i casi che ostacolano la lettura o l’uso dell’interfaccia.

31 agosto 20264 min
GuidaFormatiPrincipiante

SVG: capire il formato vettoriale

Scopri come un file SVG descrive forme, usa viewBox e si integra in una pagina Web, con buone pratiche responsive, accessibilità e sicurezza.

31 agosto 20264 min