# Tonalità, saturazione e luminosità (HSB) spiegate semplici

[Canonical HTML page](https://gradiently.design/it/guide/hue-saturation-brightness)

I codici esadecimali sono per le macchine. Tonalità, saturazione e luminosità sono come le persone pensano davvero al colore: quale colore, quanto forte, quanto chiaro. Impara le tre manopole e ogni selettore di colore avrà senso.

## The short version

- Tonalità, saturazione e luminosità, o HSB, descrivono un colore con tre numeri: la tonalità è l’angolo del colore sulla ruota, la saturazione la sua intensità e la luminosità quanta luce ha.
- HSB si chiama anche HSV, dove V sta per value; i due nomi indicano lo stesso modello.
- HSL è un parente stretto in cui una luminosità del 50 per cento dà il colore puro e il 100 per cento dà sempre il bianco.
- Strumenti di design come Figma e Photoshop offrono selettori HSB, mentre il CSS supporta hsl() ma non HSB.
- Né HSB né HSL corrispondono a come l’occhio vede la luminosità dei colori, quindi i modelli percettivi come OKLCH sono migliori per costruire scale uniformi.

**Tonalità, saturazione e luminosità** (HSB) sono un modo per descrivere qualsiasi colore con tre semplici manopole. La **tonalità** è quale colore è, espressa come angolo da 0 a 360 gradi attorno alla ruota dei colori. La **saturazione** è la sua intensità, dal grigio allo 0 per cento al colore pieno al 100 per cento. La **luminosità** è quanta luce ha, dal nero allo 0 per cento alla versione più luminosa di quel colore al 100 per cento. Quando vedi i colori così, ritoccare una palette smette di essere un tirare a indovinare.

## Tonalità: quale colore

La tonalità è la posizione sulla [ruota dei colori](https://gradiently.design/it/guide/color-wheel). Sulle ruote a schermo il rosso sta a 0 gradi, il verde a 120 e il blu a 240, con giallo, ciano e magenta in mezzo. Poiché la tonalità è un angolo, le armonie di colore diventano semplice aritmetica: aggiungi 180 gradi per un complementare, 120 per una triade.

Tonalità da 0 a 360 gradi: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

L’intera gamma di tonalità alla massima saturazione e luminosità. La striscia inizia e finisce sul rosso perché la tonalità è un cerchio.

## Saturazione: quanto forte

La saturazione controlla quanta tonalità è presente. Abbassala e un colore si svuota verso il grigio; alzala e il colore diventa vivido. Le palette più raffinate stanno ben sotto la saturazione piena. I colori totalmente saturi gridano, il che va bene per un adesivo di saldi e stanca in un intero sito. [Le palette di colori attenuati](https://gradiently.design/it/guide/muted-color-palettes) sono per lo più una storia di saturazione più bassa.

- Saturazione 0%: #808080
- Saturazione 25%: #7f609f
- Saturazione 50%: #7f40bf
- Saturazione 75%: #7f20df
- Saturazione 100%: #7f00ff

Una tonalità viola a luminosità fissa, con la sola saturazione che cambia. A sinistra grigio puro, a destra colore pieno.

## Luminosità: quanta luce

In HSB la luminosità è quanto il colore è illuminato. Allo 0 per cento ogni colore è nero, qualunque siano tonalità e saturazione. Al 100 per cento ottieni la versione più luminosa che lo schermo può mostrare per quella tonalità e saturazione. Per fare un pastello pallido in HSB tieni alta la luminosità e abbassi la saturazione, il che mescola del bianco. È proprio l’idea dietro [tinte, toni e ombre](https://gradiently.design/it/guide/tints-tones-shades).

## HSB e HSL: la differenza che inganna tutti

HSL sembra quasi identico: tonalità, saturazione, **chiarezza**. La tonalità è la stessa. Cambia la terza manopola. In HSL una chiarezza del 50 per cento è il colore puro, lo 0 per cento è nero e il 100 per cento è sempre bianco. In HSB una luminosità del 100 per cento è il colore puro quando la saturazione è piena, e si arriva al bianco solo abbassando anche la saturazione. Anche i valori di saturazione differiscono tra i due, quindi lo stesso colore ha valori diversi in ciascuno.

| Colore | Esadecimale | HSB | HSL |
| --- | --- | --- | --- |
| Rosso puro | `#ff0000` | 0°, 100%, 100% | 0°, 100%, 50% |
| Viola | `#7c3aed` | 262°, 76%, 93% | 262°, 83%, 58% |
| Verde acqua profondo | `#0f766e` | 175°, 87%, 46% | 175°, 77%, 26% |
| Arancione vivo | `#f97316` | 25°, 91%, 98% | 25°, 95%, 53% |
| Bianco | `#ffffff` | Qualsiasi tonalità, 0%, 100% | Qualsiasi tonalità, qualsiasi saturazione, 100% |

La tonalità coincide; saturazione e terzo valore no. Controlla sempre quale modello usa un selettore prima di copiare i numeri.

### HSB (detto anche HSV)

- Luminosità 100% con saturazione 100% è il colore puro
- Il bianco richiede luminosità 100% e saturazione 0%
- Usato nei selettori di molti strumenti di design, tra cui Photoshop e Figma
- Non disponibile direttamente in CSS

### HSL

- Chiarezza 50% è il colore puro
- Chiarezza 100% è sempre bianco
- Scritto nativamente in CSS come `hsl()`
- Comodo per fare versioni più chiare e più scure

## Usare HSL in CSS

Il CSS capisce direttamente `hsl()`, il che lo rende comodo per i temi. Tieni la tonalità in una variabile e puoi spostare il colore di un’intera interfaccia con un solo numero. Esiste anche `hwb()` (tonalità, bianchezza, nerezza), più vicino nello spirito a HSB. I dettagli sono nella [pagina di MDN su hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), e [i colori HSL](https://gradiently.design/it/guide/hsl-colors) va più a fondo.

```css
:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */
```

Una tonalità, quattro usi. La chiarezza dà le versioni morbida e profonda; la saturazione dà quella attenuata.

## Perché la stessa chiarezza non sembra uguale

HSB e HSL sono geometria, non percezione. Giallo puro e blu puro stanno entrambi a una chiarezza HSL del 50 per cento, eppure il giallo sembra molto più luminoso: secondo la formula WCAG la sua luminanza relativa è circa 0,93 contro 0,07 del blu. Metti testo bianco su ciascuno e la differenza è evidente. È per questo che una palette costruita variando uniformemente la chiarezza HSL può sembrare irregolare, e perché il contrasto del testo va sempre verificato, non dato per scontato.

- Giallo, HSL 60° 100% 50%: #ffff00
- Verde, HSL 120° 100% 50%: #00ff00
- Rosso, HSL 0° 100% 50%: #ff0000
- Blu, HSL 240° 100% 50%: #0000ff

Quattro colori con esattamente la stessa chiarezza HSL. Su bianco, il giallo ottiene circa 1,07:1 e il blu circa 8,6:1.

I modelli percettivi risolvono il problema. [OKLCH](https://gradiently.design/it/guide/oklch-explained) mantiene l’idea familiare di chiarezza, croma e tonalità, ma la sua chiarezza segue ciò che vede l’occhio, quindi i passaggi sembrano uniformi. Per ritocchi rapidi HSB e HSL vanno benissimo; per una scala di brand o un [gradiente che evita i centri fangosi](https://gradiently.design/it/guide/gradient-interpolation), usa OKLCH.

## Modi rapidi per regolare un colore con HSB

- **Troppo forte:** abbassa la saturazione da 15 a 25 punti prima di toccare altro.
- **Troppo spento:** alza un po’ la saturazione, oppure sposta la tonalità di qualche grado verso il caldo.
- **Serve uno stato hover:** abbassa la luminosità di circa 10 punti.
- **Serve una tinta di sfondo:** tieni la tonalità, abbassa molto la saturazione e porta la luminosità vicino a 100.
- **Due colori stonano:** avvicina una tonalità all’altra, oppure attenua uno dei due.

Se preferisci partire da uno stile finito invece che da tre cursori, il Mercato di Gradiently ti permette di cercare i Mark con parole di colore come «verde acqua profondo» o «pesca calda».

## FAQ

### Cosa sono tonalità, saturazione e luminosità?

La tonalità è l’angolo di un colore sulla ruota dei colori, la saturazione è la sua intensità e la luminosità è quanta luce ha. Insieme descrivono qualsiasi colore da schermo.

### HSB è la stessa cosa di HSV?

Sì. HSV sta per hue, saturation, value, e value significa lo stesso di luminosità.

### Qual è la differenza tra HSB e HSL?

In HSB una luminosità del 100 per cento a saturazione piena è il colore puro. In HSL una chiarezza del 50 per cento è il colore puro e il 100 per cento è bianco.

### Posso usare HSB in CSS?

Non direttamente. Il CSS supporta `hsl()`, `hwb()` e `oklch()`, quindi converti i valori HSB in uno di questi.

### Qual è la differenza tra tonalità e saturazione?

La tonalità è quale colore è, come rosso o blu. La saturazione è quanto è forte quel colore, dal grigio al vivido.