Tinte, toni e ombre: come costruire una scala di colori

Tinte, toni e ombre sono i tre modi di cambiare un colore senza cambiarne la tonalità. Una tinta è il colore mescolato con il bianco, quindi diventa più chiaro e morbido. Un’ombra è il colore mescolato con il nero, quindi diventa più profondo. Un tono è il colore mescolato con il grigio, quindi diventa più quieto e smorzato. Pensa a tinte, toni e ombre come bianco, grigio e nero aggiunti a una sola tonalità. Metti in fila una serie di tinte e ombre e hai una scala di colori: lo strumento che trasforma un solo colore del brand in qualcosa con cui si può davvero progettare.

Tinta, tono e ombra a confronto

Il modo più semplice per vedere la differenza è partire da un colore e spingerlo in tre direzioni. Qui la base è un viola, #7c3aed, mescolato a passi del 20 per cento.

Cosa fanno tinte, toni e ombre a un design

Ogni direzione cambia l’atmosfera tanto quanto il colore. Le tinte sembrano gentili, giovani e aperte, ed è per questo che le palette di colori pastello sono quasi tutte tinte. Le ombre sembrano ricche, serie e premium, il territorio delle palette di colori scuri. I toni sembrano adulti e naturali, la base di quasi ogni palette di colori smorzati.

Come costruire una scala di colori da un hex

La maggior parte dei design system numera la scala da 50 o 100 (la più chiara) a 900 (la più scura), con il colore del brand da qualche parte vicino a 500. Conta più la coerenza dei numeri: ogni colore del sistema dovrebbe avere gli stessi passi, così 200 significa sempre uno sfondo chiaro e 700 significa sempre testo. Cinque passi scelti bene battono undici che nessuno distingue, e puoi aggiungere i passi intermedi quando i design reali mostrano dove mancano.

1. 1

   Colloca il colore del brand

   Decidi a quale passo appartiene. Un colore medio come #7c3aed sta a 500; un blu notte del brand molto scuro potrebbe stare a 800.

2. 2

   Costruisci l’estremo chiaro

   Mescola verso il bianco per i passi da 400 a 50. Il passo più chiaro dovrebbe essere appena colorato, abbastanza chiaro per lo sfondo di una pagina.

3. 3

   Costruisci l’estremo scuro

   Mescola verso il nero per i passi da 600 a 900. Il passo più scuro dovrebbe essere abbastanza scuro per il testo corrente su quello più chiaro.

4. 4

   Uniforma i passi

   Guarda la riga da lontano. Se due vicini sembrano quasi identici e un altro salto sembra uno scalino, correggi a occhio.

5. 5

   Sposta leggermente la tonalità agli estremi

   Il nero puro può far sembrare sporche le ombre. Molti designer spostano i passi scuri di qualche grado verso il blu o il viola e quelli chiari verso il caldo.

6. 6

   Verifica le coppie che si incontreranno

   Prova i passi del testo sui passi dello sfondo per il contrasto, usando contrasto dei colori e accessibilità come guida.

Creare tinte e ombre in CSS

Non serve più calcolare a mano ogni passo. La funzione CSS color-mix() mescola due colori in uno spazio colore a scelta, così un’intera scala può dipendere da una sola variabile. Mescolare in OKLCH mantiene i passi più uniformi all’occhio rispetto al semplice sRGB, come spiega OKLCH spiegato. Il supporto dei browser è ampio; per i dettagli vedi color-mix() su MDN.

:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}

Tinte e ombre nei gradienti

I gradienti più puliti sono spesso una sola tonalità che passa da tinta a ombra. Poiché nulla attraversa la ruota dei colori, non c’è una banda grigia nel mezzo, e il risultato si legge come luce che cade su un solo materiale. Gli schemi di colori monocromatici usano la stessa idea per intere palette.

Un Mark di Gradiently funziona in modo simile: una ricetta di colori imparentati con la luce che li attraversa. Quando progetti su uno, i colori vicino alle tue parole si approfondiscono o si alleggeriscono perché il testo resti leggibile senza un riquadro dietro.