Convertitore da Hex a RGB

Benvenuto nel Convertitore da Hex a RGB, uno strumento completo per la conversione del colore che trasforma istantaneamente i codici colore esadecimali in valori RGB, RGBA, HSL, HSLA e CMYK. Che tu sia un web designer, uno sviluppatore o un artista digitale, questo strumento offre l'anteprima del colore in tempo reale, la funzionalità di copia con un clic, la generazione di colori complementari e il controllo del contrasto per l'accessibilità WCAG.

Cos'è un codice colore Hex?

Un codice colore hex (colore esadecimale) è un codice a 6 cifre utilizzato per rappresentare i colori nel web design, nel CSS e nella grafica digitale. Il codice è composto da tre coppie di cifre esadecimali (0-9 e A-F) che rappresentano l'intensità dei componenti rosso, verde e blu. Ogni coppia va da 00 (minimo, 0) a FF (massimo, 255).

Ad esempio, #FF5733 si scompone così:

• FF = 255 Rosso (massima intensità di rosso)
• 57 = 87 Verde (intensità di verde moderata)
• 33 = 51 Blu (bassa intensità di blu)

Il risultato è un vivace colore corallo-arancio. Il simbolo # è opzionale ma comunemente incluso per identificare il valore come codice colore esadecimale.

Abbreviazione a 3 cifre

Quando tutte e tre le coppie di colori utilizzano cifre ripetute, puoi usare l'abbreviazione a 3 cifre. Ad esempio, #FF5533 non può essere abbreviato, ma #FFAA00 può essere scritto come #FA0. Ogni cifra viene raddoppiata automaticamente: F diventa FF, A diventa AA, 0 diventa 00.

Come convertire Hex in RGB

La conversione da hex a RGB comporta la conversione di ogni coppia di cifre esadecimali nel suo equivalente decimale:

1. Rimuovi il simbolo # se presente
2. Dividi in coppie: Dividi le 6 cifre in 3 coppie (RR, GG, BB)
3. Converti ogni coppia: Converti dalla base 16 (esadecimale) alla base 10 (decimale)

Conversione da esadecimale a decimale

Ogni posizione della cifra esadecimale ha un valore: la prima cifra viene moltiplicata per 16 e la seconda cifra viene aggiunta. Per la coppia esadecimale "5A":

5 × 16 + 10 (A) = 80 + 10 = 90

Comprendere i formati di colore

RGB e RGBA

RGB (Rosso, Verde, Blu) utilizza tre valori da 0-255 per definire un colore. RGBA aggiunge un canale Alpha (da 0 a 1) per la trasparenza. RGB(255, 87, 51) è solido, mentre RGBA(255, 87, 51, 0.5) è trasparente al 50%.

HSL e HSLA

HSL (Tonalità, Saturazione, Luminosità) è spesso più intuitivo per i designer:

• Tonalità: Posizione sulla ruota dei colori (0-360 gradi). 0=rosso, 120=verde, 240=blu
• Saturazione: Intensità del colore (0-100%). 0% è grigio, 100% è vivido
• Luminosità: Brillantezza (0-100%). 0% è nero, 100% è bianco, 50% è colore puro

CMYK

CMYK (Ciano, Magenta, Giallo, Key/Nero) è utilizzato per la produzione di stampa. Mentre gli schermi utilizzano la miscelazione additiva dei colori (RGB), le stampanti utilizzano la miscelazione sottrattiva (CMYK). I colori possono apparire diversamente quando vengono stampati, quindi controllare i valori CMYK aiuta a garantire una riproduzione accurata in stampa.

Teoria del colore: Colori complementari e triadici

Colori complementari

I colori complementari si trovano l'uno di fronte all'altro sulla ruota dei colori, creando il massimo contrasto. Per qualsiasi colore esadecimale, il complemento viene calcolato sottraendo ogni valore RGB da 255. Le coppie complementari vengono utilizzate per:

• Pulsanti di chiamata all'azione (CTA) che risaltano
• Design di loghi con impatto visivo
• Creazione di tensione visiva ed energia

Colori triadici

I colori triadici sono tre colori equidistanti sulla ruota dei colori (separati da 120 gradi). Creano palette vivaci e bilanciate che mantengono l'armonia offrendo al contempo varietà. Questo schema è popolare nel design grafico e nel branding.

