# Palette di colori tenui: codici polverosi per brand calmi

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

Salvia, rosa antico, ardesia e argilla trasmettono calma perché il colore è stato addolcito con il grigio. Ecco come funziona l'attenuazione, sette palette da copiare e l'unica cosa che impedisce a uno schema tenue di diventare nebbia.

## The short version

- Una palette di colori tenui è fatta di colori a saturazione ridotta, di solito mescolando del grigio o un po' del colore opposto.
- Colori tenui come salvia, rosa antico, blu ardesia, malva e argilla trasmettono calma, naturalezza e maturità.
- I colori tenui spesso hanno la stessa luminosità, quindi una palette tenue ha bisogno di un colore molto più scuro per testo e contorni.
- Verde salvia e rosa antico hanno tinte diverse ma luminosità quasi identica, ed è per questo che il testo dell'uno sull'altro è illeggibile.
- In CSS, color-mix() nello spazio oklch è un modo affidabile per attenuare qualsiasi colore del brand mescolandolo con il grigio.

Una **palette di colori tenui** è un insieme di colori con la saturazione abbassata, così appaiono polverosi, morbidi e leggermente grigi invece che puri. Salvia `#9CAF88`, rosa antico `#C9A9A6`, blu ardesia `#6B7F99`, malva `#B48A9B` e argilla `#B5826B` sono tipici. Si adattano ai brand che vogliono sembrare calmi e riflessivi: ceramica, benessere, cartoleria, architettura, moda lenta. Il problema è che i colori tenui tendono alla stessa luminosità, quindi ogni buona palette tenue include uno scuro deciso che la tenga insieme.

## Cosa rende tenue un colore

