Codici colore HEX spiegati: come funziona #RRGGBB

Come funziona un codice colore HEX

Ogni colore sullo schermo è una miscela di luce rossa, verde e blu. Un codice HEX scrive l’intensità di ciascuna luce con due caratteri dopo il simbolo #: prima il rosso, poi il verde, poi il blu. È lo schema #RRGGBB.

I caratteri sono esadecimali, un modo di contare con 16 cifre: da 0 a 9, poi a (10), b (11), c (12), d (13), e (14) ed f (15). Una coppia copre 256 valori, da 00 (0) a ff (255), esattamente l’intervallo di rgb().

Per trasformare una coppia in un numero normale, moltiplica la prima cifra per 16 e aggiungi la seconda. Qui sotto trovi #1e90ff, il colore CSS dodgerblue, in quattro formati, e poi il calcolo coppia per coppia.

Quindi #1e90ff è rgb(30, 144, 255): poco rosso, una buona dose di verde e blu al massimo, che insieme danno un azzurro cielo brillante. Tre coppie da 256 valori danno 16.777.216 colori possibili.

Forma breve HEX a 3 e 4 cifre

Quando le due cifre di ogni coppia sono uguali, puoi scrivere ogni coppia una volta sola. #ffcc00 diventa #fc0, e il browser raddoppia di nuovo ogni cifra. #1e90ff non ha una forma breve, perché 1e e 90 non sono coppie di cifre uguali.

La forma breve copre solo 4.096 dei 16,7 milioni di colori. Una versione a quattro cifre aggiunge l’opacità allo stesso modo, quindi #f008 significa #ff000088.

Opacità HEX: HEX a 8 cifre con alfa

Un codice a otto cifre aggiunge una quarta coppia per l’alfa, cioè l’opacità: #RRGGBBAA. 00 è completamente trasparente e ff completamente opaco. Tutti i browser attuali lo supportano in CSS, insieme alla forma breve a quattro cifre #RGBA.

Per ottenere la coppia, moltiplica l’opacità per 255, arrotonda all’intero e converti in esadecimale. Il 50% dà 127,5, che si arrotonda a 128, scritto 80. Ecco la tabella completa, applicata a #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Due insidie. Primo, 80 è 128 su 255, cioè il 50,2%, non esattamente il 50%: l’alfa esadecimale ha solo 256 passi, quindi quasi tutte le percentuali tonde sono approssimazioni. Secondo, Android mette l’alfa all’inizio. In una risorsa colore Android, #801e90ff equivale a #1e90ff80 in CSS.

Come leggere un codice HEX a occhio

Puoi intuire un colore senza convertire nulla. Guarda la prima cifra di ogni coppia, perché contiene quasi tutta l’informazione.

• La prima cifra più alta indica la luce dominante. #d2691e ha d nel rosso, 6 nel verde e 1 nel blu, quindi è un marrone aranciato.
• Due canali alti si mescolano: rosso e verde danno giallo, verde e blu danno ciano, rosso e blu danno magenta o viola.
• Tre coppie uguali danno un grigio. #333333 è grigio scuro, #999999 grigio chiaro. Coppie quasi uguali, come #708090, danno un colore spento e grigiastro.
• Cifre alte in generale indicano un colore chiaro, cifre basse un colore scuro. Quando tutte e tre le coppie valgono c0 o più, il colore è pallido. Quando valgono tutte 30 o meno, è molto scuro.
• A parità di numero, il verde appare molto più luminoso del blu. #00ff00 ha una luminosità OKLCH di 0,866, #0000ff solo di 0,452.

Perché #808080 non è il grigio medio

#808080 sta esattamente a metà nei numeri: 128 su 255 in ogni canale. Eppure non appare a metà strada tra nero e bianco. La sua luminosità OKLCH è 0,600, quindi viene percepito al 60% del percorso verso il bianco.

I valori HEX sono già codificati con la curva sRGB, che segue l’occhio in modo approssimativo ma non esatto. #808080 emette circa il 21,6% della luce del bianco, e i modelli percettivi collocano il punto medio visivo più in basso: OKLCH a #636363, CIELAB a #777777.

Questo conta per il testo. Il grigio #808080 su bianco ha un contrasto di 3,95:1 e non supera WCAG AA per il testo corrente. #767676 è il grigio più chiaro che raggiunge 4,5:1, e #777777, un passo più chiaro, fallisce già con 4,48:1.

Maiuscolo o minuscolo, con o senza #

I codici HEX non distinguono tra maiuscole e minuscole. #1E90FF, #1e90ff e #1E90ff sono lo stesso colore in CSS, SVG e negli strumenti di design. Scegli uno stile e usalo ovunque, così una ricerca nel codice trova ogni occorrenza. In CSS la scelta più comune è il minuscolo.

Il simbolo # fa parte della sintassi CSS, non del colore. Figma e molti strumenti di design mostrano il codice senza #, e i linguaggi di programmazione spesso lo scrivono come numero con il prefisso 0x, come in Flutter, dove Color(0xFF1E90FF) inizia con la coppia dell’alfa.

Come trovare il codice HEX di un colore sullo schermo

Usa un contagocce: uno strumento che legge il colore sotto il cursore e ne mostra il codice. Sono gratuiti e quasi sempre già installati.

• Chrome ed Edge: apri DevTools con F12, fai clic su un quadratino di colore nel pannello Stili e usa l’icona del contagocce per prelevare dalla pagina.
• PickShade: il selettore colori della home page ha, in Chrome ed Edge, un pulsante contagocce che preleva da qualsiasi punto dello schermo.
• Windows: installa Microsoft PowerToys e premi Win + Maiusc + C per aprire Color Picker.
• macOS: apri Colorimetro Digitale da Applicazioni, Utility. Impostalo su sRGB, poi nel menu Vista scegli di mostrare i valori in esadecimale.
• Figma, Photoshop e la maggior parte delle app di design: premi I per il contagocce.
• In una foto o in uno screenshot: aprili nel selettore colori da immagine e fai clic su un pixel qualsiasi. L’immagine resta sul tuo dispositivo.

Un valore prelevato può discostarsi di qualche unità dall’originale, perché gli schermi applicano profili colore e le immagini sono compresse. Quando ti serve il valore esatto, copialo dal file di design o dal CSS, non da uno screenshot.

Domande e risposte