# Palette monocromatica: una sola tinta, un’intera identità

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

Una sola tinta sembra un limite finché non vedi quanta gamma contiene. Costruito bene, un solo colore può coprire sfondi, testo, pulsanti e gradienti, e risultare più distintivo di un arcobaleno.

## The short version

- Uno schema di colori monocromatico usa una sola tinta in una gamma di luminosità e saturazione, costruita con tinte chiare, ombre e toni.
- Una tinta chiara è una tinta mescolata con il bianco, un’ombra è una tinta mescolata con il nero e un tono è una tinta mescolata con il grigio.
- Una scala monocromatica utile ha circa nove o dieci passi dal quasi bianco al quasi nero, distribuiti in modo uniforme per luminosità percepita.
- Spostare leggermente la tinta verso le estremità chiare e scure evita che una palette monocromatica sembri senza vita.
- Le palette monocromatiche creano gradienti calmi e coesi, ma le sfumature lente di una sola tinta fanno facilmente banding e traggono vantaggio da una grana fine.

Uno **schema di colori monocromatico** usa una sola tinta e nient’altro, variata in luminosità e saturazione. Pensa a navy, cobalto, cielo e ghiaccio: tutti blu, tutti chiaramente imparentati, e con abbastanza contrasto tra loro da gestire sfondi, testo e punti salienti. Dato che ogni colore condivide la stessa tinta, una palette monocromatica sembra sempre unitaria. Il lavoro sta nel costruire abbastanza gamma dentro quell’unica tinta.

