RGB to HEX Color Converter

Sistemi di colore RGB e HEX Spiegati

RGB (Rosso, Verde, Blu) e HEX (esadecimale) sono due modi per rappresentare i colori esatti — utilizzano semplicemente sistemi di notazione diversi. Entrambi descrivono i colori mescolando tre colori primari di luce (rosso, verde, blu) a intensità diverse. Comprendere entrambi i sistemi è essenziale per la progettazione web, CSS, la progettazione grafica, l'editing delle foto e l'arte digitale.

Nel modello RGB, ogni dei tre canali (rosso, verde, blu) ha un valore di intensità da 0 a 255. Zero significa nessuna di quella colore; 255 significa intensità massima. Mescolando tutti e tre a 255 si ottiene il bianco (rgb(255,255,255)). Tutti e tre a 0 si ottiene il nero (rgb(0,0,0)). Con 256 valori possibili per canale e 3 canali, l'RGB può rappresentare 256³ = 16.777.216 colori distinti (circa 16,7 milioni).

Nel modello HEX, i tre canali sono ciascuno espresso come un numero esadecimale a due cifre (00 a FF), prefisso con #. L'esadecimale utilizza i numeri 0-9 e le lettere A-F, dove A=10, B=11, C=12, D=13, E=14, F=15. FF in esadecimale = 15×16 + 15 = 255 in decimale. Quindi #FFFFFF = rgb(255,255,255) = bianco. La conversione è semplicemente un cambio di base: decimale (base 10) a esadecimale (base 16).

Convertire RGB in HEX: Passo dopo passo

Per convertire ogni canale RGB in esadecimale è necessario dividere per 16 e esprimere il quoziente e il resto come cifre esadecimali:

1. Togliere il valore del canale (0-255)
2. Dividi per 16: quoziente = prima cifra esadecimale, resto = seconda cifra esadecimale
3. Converti entrambi in esadecimale se sono 10-15 (A-F)
4. Combinare: prima cifra + seconda cifra = valore esadecimale a 2 caratteri
5. Ripeti per i canali G e B
6. Concatenare: # + R_hex + G_hex + B_hex

Esempio: Convertire rgb(255, 99, 71) in esadecimale (rosso tomato).

• R=255: 255÷16=15 resto 15 → F + F → FF
• G=99: 99÷16=6 resto 3 → 6 + 3 → 63
• B=71: 71÷16=4 resto 7 → 4 + 7 → 47
• Result: #FF6347

Colori Web Comuni: Riferimento RGB e HEX

Ecco una tabella di riferimento completa per i colori web più utilizzati:

Utilizzo di RGB e HEX in CSS e Progettazione Web

CSS accetta diversi formati di colore. HEX e RGB sono i più comuni, ma il CSS moderno supporta anche HSL, colori denominati e i nuovi spazi di colore oklch e oklch per display a gamma più ampia.

In CSS, i colori possono essere specificati come:

• color: #FF6347; (HEX)
• color: rgb(255, 99, 71); (RGB)
• color: rgba(255, 99, 71, 0.5); (RGB + trasparenza alfa, 0=trasparente, 1=opaco)
• color: hsl(9, 100%, 64%); (Tono, saturazione, luminosità)
• color: tomato; (colore denominato CSS)

I codici HEX possono anche essere scritti in forma abbreviata a 3 caratteri quando ogni coppia è un dito ripetuto: #FF0000 = #F00, #FFFFFF = #FFF, #336699 non può essere abbreviato. La forma abbreviata dimezza il tempo di digitazione e viene supportata da tutti i browser.

Per la coerenza di design, i sistemi di design moderni (Material Design, Tailwind CSS, Bootstrap) utilizzano palette di colori predefinite espresse come codici HEX. Tailwind CSS, ad esempio, fornisce 22 famiglie di colori ciascuna con 10 tonalità (grigio-100 a grigio-900), tutte specificate come codici HEX nel file di configurazione.

RGBA e trasparenza alfa

RGBA aggiunge un quarto canale all'RGB: alfa, che controlla la trasparenza. I valori di alfa vanno da 0 (trasparente, invisibile) a 1 (opaco, nessuna trasparenza). I valori frazionari creano colori semitrasparenti.

Esempi: rgba(0, 0, 0, 0.5) è nero semitrasparente (come un overlay trasparente). rgba(255, 255, 255, 0.8) è bianco con 80% di opacità. Questo è comunemente utilizzato per effetti di overlay, elementi UI con vetro opaco e evidenziazione dello stato di hover.

In CSS moderno, c'è anche HEX con alfa: codici esadecimali a 8 caratteri dove gli ultimi 2 caratteri specificano l'alfa. #FF6347CC sarebbe Pomodoro con 80% di opacità (CC in esadecimale = 204 in decimale; 204/255 ≈ 0,8). Questo formato è stato introdotto nella specifica CSS Color Level 4 e viene supportato da tutti i browser moderni.

L'equivalente in RGBA è più semplice per gli esseri umani: rgba(255, 99, 71, 0.8) vs #FF6347CC. La scelta del formato dipende dalla preferenza personale e dalle attrezzature — gli strumenti di progettazione come Figma mostrano e esportano in HEX, mentre i preprocessori CSS (Sass, Less) utilizzano spesso RGBA per la sua leggibilità.

Basici della teoria dei colori per i progettisti

Capire il modello di colore RGB va di pari passo con capire la teoria dei colori. RGB è un modello di colore additivo — i colori sono creati aggiungendo luce. Mescolare R+G+B a intensità massima = bianco (tutta la luce). Questo è il contrario del modello di colore sottrattivo (pigmento/stampa), dove mescolare tutti i colori = nero.

I colori complementari in RGB si trovano opposti l'uno all'altro sulla ruota dei colori. Rosso (FF0000) e Ciano (00FFFF) sono complementari — nota che il Ciano è l'inverso bit a bit del Rosso (0,255,255 vs 255,0,0). Allo stesso modo, Blu e Giallo, Verde e Magenta. Le coppie complementari creano il massimo contrasto e vibrazione visiva quando sono poste l'una accanto all'altra.

La armonia dei colori guida la selezione dei colori che si combinano bene: analoghi (adiacenti sulla ruota), triadici (tre colori equidistanti), split-complementary e tetradici (quattro colori che formano un rettangolo). Queste relazioni aiutano i progettisti a creare paletti dei colori che sembrano intenzionali e visivamente bilanciati.

