HEX vs RGB: leggere e convertire i colori

Stesso colore, due notazioni

Su uno schermo, ogni colore è una miscela di luce rossa, verde e blu. HEX e RGB registrano solo quanta di ciascuna — descrivono colori identici, solo con grafia diversa. RGB si legge e regola facilmente a occhio; HEX è compatto e comodo da copia-incolla, per questo lo usano designer e codice. Convertire tra loro non cambia nulla del colore.

Leggere RGB

RGB dà tre numeri da 0 a 255, uno per canale: rgb(255, 0, 0) è rosso puro, rgb(0, 255, 0) verde, rgb(0, 0, 255) blu. Zero significa niente di quella luce, 255 il massimo. Mescolandoli si ottiene ogni altro colore — quantità uguali dei tre danno un grigio, e tutti e tre a 255 danno bianco.

Leggere HEX

Un colore HEX è un # seguito da sei cifre, due per canale, in base 16 dove le cifre vanno 0–9 poi A–F (quindi F è 15, e FF è 255). #FF5733 si scompone in FF rosso, 57 verde, 33 blu — lo stesso colore di rgb(255, 87, 51). #FFFFFF è bianco, #000000 nero, e una forma breve a tre cifre come #F53 raddoppia ogni cifra (quindi #F53 = #FF5533).

Convertire e aggiungere l'alfa

Convertire è solo cambiare la base di ogni canale: 87 in base 10 è 57 in hex, e viceversa. Per rendere un colore traslucido, aggiungi un valore alfa (opacità) — rgba(255, 87, 51, 0.5) è al 50% di trasparenza, o un hex a otto cifre #FF573380 fa lo stesso. Un convertitore gestisce entrambe le direzioni all'istante, risparmiando l'aritmetica in base 16 a mano.

Domande frequenti

È meglio HEX o RGB?

Danno lo stesso risultato. HEX è compatto per il codice, RGB più facile da leggere e regolare, e RGBA aggiunge la trasparenza.

Cosa significa #FFFFFF?

Tutti e tre i canali al massimo (255, 255, 255), cioè bianco. #000000 sono tutti a zero — nero.

Come aggiungo trasparenza?

Usa rgba() con un valore alfa 0–1, o un hex a otto cifre (#RRGGBBAA) dove l'ultima coppia imposta l'opacità.