# Codici colore esadecimali, RGB, HSL e OKLCH spiegati

[Canonical HTML page](https://gradiently.design/it/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) e oklch(54.1% 0.247 293) sono lo stesso viola. Ecco cosa dice davvero ogni notazione e quando ciascuna si guadagna il suo posto.

## The short version

- I codici colore esadecimali come `#7c3aed` sono un modo compatto di scrivere i valori di rosso, verde e blu da 0 a 255, ciascuno con due cifre in base 16.
- RGB, esadecimale e HSL descrivono tutti gli stessi colori sRGB, quindi qualsiasi colore scritto in una notazione può essere convertito esattamente nelle altre.
- L’HSL è facile da regolare a mano, ma il suo valore di luminosità non corrisponde a come appaiono davvero i colori chiari, quindi giallo e blu al 50% sembrano molto diversi.
- L’OKLCH descrive il colore con luminosità percepita, croma e tonalità, il che lo rende la notazione migliore per costruire palette, tinte e gradienti morbidi.
- Una regola pratica: condividi i colori del brand in esadecimale e costruisci palette e gradienti in OKLCH.

I **codici colore esadecimali** come `#7c3aed` sono il modo più comune di scrivere un colore sullo schermo: un `#` seguito da sei caratteri che indicano la quantità di rosso, verde e blu. L’RGB scrive gli stessi numeri in decimale, l’HSL li riorganizza in tonalità, saturazione e luminosità, e l’OKLCH descrive il colore come lo percepisce l’occhio. Sono notazioni diverse degli stessi colori, e ognuna è la migliore per un compito diverso.

- Viola: #7c3aed
- Cielo: #0ea5e9
- Arancione: #f97316
- Verde: #16a34a
- Inchiostro: #111827

Cinque colori usati come esempio in tutta questa guida. La tabella qui sotto scrive ciascuno nelle quattro notazioni.

## Come funzionano i codici colore esadecimali

Un codice esadecimale è formato da tre coppie di cifre in base 16: `#RRGGBB`. La base 16 conta da 0 a 9 e poi da a a f, quindi ogni coppia va da `00` (nulla) a `ff` (255, pieno). In `#7c3aed` il rosso è `7c` (124), il verde è `3a` (58) e il blu è `ed` (237): molto blu, un bel po’ di rosso, poco verde, cioè viola. Tre canali da 256 valori danno 16.777.216 colori possibili.

- **Forma abbreviata:** `#f0c` equivale a `#ff00cc`. Ogni cifra viene raddoppiata, quindi funziona solo per i colori con coppie che si ripetono.
- **Trasparenza:** un codice a otto cifre aggiunge l’alfa in fondo. `#7c3aed80` è il viola con circa il 50% di opacità, perché `80` è 128 su 255.
- **Maiuscole e minuscole non contano:** `#7C3AED` e `#7c3aed` sono identici.
- **I grigi hanno tre coppie uguali:** `#767676`, `#1a1a1a` e `#f4f4f4` sono tutti neutri.

## RGB: gli stessi numeri in decimale

L’RGB scrive i tre canali come numeri normali da 0 a 255. Il CSS moderno li separa con spazi e aggiunge la trasparenza dopo una barra; la vecchia sintassi con le virgole e `rgba()` funzionano ancora ovunque. L’RGB è comodo quando uno strumento o un’API chiede numeri, o quando vuoi leggere a colpo d’occhio la composizione di un colore.

```css
/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);
```

La sintassi moderna con gli spazi sopra, quella con le virgole sotto. I browser accettano entrambe.

## HSL: tonalità, saturazione e luminosità

L’HSL descrive un colore con la sua **tonalità** come angolo sul cerchio cromatico (0 è rosso, 120 verde, 240 blu), la sua **saturazione** dal grigio (0%) al colore pieno (100%) e la sua **luminosità** dal nero (0%) passando per il colore puro (50%) fino al bianco (100%). È facile da ritoccare a mano: per un viola più scuro, abbassa l’ultimo numero.

Il problema è che la luminosità dell’HSL è una formula, non una misura di quanto un colore appaia chiaro. Il giallo al 50% di luminosità sembra molto più brillante del blu al 50%. Se costruisci una palette mantenendo uguale la luminosità HSL, i colori non sembreranno ugualmente chiari, ed è proprio per questo che gli arcobaleni predefiniti sembrano a strisce. Vedi i [gradienti arcobaleno](https://gradiently.design/it/guide/rainbow-gradient) per il risultato visibile.

## OKLCH: il colore come lo vedi

L’OKLCH deriva da Oklab, uno spazio colore pubblicato da Björn Ottosson nel 2020 e oggi parte del CSS. Usa tre valori: **L** è la luminosità percepita da 0% a 100%, **C** è il croma, cioè quanto è colorato, da 0 per il grigio fino a circa 0,37 per i colori più vividi, e **H** è l’angolo della tonalità. Valori di L uguali sembrano davvero ugualmente chiari, quindi puoi cambiare una qualità senza disturbare le altre.

| Colore | Esadecimale | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Viola | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Cielo | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Arancione | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Verde | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Inchiostro | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

Gli stessi cinque colori in quattro notazioni. I valori HSL e OKLCH sono arrotondati. Nota come l’HSL dia al verde una luminosità inferiore al viola, mentre l’OKLCH mostra che in realtà è più chiaro.

L’OKLCH dà il meglio nei gradienti. Miscelando in sRGB semplice, l’impostazione predefinita dei colori esadecimali, si traccia una linea retta attraverso il cubo RGB, e i colori ai lati opposti del cerchio si incontrano nel grigio. Miscelando in OKLCH si mantiene il croma e si percorre invece il cerchio delle tonalità.

- Da blu a giallo in sRGB: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- Da blu a giallo in OKLCH: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

Gli stessi due punti. In sRGB il centro cade su un grigio oliva; in OKLCH passa per il turchese e il verde. Approfondisci in [gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients).

```css
.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}
```

L’OKLCH rende prevedibili tinte e sfumature: cambia L a passi regolari e abbassa C vicino agli estremi perché i colori restino visualizzabili sullo schermo.

## Quale codice colore usare e dove

| Compito | Notazione migliore | Perché |
| --- | --- | --- |
| Guida del brand, consegna del design | Esadecimale | Breve, universale, si incolla in ogni strumento |
| Trasparenza in CSS | RGB o esadecimale a 8 cifre | Alfa chiaro dopo la barra |
| Ritocchi rapidi a mano | HSL | Facile ritoccare tonalità o scurezza |
| Palette, tinte e sfumature | OKLCH | Passi uguali sembrano uguali |
| Gradienti | OKLCH | Miscela senza centri grigi |
| Schermi a gamma estesa | OKLCH | Può raggiungere colori fuori dall’sRGB |
| Stampa | CMYK o colori piatti | I codici per schermo non si stampano mai esattamente; vedi [stampare i gradienti](https://gradiently.design/it/guide/print-gradients) |

Nessuna di queste è sbagliata. L’abilità sta nell’usare ciascuna dove serve.

> **Lo schermo non è carta** Esadecimale, RGB, HSL e OKLCH descrivono tutti la luce di uno schermo. Le stampanti mescolano inchiostro, che copre una gamma di colori diversa, quindi fai sempre una prova di stampa dei colori del brand invece di fidarti di un codice convertito.

Per provare uno qualsiasi di questi valori, [oklch.com](https://oklch.com) mostra un colore in ogni notazione e avvisa quando esce dalla gamma di uno schermo, e il [riferimento MDN sui colori](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) copre ogni sintassi. Se stai scegliendo i colori invece di scriverli, [come scegliere i colori del brand](https://gradiently.design/it/guide/how-to-choose-brand-colors) è il passo successivo, e il [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility) mostra come verificare che il testo resti leggibile.

## FAQ

### Cosa significano i sei caratteri di un codice colore esadecimale?

Sono tre coppie di cifre in base 16 per rosso, verde e blu. Ogni coppia va da `00` (0) a `ff` (255), quindi `#7c3aed` significa rosso 124, verde 58, blu 237.

### L’esadecimale è uguale all’RGB?

Sì. L’esadecimale è l’RGB scritto in base 16. `#7c3aed` e `rgb(124 58 237)` sono esattamente lo stesso colore.

### Cos’è l’OKLCH?

L’OKLCH è una notazione del colore basata sullo spazio colore Oklab. Descrive luminosità percepita, croma e tonalità, quindi valori di luminosità uguali sembrano ugualmente chiari, e palette e gradienti diventano molto più prevedibili.

### Come aggiungo la trasparenza a un codice esadecimale?

Aggiungi altre due cifre per l’alfa. `#7c3aed80` ha circa il 50% di opacità e `#7c3aedcc` circa l’80%. In CSS puoi anche scrivere `rgb(124 58 237 / 0.5)`.

### Quale codice colore devo usare in CSS?

L’esadecimale va bene per i singoli colori. Usa l’OKLCH per palette, tinte, modalità scura e gradienti, dove la sua luminosità percettiva evita passi irregolari e centri grigi.