Questa guida spiega i tre modi per variare una tinta, come costruire una scala con cui progettare davvero e come funziona il monocromo nei gradienti. Per il contesto più ampio, vedi [le basi della teoria del colore](https://gradiently.design/it/guide/color-theory-basics).

## Tinte chiare, ombre e toni

Ogni colore di una palette monocromatica nasce da una di tre mosse. Una **tinta chiara** aggiunge bianco, rendendo il colore più chiaro e morbido. Un’**ombra** aggiunge nero, rendendolo più profondo. Un **tono** aggiunge grigio, rendendolo più sommesso senza cambiarne molto la luminosità.

- Tinte chiare: verso il bianco: `linear-gradient(90deg, #2563eb 0%, #ffffff 100%)`
- Ombre: verso il nero: `linear-gradient(90deg, #2563eb 0%, #000000 100%)`
- Toni: verso il grigio: `linear-gradient(90deg, #2563eb 0%, #7a7a7a 100%)`

Un blu, tre direzioni. La maggior parte delle palette monocromatiche le usa tutte e tre.

## Come costruire una palette monocromatica

Una manciata di tinte chiare prese a caso non è una palette. Ciò che ti serve è una scala: una sequenza di passi dal quasi bianco al quasi nero, distribuiti in modo che ogni passo appaia diverso dal vicino quanto il precedente. Da nove a undici passi è una dimensione comune, ed è quella che usano quasi tutti i design system.

- Verde acqua 50: #f0fdfa
- Verde acqua 100: #ccfbf1
- Verde acqua 200: #99f6e4
- Verde acqua 300: #5eead4
- Verde acqua 400: #2dd4bf
- Verde acqua 500: #14b8a6
- Verde acqua 600: #0d9488
- Verde acqua 700: #0f766e
- Verde acqua 800: #115e59
- Verde acqua 900: #134e4a

Una scala di verde acqua in dieci passi. Passi chiari per gli sfondi, passi centrali per il colore, passi scuri per il testo.

1. **Scegli la tinta centrale** Scegli la versione del colore che ti piace di più a piena intensità. Diventa il centro della scala.
2. **Fissa le estremità** Scegli un quasi bianco con un accenno della tinta e un quasi nero con un accenno della tinta. Evita il bianco e il nero puri; sembrano scollegati.
3. **Riempi i passi per luminosità** Distanzia i passi in base a quanto appaiono chiari, non con valori hex o HSL uguali. Gli spazi percettivi come OKLCH lo rendono facile; vedi [i gradienti OKLCH](https://gradiently.design/it/guide/css-gradient-oklch).
4. **Abbassa la saturazione alle estremità** I passi molto chiari e molto scuri rendono meglio leggermente smorzati. La piena saturazione agli estremi sembra sgargiante o fangosa.
5. **Sposta un po’ la tinta** Lascia che l’estremità chiara scivoli un po’ verso il caldo o il freddo e quella scura nell’altra direzione. Aggiunge vita senza rompere lo schema.

### Perché un leggero spostamento di tinta aiuta

Gli oggetti reali raramente si scuriscono semplicemente aggiungendo nero: le ombre prendono luce più fredda o più calda dall’ambiente. Una scala che mescola solo bianco e nero sembra piatta al confronto. Spostare la tinta di qualche grado lungo la scala è una pratica standard nell’illustrazione e nei design system.

- Scala dritta: solo bianco e nero: `linear-gradient(90deg, #d3e0fb 0% 20%, #7ca1f3 20% 40%, #2563eb 40% 60%, #1a45a5 60% 80%, #0f285e 80% 100%)`
- Tinta spostata: cielo e indaco: `linear-gradient(90deg, #e0f7ff 0% 20%, #7cc4f5 20% 40%, #2563eb 40% 60%, #2f3aa8 60% 80%, #1e1b4b 80% 100%)`

Due scale di blu in cinque passi attorno allo stesso centro, `#2563eb`. La seconda scivola verso il cielo all’estremità chiara e verso l’indaco a quella scura, così sembra illuminata invece che mescolata.

## Un’intera identità su una sola tinta

Un brand monocromatico può essere sorprendentemente distintivo, perché è disciplinato come la maggior parte dei brand non è. Il trucco è dare a ogni passo della scala un compito e rispettarlo.

| Passo della scala | Compito |
| --- | --- |
| Da 50 a 100 | Sfondi di pagine e card |
| Da 200 a 300 | Bordi, divisori, riempimenti discreti |
| Da 400 a 600 | Colore del brand, pulsanti, illustrazioni |
| Da 700 a 800 | Titoli, link, riempimenti decisi |
| 900 e più scuri | Testo corrente, sfondi in modalità scura |

Ruoli per una scala monocromatica. Testo e sfondo vengono da estremità opposte, che è dove vive il contrasto.

Abbina sempre testo e sfondo da estremità opposte della scala. Due passi centrali sono bellissimi come campioni e falliscono come testo; verifica con le indicazioni sul [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility). Registra la scala, con il ruolo di ogni passo, nel tuo [brand kit](https://gradiently.design/it/guide/brand-kit), così tutti usano gli stessi valori.

Un post editoriale verticale con un titolo serif su uno sfondo morbido di una sola tinta

Un campo calmo, di una sola famiglia, sotto una tipografia editoriale.

Un header email largo con un titolo su uno sfondo calmo di una sola tinta

Lo stesso stile portato in un header email.

L’unica cosa che manca a un’identità monocromatica è un accento evidente. Se i tuoi design hanno bisogno che un pulsante o un prezzo saltino all’occhio, concediti un colore fuori dalla tinta e usalo di rado. Questo ti porta verso una [palette analoga](https://gradiently.design/it/guide/analogous-colors) o un monocromo con accento, entrambe ottime scelte.

## Gradienti monocromatici

I gradienti di una sola tinta sono tra i più eleganti che puoi creare: suggeriscono la luce che cade su un unico materiale. Non diventano mai fangosi, perché non c’è una seconda tinta con cui scontrarsi.

- Blu mezzanotte: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 55%, #3b82f6 100%)`
- Rosa: `linear-gradient(135deg, #4c0519 0%, #be123c 50%, #fda4af 100%)`
- Salvia: `linear-gradient(160deg, #1f2e24 0%, #4b6b55 55%, #c9dbc8 100%)`
- Sabbia: `linear-gradient(135deg, #5c4630 0%, #b08d63 55%, #efe3cf 100%)`
- Bagliore viola: `radial-gradient(circle at 30% 30%, #c4b5fd 0%, #7c3aed 40%, #2e1065 100%)`
- Grafite (nessuna tinta): `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #525252 100%)`

Sei gradienti di una sola tinta. Ognuno si muove solo in luminosità e un po’ in saturazione.

> **Attenzione al banding** Dato che un gradiente monocromatico cambia lentamente, ha meno livelli di colore da distribuire sullo schermo e tende a mostrare strisce visibili, soprattutto nei blu scuri e nei grigi. Un sottile livello di grana lo risolve; vedi [il banding nei gradienti](https://gradiently.design/it/guide/gradient-banding).

## FAQ

### Che cos’è uno schema di colori monocromatico?

Uno schema di colori monocromatico usa una sola tinta in una gamma di tinte chiare, ombre e toni, dal molto chiaro al molto scuro.

### Che differenza c’è tra tinta chiara, ombra e tono?

Una tinta chiara è una tinta mescolata con il bianco, un’ombra è mescolata con il nero e un tono è mescolato con il grigio.

### Il bianco e nero è uno schema monocromatico?

A rigore, nero, bianco e grigio sono acromatici, cioè senza tinta. Nell’uso comune però vengono spesso chiamati monocromo, e seguono gli stessi principi.

### Quanti colori deve avere una palette monocromatica?

Circa da nove a undici passi dal quasi bianco al quasi nero danno abbastanza gamma per sfondi, testo, bordi e colore del brand.

### Un brand può usare un solo colore?

Sì, se la palette ha una gamma completa di luminosità e ogni passo ha un ruolo chiaro. Molti brand monocolore aggiungono un piccolo accento per gli inviti all’azione.