Un codice HEX comprime tre numeri a 8 bit in sei cifre esadecimali. Convertire HEX in RGB significa dividere quelle cifre in coppie e leggere ogni coppia come un numero decimale tra 0 e 255 — esattamente i valori che CSS, Figma e gli editor di immagini si aspettano.
Come funziona la conversione da HEX a RGB
- Rimuovi il # iniziale e, se il codice ha solo tre cifre, raddoppia ciascuna: #f53 diventa #ff5533.
- Dividi le sei cifre in tre coppie — RR, GG e BB.
- Leggi ogni coppia come un numero in base 16 e convertilo in base 10: FF diventa 255, 57 diventa 87, 33 diventa 51.
- Scrivi i tre risultati come rgb(R, G, B).
Esempio pratico
Questa conversione è esatta. HEX e RGB descrivono gli stessi valori sRGB in notazioni diverse, quindi nulla viene arrotondato o perso in nessuna delle due direzioni.
HEX e RGB spiegati
Cos'è HEX?
Un codice HEX è un numero esadecimale di sei cifre che memorizza i canali rosso, verde e blu di un colore preceduto da #. Ogni coppia di cifre rappresenta un canale, da 00 (nessuno) a FF (tutto), offrendo gli stessi 16,7 milioni di colori dell'RGB in una notazione molto più compatta. HEX è il predefinito in CSS, strumenti di design e linee guida di brand.
- Sintassi:
- #RRGGBB
- Intervallo:
- 00–FF per canale
- Ideale per:
- CSS, consegne di design, linee guida del brand
Cos'è RGB?
RGB descrive un colore come tre canali di luce — rosso, verde e blu — ognuno da 0 a 255. Rispecchia il funzionamento degli schermi: tutti e tre a 255 danno il bianco, tutti a 0 danno il nero. RGB è la scelta giusta quando devi fare calcoli con un colore, e rgba() aggiunge la trasparenza.
- Sintassi:
- rgb(R, G, B)
- Intervallo:
- 0–255 per canale
- Ideale per:
- codice, canvas, trasparenza con rgba()
Tabella di riferimento da HEX a RGB
I colori CSS più comuni, convertiti da HEX a RGB.
| Colore | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |