Palette di colori tenui: codici polverosi per brand calmi

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

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 e tinte, toni e ombre tracciano il confine con più dettaglio.

Sette palette di colori tenui con codici hex

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

Controlla le tue coppie con le indicazioni di contrasto dei colori. 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.

: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);
}

OKLCH spiegato spiega perché questo spazio si comporta in modo più uniforme di HSL, e la saturazione nel design 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.

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 da cui gli schemi tenui prendono spunto.

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.