Accessibilità WCAG e contrasto

Le Linee guida per l'accessibilità dei contenuti Web (WCAG) definiscono i rapporti di contrasto per il testo leggibile:

• Livello AAA (7:1): Eccellente - standard di accessibilità più elevato
• Livello AA (4.5:1): Buono - minimo per il testo normale
• Livello AA Large (3:1): Accettabile per testo grande (18pt+ o 14pt grassetto)
• Fallito (<3:1): Contrasto insufficiente per l'accessibilità

Il nostro strumento calcola i rapporti di contrasto sia rispetto allo sfondo bianco che a quello nero, aiutandoti a scegliere colori di testo accessibili per i tuoi design.

Come usare questo convertitore

1. Inserisci il tuo codice hex: Digita o incolla un colore esadecimale (con o senza #). Funzionano sia i formati a 6 cifre che a 3 cifre.
2. Imposta l'alpha (opzionale): Regola la trasparenza da 0 (invisibile) a 1 (solido) per l'output RGBA/HSLA.
3. Fai clic su Converti: Visualizza istantaneamente i valori RGB, HSL, CMYK e l'anteprima del colore.
4. Copia qualsiasi formato: Fai clic sul pulsante copia per copiare i valori negli appunti.
5. Esplora le palette: Visualizza colori complementari, schemi triadici, sfumature e tinte per trarre ispirazione per il tuo design.

Domande frequenti

Cos'è un codice colore esadecimale?

Un codice colore esadecimale è una rappresentazione a 6 cifre (o 3 cifre in forma abbreviata) di un colore utilizzato nel web design e nella grafica digitale. Inizia con un simbolo # seguito da sei caratteri (0-9 e A-F) che rappresentano i componenti rosso, verde e blu. Ad esempio, #FF5733 rappresenta un colore corallo-arancio con Rosso=255, Verde=87, Blu=51.

Come si converte Hex in RGB?

Per convertire manualmente Hex in RGB: 1) Rimuovi il simbolo #, 2) Dividi le 6 cifre in 3 coppie (RR, GG, BB), 3) Converti ogni coppia da esadecimale a decimale. Ad esempio, #FF5733: FF=255 (rosso), 57=87 (verde), 33=51 (blu), ottenendo RGB(255, 87, 51). Il nostro convertitore lo fa istantaneamente.

Qual è la differenza tra RGB e RGBA?

RGB specifica il colore utilizzando i valori Rosso, Verde e Blu (0-255 ciascuno). RGBA aggiunge un canale Alpha (0-1) per la trasparenza. RGB(255, 87, 51) è un colore solido, mentre RGBA(255, 87, 51, 0.5) è lo stesso colore al 50% di opacità. RGBA è essenziale per creare sovrapposizioni ed effetti semitrasparenti.

Cos'è il formato colore HSL?

HSL sta per Hue (Tonalità), Saturation (Saturazione) e Lightness (Luminosità). La tonalità è l'angolo del colore (0-360 gradi), la saturazione è l'intensità del colore (0-100%) e la luminosità è la brillantezza (0-100%). HSL è spesso più intuitivo per i designer perché regolare la luminosità o la saturazione è semplice e non influisce sulla tonalità di base.

Cos'è il CMYK e quando dovrei usarlo?

CMYK sta per Ciano, Magenta, Giallo e Key (Nero). È il modello di colore utilizzato nella produzione di stampa. Mentre Hex e RGB sono per gli schermi (colore additivo), il CMYK è per la stampa (colore sottrattivo). Se il tuo design verrà stampato, dovresti controllare i valori CMYK per garantire l'accuratezza del colore.

Cos'è un colore complementare?

Un colore complementare è il colore direttamente opposto a un altro sulla ruota dei colori, creando il massimo contrasto. Per qualsiasi colore, il suo complemento si trova invertendo i valori RGB (255 meno ogni canale). I colori complementari creano design vivaci e ad alto contrasto e sono comunemente usati nei loghi e negli elementi di chiamata all'azione.

Risorse correlate

• Colori Web - Wikipedia
• Modello di colore RGB - Wikipedia
• Linee guida sul contrasto WCAG - W3C