RGB ti dà tre canali decimali tra 0 e 255. Convertire in HEX trasforma ogni canale in un numero esadecimale di due cifre, così l'intero colore rientra in un token compatto che ogni browser, strumento di design e guida di stile capisce.
Come funziona la conversione da RGB a HEX
- Prendi il canale rosso e dividilo per 16: il quoziente è la prima cifra, il resto la seconda.
- Scrivi le cifre da 10 a 15 come lettere da A a F — 255 diventa FF.
- Ripeti per verde e blu, aggiungendo uno zero davanti ai singoli valori: 5 diventa 05.
- Unisci le tre coppie e metti un # davanti.
Esempio pratico
Esatto, purché i canali siano numeri interi da 0 a 255. Valori frazionari come rgb(79.5, 70, 229) vengono arrotondati al numero intero più vicino prima, perché HEX non può rappresentare valori intermedi.
RGB e HEX spiegati
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()
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
Tabella di riferimento da RGB a HEX
I colori CSS più comuni, convertiti da RGB a HEX.
| Colore | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |