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. Il complementare sulla ruota dei colori si ottiene ruotando la tonalità di 180° mantenendo la stessa saturazione e luminosità. Sottrarre ogni valore RGB da 255 produce il negativo RGB, non il complementare sulla ruota; consulta /color-inverter/ per la differenza. 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

• Linee guida sul contrasto WCAG - W3C