Come il computer crea i colori: RGB, HEX e numeri binari
#FF0000. #00FF00. #0000FF. Prima o poi li hai incontrati in un mockup o nel codice. Sembrano codici segreti, quasi numeri di serie di un videogioco. In realtà sono nomi di colori.
Dall’alto in basso: rosso, verde, blu. Sono i nomi con cui il computer identifica i colori. Vediamo da dove vengono.
RGB — le tre lettere che creano il colore
Red, Green, Blue. I tre colori primari della luce. Mescolati in proporzioni diverse generano tutti i colori che vediamo.
RGB è ovunque, ogni giorno
Dove c’è uno schermo, c’è quasi sempre RGB.
- Monitor / TV — ogni pixel è composto da tre punti: rosso, verde e blu
- Schermo dello smartphone — stessa struttura, pixel più piccoli
- LED delle tastiere gaming — tre LED R·G·B per ogni tasto
- Illuminazione del case PC — la striscia RGB emette proprio segnali RGB
Se ingrandisci abbastanza lo schermo, lo vedi chiaramente. Rosso, verde, blu. Nient’altro. Milioni di minuscoli puntini RGB insieme formano l’immagine che guardi.
Il colore si crea mescolando
Ogni canale RGB ha un’intensità che va da 0 a 255.
RGB(255, 0, 0)— solo rosso al massimo → rosso puroRGB(0, 255, 0)— solo verde al massimo → verde puroRGB(255, 255, 0)— rosso + verde → gialloRGB(0, 0, 0)— tutto spento → neroRGB(255, 255, 255)— tutto al massimo → bianco
Può sembrare strano che rosso e verde mescolati diano giallo, ma questa è la sintesi additiva della luce. Funziona diversamente da quando si mescolano i colori a tempera (rosso + verde = marrone). La luce si somma e diventa più luminosa; sommata tutta, diventa bianca.
Muovi i tre cursori e verificalo tu stesso.
Il numero a 8 cifre che vedi a destra è la rappresentazione binaria di quel canale. Quando sposti il cursore, anche quel numero cambia. Come si ottengono 256 valori distinti usando solo 0 e 1 è il tema della prossima sezione.
Perché esattamente da 0 a 255?
Il computer lavora solo con 0 e 1. Una singola cifra che può valere 0 oppure 1 si chiama bit. Ogni bit aggiunto raddoppia il numero di valori rappresentabili.
8 bit = 1 byte. Un colore ha tre canali RGB, quindi 3 byte = 24 bit in totale. Con 24 bit si rappresentano circa 16,7 milioni di colori — abbastanza per saturare la percezione umana. Per questo 1 byte è diventato lo standard per canale.
Leggere il binario direttamente
Ogni posizione ha un valore fisso. Da sinistra a destra: 128, 64, 32, 16, 8, 4, 2, 1 — potenze di 2.
Sommando i valori delle posizioni che hanno un 1 ottieni il numero decimale corrispondente.
Per questo il valore massimo con 8 bit è 255. È il motivo esatto per cui un canale RGB va da 0 a 255.
HEX — lo stesso numero, più corto
RGB(255, 255, 255). Sono 16 caratteri. Da scrivere ogni volta in un campo CSS o in uno strumento di design è lungo. Ecco perché è nata una notazione più compatta per lo stesso numero.
Cos’è il sistema esadecimale
Il sistema esadecimale rappresenta in un singolo carattere i valori da 0 a 15. I numeri che usiamo normalmente vanno da 0 a 9 — dieci cifre. Per le sei mancanti si prendono in prestito le lettere dell’alfabeto.
Le regole sono tre:
- 0–9 rimangono invariate
- Da 10 si usa A
- F è il valore massimo per una singola cifra (= 15)
Perché proprio esadecimale?
4 cifre binarie (0000 ~ 1111) rappresentano esattamente 16 valori.
4 cifre binarie = 1 cifra esadecimale. Quattro cifre si comprimono in una. Siccome ogni canale RGB usa 8 bit, si traduce esattamente in 2 cifre esadecimali.
Convertire RGB in HEX
Convertiamo RGB(255, 87, 51).
La notazione che era 14 caratteri diventa 7 caratteri.
Intuire il colore da un codice HEX
Leggendo HEX al contrario si riesce a farsi un’idea del colore.
#FF5733— R massimo (FF), G a metà (57), B basso (33) → arancio dominato dal rosso#3576E0— R basso (35), G medio (76), B forte (E0) → blu con leggera sfumatura viola#29A85A— R basso (29), G forte (A8), B basso (5A) → verde fresco
Bastano le prime tre cifre per capire “è nella famiglia dell’arancio o del blu?”, e così designer e sviluppatori parlano la stessa lingua.
Riepilogo in una riga
- RGB — tre canali rosso·verde·blu, ciascuno da 0 a 255
- Binario 8 bit — il motivo per cui ogni canale può esprimere 256 valori
- HEX — la stessa notazione numerica compressa in due caratteri
Quando questi tre concetti si collegano, i codici colore smettono di essere geroglifici. I tre numeri RGB sono esattamente le sei cifre HEX.
Il passo successivo è trasformare questi numeri nel linguaggio del designer. Richieste come “un po’ più chiaro”, “meno saturo” o “lo stesso su carta” sono difficili da gestire solo con RGB e HEX. Come HSL, CMYK e OKLCH risolvono questo problema è spiegato in RGB non basta: notazioni colore HSL, CMYK e OKLCH.