Accessibilità e contrasto: I WCAG (Linee guida per l'accessibilità del contenuto web) richiedono un rapporto di contrasto minimo tra testo e sfondo: 4,5:1 per il testo normale, 3:1 per il testo grande. Il rapporto di contrasto viene calcolato dai valori di luminanza relativa dei valori RGB. Molti strumenti online verificano la conformità WCAG — ciò è molto importante per gli utenti con vista bassa o cecità ai colori.

Spazi dei colori oltre l'RGB: HSL, HSB, CMYK

RGB non è sempre il sistema più intuitivo per scegliere i colori. Gli spazi dei colori alternativi possono essere più pratici per diversi casi d'uso:

HSL è particolarmente amichevole con i designer: il tono seleziona il colore (0°=rosso, 120°=verde, 240°=blu), la saturazione controlla quanto è vivido (0% è grigio, 100% è colore puro), e la luminosità controlla la luminosità (0% è nero, 50% è il colore puro, 100% è bianco). Regolare solo la luminosità mantenendo tono e saturazione costanti crea una scala di colori coerente — molto utile per creare stati di hover, stati disabilitati e sfumature di un colore del marchio.

Accessibilità dei colori e rapporti di contrasto

Le linee guida per l'accessibilità web (WCAG 2.1) specificano i rapporti di contrasto minimi tra i colori del testo e del background per garantire la leggibilità per gli utenti con vista ridotta o cecità ai colori. Circa l'8% degli uomini ha una forma di cecità ai colori, rendendo le scelte dei colori accessibili un requisito etico e legale per la progettazione web professionale.

Il rapporto di contrasto tra due colori viene calcolato dai loro valori di luminanza relativa: rapporto di contrasto = (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza del colore più chiaro e L2 è il colore più scuro. La luminanza relativa deriva dai valori RGB tramite una formula di correzione gamma: per ogni valore di canale v = V/255, se v ≤ 0,03928 allora lineare = v/12,92, altrimenti lineare = ((v+0,055)/1,055)^2,4. Quindi L = 0,2126×R + 0,7152×G + 0,0722×B.

Requisiti di contrasto minimi: il livello AA richiede 4,5:1 per il testo normale (inferiore a 18pt o 14pt grassetto) e 3:1 per il testo grande. Il livello AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Le combinazioni più comuni che falliscono sono il testo grigio chiaro su sfondo bianco (#999999 su bianco ha solo un rapporto di 2,85:1, fallendo il livello AA) e il testo scuro su sfondo scuro.

Creare un sistema di colori: da HEX a sistema di design

Un sistema di colori professionale include di solito un colore primario di marca, colori accentuati secondari, grigi neutrali e colori semantici (verde di successo, giallo di avviso, rosso di errore, blu di informazione). Ogni colore di base richiede diverse sfumature per diversi stati di interfaccia utente.

Partendo da un colore di marca come #3B82F6 (blu-500 di Tailwind), si può derivare una scala di 10 sfumature regolando la luminosità nello spazio HSL: blu-50 (#EFF6FF, molto chiaro), blu-100 (#DBEAFE), fino a blu-900 (#1E3A5F, molto scuro). I token di design mappano poi queste sfumature a utilizzi semantici: primary-button-bg = blu-600, primary-button-hover = blu-700, primary-button-text = bianco, ecc.

Quando si costruisce un sistema di colori di marca, considerare: regola 60-30-10 — 60% colore dominante (di solito neutro), 30% colore secondario, 10% colore accentuato. Assicurarsi che tutte le combinazioni di testo passino il testo WCAG AA. Testare i colori in diverse condizioni di illuminazione e schermi di dispositivi. Tenere conto del dark mode (che potrebbe richiedere valori di sfumatura diverse per mantenere il contrasto). Un sistema di colori ben progettato in codice è 8-15 valori HEX che coprono tutti i casi d'uso in modo coerente.

La psicologia dei colori nel design e nel marketing

I colori evocano risposte psicologiche e emotive, rendendo la scelta dei colori una decisione strategica nella creazione di marchi e design UI. La ricerca sulla psicologia dei colori (sebbene talvolta esagerata nella cultura popolare) fornisce linee guida utili per creare esperienze visive efficaci.

Rosso (#FF0000 range): Energia, urgenza, passione, pericolo. Utilizzato per le vendite ("Segnali di vendita" sono tipicamente rossi), avvisi di emergenza, segnali di stop e marchi di alimenti (Coca-Cola, McDonald's, KFC - il rosso stimola l'appetito e crea urgenza). Il rosso ad alta contrasto è eccellente per le chiamate all'azione quando si desidera un'azione immediata dell'utente.

Azzurro (#0000FF range): Fiducia, professionalità, stabilità, calma. Il colore dominante nella branding di finanza e tecnologia (Facebook, Twitter/X, LinkedIn, PayPal, IBM, Samsung). Gli studi mostrano che l'azzurro è il colore preferito a livello globale in tutte le culture. L'azzurro chiaro connota l'apertura e la cordialità; l'azzurro scuro connota l'autorità e l'expertise.

Verde (#00FF00 range): Natura, salute, crescita, successo (denaro negli Stati Uniti). Utilizzato pesantemente in marchi di salute e benessere, app finanziarie (ritorni positivi mostrati in verde), organizzazioni ambientali e segnali "va". I toni intermedi come #28A745 (verde di successo di Bootstrap) segnalano stati positivi nel UI senza essere aggressivi.

Ragno/Giallo range: Ottimismo, energia, creatività, avviso. Il giallo è altamente visibile (segnaletica stradale, taxi) ma difficile da leggere come testo su bianco. L'arancione (#FFA500 range) è spesso utilizzato per le chiamate all'azione - è visibile e energetico senza la connotazione di urgenza/pericolo del rosso.

Lavorare con i colori nei popolari strumenti di design

Ogni strumento di design importante ha la sua propria procedura di lavoro dei colori. Capire come lavorare con HEX e RGB in modo efficiente nel tuo strumento salva tempo significativo nel lavoro di design professionale.

Figma: Clicca su qualsiasi elemento riempito → Pannello delle proprietà mostra il colore riempito → Clicca sullo swatch del colore per aprire il picker. Puoi digitare i valori HEX direttamente o passare a RGB, HSL o HSB. Figma supporta anche l'opacità tramite il campo di opacità separato e la notazione RGBA. Incolla e incolla i codici HEX tra Figma e CSS senza conversione necessaria.

Adobe Photoshop: Apri Picker dei colori (squadre di colore di primo piano/secondo piano). La parte inferiore del picker mostra il codice HEX nel campo di testo. Fai clic con il pulsante destro sulle swatch dei colori per aggiungerle alla tua paletta. L'occhietto di selezione campiona qualsiasi colore sullo schermo - fai hover per vedere il suo codice HEX nel pannello di informazioni.

DevTools del browser: Ispeziona qualsiasi elemento → Pannello Stili mostra i valori CSS dei colori → Clicca sullo swatch del colore accanto a qualsiasi proprietà di colore per aprire un picker inline. DevTools può visualizzare i colori come HEX, RGB, HSL o denominati - clicca sulla anteprima del colore per ciclare sui formati. Questo è inestimabile per la reverse-engineering delle decisioni di design da siti web esistenti.

VS Code: I decoratori di colore (squadre colorate) appaiono accanto ai valori HEX e RGB nei file CSS. Fai hover per visualizzare un picker. L'estensione colorize aggiunge anteprime dei colori per tutti i formati di colore. Abbreviazioni Emmet come c:f espandono a color: #fff; per colori comuni.

Usando questo Convertitore RGB a HEX

Inserisci i valori dei canali rosso, verde e blu (ciascuno tra 0 e 255). Il convertitore visualizza il codice colore HEX pronto per essere incollato in CSS, HTML o in qualsiasi strumento di progettazione. I valori fuori da 0-255 vengono compressi automaticamente. Il convertitore mostra anche l'operazione inversa: inserisci un codice HEX per ottenere la decomposizione RGB. Utilizza questo strumento quando uno strumento di progettazione ti fornisce un valore RGB ma il tuo foglio di stile CSS utilizza il formato HEX, o quando copi colori tra diverse applicazioni che utilizzano formati diversi. Il codice HEX di output include il simbolo di guida # per la pastebin diretta nelle proprietà di colore CSS. Tutte le combinazioni di 16,7 milioni di colori RGB si mappano su un codice HEX unico a 6 caratteri senza ambiguità o arrotondamento.