# Codici colore HEX spiegati: come funziona #RRGGBB

Un codice colore HEX come #1e90ff è formato da tre coppie di cifre esadecimali: la quantità di luce rossa, verde e blu, ciascuna da 00 (niente) a ff (massimo, 255). Aggiungi una quarta coppia per impostare l’opacità: 80 vale circa il 50%, ff significa completamente opaco.

Fonte: https://pickshade.com/it/hex-color-codes
Aggiornato: 2026-09-28

## 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.

| Formato | Valore |
| --- | --- |
| HEX | #1e90ff |
| RGB | rgb(30 144 255) |
| HSL | hsl(209.6 100% 55.88%) |
| OKLCH | oklch(65.201% 0.19012 253.205) |

| Coppia | Canale | Calcolo | Valore |
| --- | --- | --- | --- |
| 1e | Rosso | 1 × 16 + 14 | 30 |
| 90 | Verde | 9 × 16 + 0 | 144 |
| ff | Blu | 15 × 16 + 15 | 255 |

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.

| Breve | Completo | Colore |
| --- | --- | --- |
| #fff | #ffffff | Bianco |
| #000 | #000000 | Nero |
| #f00 | #ff0000 | Rosso |
| #fc0 | #ffcc00 | Giallo caldo |
| #abc | #aabbcc | Blu grigiastro |
| #f008 | #ff000088 | Rosso al 53% di opacità |

## 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.

| Opacità | Alfa (0–255) | Coppia HEX | #1e90ff con alfa |
| --- | --- | --- | --- |
| 100% | 255 | ff | #1e90ffff |
| 95% | 242 | f2 | #1e90fff2 |
| 90% | 230 | e6 | #1e90ffe6 |
| 85% | 217 | d9 | #1e90ffd9 |
| 80% | 204 | cc | #1e90ffcc |
| 75% | 191 | bf | #1e90ffbf |
| 70% | 179 | b3 | #1e90ffb3 |
| 65% | 166 | a6 | #1e90ffa6 |
| 60% | 153 | 99 | #1e90ff99 |
| 55% | 140 | 8c | #1e90ff8c |
| 50% | 128 | 80 | #1e90ff80 |
| 45% | 115 | 73 | #1e90ff73 |
| 40% | 102 | 66 | #1e90ff66 |
| 35% | 89 | 59 | #1e90ff59 |
| 30% | 77 | 4d | #1e90ff4d |
| 25% | 64 | 40 | #1e90ff40 |
| 20% | 51 | 33 | #1e90ff33 |
| 15% | 38 | 26 | #1e90ff26 |
| 10% | 26 | 1a | #1e90ff1a |
| 5% | 13 | 0d | #1e90ff0d |
| 0% | 0 | 00 | #1e90ff00 |

```css
.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.

| Nome CSS | HEX | RGB | Come leggerlo |
| --- | --- | --- | --- |
| tomato | #ff6347 | 255, 99, 71 | Rosso al massimo, un po’ di verde e blu: un rosso chiaro caldo |
| gold | #ffd700 | 255, 215, 0 | Rosso e verde alti, niente blu: giallo |
| chocolate | #d2691e | 210, 105, 30 | Domina il rosso, verde a metà, blu basso: marrone aranciato |
| darkturquoise | #00ced1 | 0, 206, 209 | Verde e blu alti, niente rosso: ciano |
| dodgerblue | #1e90ff | 30, 144, 255 | Domina il blu, verde a metà strada: azzurro cielo |
| mediumorchid | #ba55d3 | 186, 85, 211 | Rosso e blu alti, verde basso: viola |
| teal | #008080 | 0, 128, 128 | Verde e blu a metà: ciano scuro |
| navy | #000080 | 0, 0, 128 | Solo blu, a metà: blu scuro |
| slategray | #708090 | 112, 128, 144 | Quasi uguali, blu leggermente avanti: grigio bluastro |

- 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.

| Grigio | Cos’è | L OKLCH | Contrasto su bianco | Contrasto su nero |
| --- | --- | --- | --- | --- |
| #808080 | Metà numerica, 128 | 0.600 | 3.95:1 | 5.32:1 |
| #777777 | Metà CIELAB, L* 50 | 0.569 | 4.48:1 | 4.69:1 |
| #767676 | Grigio più chiaro con 4,5:1 su bianco | 0.566 | 4.54:1 | 4.62:1 |
| #636363 | Metà OKLCH, L 0,5 | 0.500 | 6.01:1 | 3.50:1 |

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

### Cos’è un codice colore HEX?

Un codice colore HEX è un codice a sei cifre come #1e90ff che descrive un colore in base alla quantità di luce rossa, verde e blu che contiene. Ogni coppia di cifre esadecimali va da 00 (0) a ff (255), quindi #1e90ff è rgb(30, 144, 255).

### Come aggiungo l’opacità a un colore HEX?

Aggiungi una quarta coppia di cifre alla fine: #RRGGBBAA. Moltiplica l’opacità per 255, arrotonda e converti in esadecimale: il 50% è 80, il 25% è 40 e il 75% è bf. Per esempio, #1e90ff80 è dodgerblue con circa il 50% di opacità.

### Quanto vale l’opacità al 50% in HEX?

L’opacità al 50% in HEX è 80, come in #00000080 per un nero semitrasparente. 80 corrisponde a 128 su 255, cioè il 50,2%, perché l’alfa esadecimale ha 256 passi e il 50% esatto cade tra 7f e 80.

### Qual è la differenza tra HEX e RGB?

Nessuna differenza nel colore, solo nella notazione. HEX scrive i valori di rosso, verde e blu come coppie in base 16, rgb() come numeri decimali da 0 a 255, quindi #ff6347 e rgb(255, 99, 71) sono lo stesso rosso pomodoro.

### I codici colore HEX distinguono maiuscole e minuscole?

No. #FF6347, #ff6347 e #Ff6347 sono lo stesso colore in CSS, HTML, SVG e negli strumenti di design. La maggior parte dei progetti CSS usa il minuscolo, ma va bene qualsiasi stile, purché sia coerente.

### Qual è il codice HEX del grigio medio?

#808080 è la metà numerica, ma appare più chiaro della metà, con una luminosità OKLCH di 0,600. Un grigio che appare a metà strada tra nero e bianco sta tra #636363 (L OKLCH 0,5) e #777777 (L* CIELAB 50).

## Strumenti

- [Convertitore da HEX a RGB](https://pickshade.com/it/convert/hex-to-rgb)
- [Selettore colori con contagocce](https://pickshade.com/it)
- [Preleva colori da un’immagine](https://pickshade.com/it/image)
- [Colori CSS con nome](https://pickshade.com/it/css-colors)

## Guide correlate

- [Formati colore spiegati: HEX, RGB, HSL, OKLCH e tutti gli altri](https://pickshade.com/it/color-formats)
- [OKLCH spiegato: il formato colore che finalmente rispecchia la vista](https://pickshade.com/it/oklch)
- [APCA vs WCAG 2: di quale verifica del contrasto fidarsi](https://pickshade.com/it/apca-vs-wcag)