Un colore ha tre impostazioni: tinta, saturazione e luminosità (vedi [tinta, saturazione e luminosità](https://gradiently.design/it/guide/hue-saturation-brightness)). Attenuare significa abbassare la saturazione lasciando riconoscibile la tinta. Ci sono due modi classici: mescolare del grigio, che i designer chiamano ottenere un tono, o mescolare un po' del colore complementare, come i pittori hanno sempre fatto. Entrambi spingono il colore verso il neutro.

### Puri

- Verde `#2ECC71`
- Rosa `#FF5C8A`
- Blu `#2F6BFF`
- Arancione `#FF7A1A`

### Tenui

- Salvia `#9CAF88`
- Rosa antico `#C9A9A6`
- Blu ardesia `#6B7F99`
- Argilla `#B5826B`

Tenue non significa pastello. Un pastello aggiunge bianco, quindi resta pulito e chiaro; un colore tenue aggiunge grigio, quindi può essere chiaro, medio o scuro e ha sempre un che di polveroso. [Palette di colori pastello](https://gradiently.design/it/guide/pastel-color-palettes) e [tinte, toni e ombre](https://gradiently.design/it/guide/tints-tones-shades) tracciano il confine con più dettaglio.

## Sette palette di colori tenui con codici hex

- Gesso: #eef0e8
- Salvia: #9caf88
- Rosa antico: #c9a9a6
- Argilla: #b5826b
- Inchiostro muschio: #2e3a2c

Studio nel giardino, la palette che la maggior parte delle persone immagina pensando ai colori tenui. L'inchiostro muschio è l'ancora che rende utilizzabili gli altri quattro.

- **Porto:** nebbia `#E6E9EA`, blu ardesia `#6B7F99`, grigio mare `#93A3A6`, corda `#C2AD8E`, blu marino profondo `#22303C`.
- **Ceramica:** biscotto `#F1E8DD`, argilla `#B5826B`, smalto cenere `#A7A39A`, ferro `#5B4A42`, nero fornace `#231D1A`.
- **Polvere di lavanda:** foschia `#F1EBE6`, malva `#B48A9B`, erica `#8E8AA6`, salvia `#9CAF88`, melanzana `#4A3F4F`.
- **Uliveto:** crema `#F2EDE1`, oliva `#8A8A5C`, erba secca `#B1A87F`, terracotta `#A9674E`, corteccia `#3A3328`.
- **Nordico:** neve `#F2F3F1`, betulla `#D8D1C4`, lichene `#A3AE9D`, fiordo `#5F7A80`, pino `#24302E`.
- **Crepuscolo polveroso:** pergamena `#EFE6DA`, polvere di pesca `#D9A88F`, rosa bruno `#A06F6B`, grigio prugna `#6E5866`, notte `#2A2329`.

Ognuna di queste finisce con uno scuro. Non è decorazione. Senza, non c'è nulla in cui comporre il testo e nulla con cui tracciare un contorno, e la palette sembra una fotografia dimenticata al sole.

## Perché le palette tenui diventano nebbia

L'attenuazione elimina le differenze più forti tra i colori, quindi la luminosità resta l'unica cosa che li separa. Salvia `#9CAF88` e rosa antico `#C9A9A6` sembrano un bel contrasto tra verde e rosa, eppure il loro rapporto di contrasto è 1,09:1: luminosità quasi identica. Il testo dell'uno sull'altro è illeggibile. Perfino la salvia sul bianco puro arriva solo a 2,36:1.

| Coppia | Contrasto | Da usare per |
| --- | --- | --- |
| Salvia su rosa antico | 1,09:1 | Due forme affiancate, mai testo |
| Salvia su bianco | 2,36:1 | Forme grandi e illustrazioni |
| Blu ardesia su bianco | 4,10:1 | Solo titoli grandi |
| Rosa antico con testo `#3A2A2A` | 6,29:1 | Testo del corpo, supera AA |
| Inchiostro muschio `#2E3A2C` su gesso | 10,39:1 | Testo del corpo, supera AAA |
| Melanzana `#4A3F4F` su foschia | 8,40:1 | Testo del corpo, supera AAA |

Le WCAG chiedono 4,5:1 per il testo del corpo e 3:1 per il testo grande. In una palette tenue, lo scuro di ancoraggio fa tutto il lavoro di lettura.

Controlla le tue coppie con le indicazioni di [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility). Una buona abitudine è convertire per un attimo la palette in scala di grigi: se due colori diventano lo stesso grigio, non mettere mai l'uno sopra l'altro.

## Come attenuare qualsiasi colore in CSS

Se hai già un colore del brand brillante e vuoi un compagno più calmo, mescolalo con il grigio invece di scegliere a occhio un colore nuovo. `color-mix()` nello spazio oklch mantiene stabile la tinta mentre la saturazione cala ed è supportato in tutti i principali browser attuali.

```css
:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}
```

Mescolare verso un grigio medio attenua senza cambiare la tinta. In oklch, un chroma intorno a 0,03-0,07 appare tenue; da 0,15 in su appare vivido.

[OKLCH spiegato](https://gradiently.design/it/guide/oklch-explained) spiega perché questo spazio si comporta in modo più uniforme di HSL, e [la saturazione nel design](https://gradiently.design/it/guide/color-saturation) spiega quando rialzarla.

## Sfumature e sfondi tenui

I colori tenui creano sfumature morbide e silenziose, soprattutto quando i punti di colore sono vicini per tinta e la luce arriva da un lato. Aggiungi un po' di grana: le sfumature a basso contrasto fanno facilmente banding, e la texture le fa sembrare una superficie e non l'impostazione di uno schermo.

- Mattino salvia: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Polvere di pesca: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Foschia del porto: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Sera malva: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Quattro sfumature tenui. Ognuna mantiene tinte vicine, così la sfumatura non diventa mai marrone a metà.

Uno schema tenue può anche accogliere un colore appena più forte come accento, come una terracotta tra le salvie o un verde acqua più profondo tra i grigi. Limitalo a un solo elemento per design: un prezzo, un pulsante, una data. Dà all'occhio un punto dove posarsi senza rompere la calma, ed è così che di solito funzionano le [palette di toni terra](https://gradiently.design/it/guide/earth-tone-colors) da cui gli schemi tenui prendono spunto.

Un post social verticale per una collezione di ceramiche con lettere scure su uno sfondo morbido e polveroso

Un post di ceramica a 1080×1350. I colori tenui portano il mood; il testo scuro porta il messaggio.

Se il tuo brand vive di colori tenui, uno sfondo con una grana e una luce proprie fa gran parte del lavoro. Un Mark di Gradiently ti dà una superficie morbida e distintiva che mantiene leggibile il testo da sola, cosa che conta più in uno schema tenue che in qualsiasi altro.

## FAQ

### Cos'è una palette di colori tenui?

Una palette di colori a saturazione ridotta, che appaiono morbidi, polverosi e leggermente grigi. Salvia, rosa antico, blu ardesia e argilla ne sono esempi comuni.

### Che differenza c'è tra colori tenui e pastello?

I pastelli si ottengono aggiungendo bianco, quindi restano chiari e puliti. I colori tenui si ottengono aggiungendo grigio, quindi possono avere qualsiasi luminosità e hanno sempre un che di polveroso.

### Come rendo un colore più tenue?

Abbassane la saturazione, mescola del grigio o aggiungi una piccola quantità del suo colore complementare. In CSS, `color-mix(in oklch, tuocolore 50%, #8c8c8c)` lo fa in modo affidabile.

### Quali colori stanno bene con il verde salvia?

Rosa antico, argilla, crema, grigio caldo e un muschio profondo o un antracite per il testo. Evita di mettere testo salvia su rosa antico: hanno quasi la stessa luminosità.

### I colori tenui vanno bene per il branding?

Si adattano bene a brand calmi, artigianali e legati al benessere. Includi uno scuro deciso per testo e contorni, così la palette resta leggibile.