Come convertire colori HEX in RGB e viceversa: guida per designer e sviluppatori

I modelli di colore sono sistemi matematici per rappresentare i colori digitalmente. Che tu lavori nello sviluppo web, nel design grafico, nel branding o in qualsiasi disciplina visiva, devi comprendere almeno tre modelli: HEX, RGB e HSL. Ognuno ha i suoi vantaggi a seconda del contesto.

Il CSS moderno accetta tutti e tre i formati. Puoi scrivere lo stesso rosso in questi modi:

• HEX: #FF0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)

Tutti e tre producono esattamente lo stesso colore, ma la loro utilita varia. HEX e compatto per il CSS. RGB e intuitivo quando si pensa alla miscelazione della luce. HSL e ideale quando vuoi regolare luminosita o saturazione senza cambiare la tonalita.

Con il convertitore di colori NexTools, puoi convertire tra tutti questi formati istantaneamente e vedere un'anteprima in tempo reale del colore.

Il formato HEX (esadecimale) rappresenta i colori con un simbolo # seguito da 6 cifre esadecimali (0-9, A-F). Le cifre sono raggruppate in coppie: le prime due per il rosso, le due successive per il verde, le ultime due per il blu.

Struttura: #RRGGBB

Ogni coppia va da 00 (0 decimale, nulla di quel colore) a FF (255 decimale, massima intensita):

Colore	HEX	Spiegazione
Nero	#000000	Zero rosso, verde e blu
Bianco	#FFFFFF	Massimo rosso, verde e blu
Rosso puro	#FF0000	Massimo rosso, niente verde ne blu
Verde puro	#00FF00	Niente rosso, massimo verde, niente blu
Blu puro	#0000FF	Niente rosso ne verde, massimo blu
Giallo	#FFFF00	Massimo rosso e verde, niente blu
Grigio medio	#808080	Quantita medie uguali

HEX abbreviato: Se ogni coppia ha cifre identiche, puoi abbreviare: #FF0000 = #F00. Ma #A1B2C3 non puo essere abbreviato.

HEX con trasparenza: Aggiungi due cifre per l'alfa (opacita): #FF000080 e rosso al 50% di opacita.

Il modello RGB (Red, Green, Blue) si basa sulla sintesi additiva della luce. Ogni componente va da 0 a 255, e miscelandoli si producono milioni di colori (esattamente 16.777.216 combinazioni).

In CSS: rgb(rosso, verde, blu)

Esempi pratici:

• rgb(255, 165, 0) = arancione
• rgb(128, 0, 128) = viola
• rgb(0, 128, 128) = teal
• rgb(255, 192, 203) = rosa

Con trasparenza (RGBA): rgba(255, 0, 0, 0.5) = rosso al 50% di opacita.

Conversione HEX in RGB: Converti ogni coppia esadecimale in decimale. Per #3A7BF2: 3A = 58, 7B = 123, F2 = 242. Risultato: rgb(58, 123, 242).

Conversione RGB in HEX: Converti ogni valore decimale in esadecimale a 2 cifre. Per rgb(58, 123, 242): 58 = 3A, 123 = 7B, 242 = F2. Risultato: #3A7BF2.

Il modello HSL (Hue, Saturation, Lightness) e il piu intuitivo perche separa il colore in tre dimensioni facili da capire:

• Hue (Tonalita): Il colore base in gradi da 0 a 360. 0°/360° = rosso, 120° = verde, 240° = blu.
• Saturation (Saturazione): Quanto e "vivo" il colore, da 0% (grigio) a 100% (colore puro).
• Lightness (Luminosita): Quanto e chiaro o scuro, da 0% (nero) a 100% (bianco). 50% e il colore puro.

Perche HSL e potente: Se hai un pulsante blu hsl(220, 80%, 50%) e vuoi la versione hover piu chiara, aumenta semplicemente la luminosita: hsl(220, 80%, 60%).

Sperimenta con le palette di colori usando il generatore di palette.

Questi sono i colori che incontrerai piu spesso nel web design con le loro equivalenze:

Nome	HEX	RGB	Uso comune
Tailwind Blue 500	#3B82F6	rgb(59,130,246)	CTA, link
Tailwind Red 500	#EF4444	rgb(239,68,68)	Errori, avvisi
Tailwind Green 500	#22C55E	rgb(34,197,94)	Successo, conferma
NexTools Primary	#C75B39	rgb(199,91,57)	Terracotta, brand

Per trovare il colore esatto di qualsiasi sito, usa lo strumento selettore colori.

Mentre RGB e HEX sono per gli schermi (luce), CMYK (Ciano, Magenta, Giallo, Nero) e il modello per la stampa (inchiostro).

Perche i colori appaiono diversi stampati: Uno schermo emette luce (RGB) mentre la carta riflette luce (CMYK). La gamma cromatica (gamut) del CMYK e piu piccola dell'RGB.

• I blu elettrici e i verdi neon perdono vivacita in CMYK
• Rossi e arancioni di solito si mantengono bene
• Il nero puro in CMYK e C:75 M:68 Y:67 K:90 (chiamato "rich black"), non C:0 M:0 Y:0 K:100

Scegliere i colori non e solo questione di estetica. Le linee guida WCAG 2.1 stabiliscono rapporti di contrasto minimi tra testo e sfondo:

• AA (minimo): Rapporto di contrasto 4,5:1 per testo normale, 3:1 per testo grande
• AAA (ottimale): Rapporto di contrasto 7:1 per testo normale, 4,5:1 per testo grande

Verifica sempre il contrasto delle tue combinazioni con lo strumento di verifica del contrasto.

Dato: Circa l'8% degli uomini e lo 0,5% delle donne ha qualche forma di daltonismo. Non usare mai solo il colore per trasmettere informazioni critiche.

Nello sviluppo web moderno, i colori vengono gestiti con CSS Custom Properties (variabili CSS) per facilitare temi e dark mode:

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}

.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

Con questo approccio, cambiare l'intera palette di un sito richiede di modificare solo le variabili, non ogni singolo selettore.

Consiglio: Quando crei un tema scuro, non invertire semplicemente i colori. Riduci leggermente la saturazione e usa grigi caldi invece del nero puro (#1A1A1A invece di #000000).

Genera gradienti CSS personalizzati per i tuoi temi con il generatore di gradienti.